Question

我的jQuery代码添加并删除了多个样式类。浏览器是否使用每行javascript代码重新渲染？例如：

$(this).addClass('text1-hidden');
$(this).removeClass('text-2-hidden');
$(this).addClass('text3-shown');
$(this).removeClass('text-4-shown');

浏览器何时重新绘制内容？

Answer 1

所有基于DOM的更改（例如，类名更改）都是在运行时立即进行的，没有人为可测量的延迟。

通过为元素分配/删除新类而影响的Stylechanges也将影响到immediatley。

Answer 2

一般来说，浏览器会在读取时进行更改。显然，如果您的代码包含在需要特定事件或回调的函数中才能被触发，那么在发生该事件/回调之前它将不会执行任何操作。

Answer 3

JS引擎将以程序方式逐行执行
执行时，浏览器也将按程序行事

代码将不聚集在一起做一些像这样的垃圾：

// this is perfectly valid code *** IF *** this is what you wish for the code to do
$(this).addClass('text1-hidden text3-shown');
$(this).removeClass('text-2-hidden text-4-shown');

如果上面的行是神奇地发生的那么那将是jQuery团队的设计决定。

如果jQuery团队实际上实现了类似的东西而没有强制它成为一个选择加入选项，那么我将停止使用jQuery。

编写能够满足您需要的代码。编程的美妙之处在于它不会“猜测”，只是按照您编程的顺序执行操作，除非您进入REGEX hell然后我会为您提供好运。

jQuery修改CSS - 浏览器何时呈现？

3 个答案: