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

前面有一篇记录了重绘和重排（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';