web性能优化--减少DOM操作（三）

标签：操作   处理   解析   就会   速度   连接   数组   string   性能优化   

• 减少DOM数量
• 减少DOM操作
• 批量处理DOM操作
• 批量处理样式修改
• 尽量不要使用tabel布局
• 尽量不要使用css表达式
• string用数组join
• css选择符优化

1.减少DOM数量

　　在HTML生成DOM树的时候，DOM数量越少，HTML渲染速度越快

2.减少DOM操作

　　每次操作DOM，都会带来repaint和refolw

3.批量处理DOM操作：

　　将元素移除DOM Tree，修改完后再放回去，因此只会调用一次repaint或者reflow

4.批量修改样式

　　改变classname，或者用css()，原理和批量处理js一样

5.尽量不要使用tabel布局

　　tabel中某个元素改变了，整个tabel就会reflow.

　　如果非用不可，可以设置tabel-layout:auto或者tabel-layout：fixed,让tabel一行一行的渲染，限制渲染范围

6.尽量不要使用css表达式

　　每计算一次就会触发reflow一次

7.string用数组join连接

　　在js中使用“+”来拼接字符串效率比较低，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接的字符串赋值给新变量。使用数组的话效率就高一点

8.css选择符优化

　　因为css是从右向左解析的，根据这个规则，尽量使右边的样式唯一

web性能优化--减少DOM操作（三）

标签：操作   处理   解析   就会   速度   连接   数组   string   性能优化   

原文地址：http://www.cnblogs.com/thonrt/p/6589648.html