使用jQuery addClass和removeClass时，浏览器的重绘速度非常慢

Question

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

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

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

如果我使用的css类不是eXist（或不重绘浏览器），那么它会很快执行。

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')如果取消它。

根本没有必要使用not-selected类。

这个简单的改变将会消除你的程序在切换选择时所做的全部一半的工作，实际上它很可能会加快50％，因为它不需要做多次重复 - 对相同元素的清除。

这肯定会让你快一点。关于你的网页为什么很慢，这不是完整的故事，但它肯定会有很大的帮助。

Answer 2

先删除类，然后指派新的类

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

我觉得这可能会帮助你。