使用jquery addClass和removeClass时浏览器重画非常慢

Question

我有一个页面需要动态添加 css 类。我的页面中有以下 Jquery 代码，

myElementsList.addClass('AClass').removeClass('BClass')

这些 css 类将更改我的元素的颜色和背景颜色。问题是重新绘制浏览器需要 2 或 3 秒的时间。

如果我使用不存在（或不重新绘制浏览器）的CSS类，那么它将很快执行。

myElementsList.addClass('NotEXistClassA').removeClass('NotEXistClassB')

有什么建议会受到欢迎吗？

编辑：

我解决这个问题的方法是先更改前 20 行，然后使用计时器更改其余行。如果事件在计时器到期之前再次引发，我也会重置此计时器。

欢迎任何其他建议。

Answer 1

这里的问题是你试图让浏览器同时做两件事，这两者都需要它重新绘制相同的东西。

但事实上，您只需执行这两个操作之一即可实现您想要做的事情（更改行的颜色）。

您需要进行的基本更改不是为“未选择”设置一种样式，为“选择”设置另一种样式，而是为“默认”设置一种样式，为“选择”设置一种样式。

然后，您可以使用“默认”样式来设置标准颜色，然后只需添加“选定”样式即可覆盖它；您不需要删除默认样式，因为所选样式将覆盖它。

下面是一些简单的 CSS 代码，可以帮助您入门：

.grid tr {
    background: #FFFFFF;  /*default white background*/
}

.grid tr.selected {
    background: #222222;
}

...当您选择它时，脚本将执行 addClass('selected') 操作，然后 removeClass('selected') code> 当您取消选择它时。

实际上根本不需要 not-selected 类。

这个简单的更改将消除您的程序在切换选择时正在执行的工作的一半，事实上，它很可能将速度提高 50% 以上，因为它不必在对象上进行多次重新绘制。相同的元素。

这肯定会让你走得更快一些。这并不是页面速度缓慢的全部原因，但它肯定会有很大帮助。

Answer 2

首先删除班级，然后分配新班级，

myElementsList.removeClass('BClass').addClass('AClass');

我认为这可能对您有帮助。