jquery - 使用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') 操作。

确实根本不需要未选择类。

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

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