web性能优化--减少DOM操作
Posted 快饿死的鱼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web性能优化--减少DOM操作相关的知识，希望对你有一定的参考价值。
- 减少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操作的主要内容，如果未能解决你的问题，请参考以下文章