1.了解浏览器的渲染机制
（1）浏览器采用流式布局模型。
（2）首先浏览器会将HTML解析成DOM，把CSS解析成CSSOM，把CSSOM与DOM结合产生render tree。
（3）有render tree 之后，我们知道了节点样式，然后浏览器会计算节点的位置，把节点绘制到页面上。
总结：回流不一定会引起重绘，重绘一定会引起回流
2. 回流
当我们render tree 中的一些元素的结构或者尺寸发生改变，浏览器重新渲染部分或全部文档的过程就叫做回流。
会导致回流的的操作：
- 页面首页渲染
- 浏览器窗口大小发生变化
- 内容变换
- 添加或者删除节点
- 激活CSS伪类
- clientWidth
3. 重绘
当页面中元素样式的改变不影响它在文档流中的位置，浏览器会将新样式赋予给新元素，这个过程叫做重绘。
- background
- visibility
- outline
4. 性能影响
总结：回流的性能消耗要比重绘大
5. 避免性能影响
CSS：
- 避免使用table布局
- 避免设置多层内联样式
JavaScript： - 避免频繁操作DOM
- 对于大量插入DOM的操作，建议使用文档片段，也就是documentFragment
网友评论