js性能之最小化重绘和重排（样式相关）

于 2012-09-22 20:18:43 发布 · 200 阅读

文章标签：

14 篇文章

订阅专栏

本文探讨了在网页开发中优化样式修改与DOM操作的方法，包括使用cssText属性一次性修改多个样式，避免频繁修改内联样式，以及通过修改class名称减少DOM操作带来的性能影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面有一篇记录了重绘和重排（http://zhangyaochun.iteye.com/blog/1681641）

改变样式方面：

多次修改样式的时候应该合并所有的改变最后一次处理，这样只修改DOM一次

1、使用cssText。

var el = document.getElementById("test");
el.style.cssText = "color:blue;border:1px solid red;width:100px;"

(这个其实在动画里面还是有比较多应用，比如以前百度世界末日专题里面的动画)。

2、修改class的名称，而不是修改内联样式

试用的场景：不依赖运行逻辑和计算的情况。

var el = document.getElementById("test");
el.className = 'hover';