浏览器渲染与重绘重排

浏览器渲染

渲染流程的主要步骤：

1. 渲染引擎首先解析HTML文档，生成DOM树

​ 当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点

2. 将CSS解析成树形的数据结构，简称CSSOM
3. DOM和CSSOM合并后生成Render Tree
4. 布局处理，计算出Render Tree每个节点的具体位置
5. 绘制Render树 - 通过显卡，将Layout后的节点内容分别呈现到屏幕上

重排

什么是重排

浏览器渲染页面默认是流式布局，我们对于某个dom节点的修改时，就需要对该dom解构进行重新计算，dom的位置、 尺寸、大小等，周边或其他的dom可能也会收到影响，需要重新计算渲染树中年相关的部分

重排就是dom节点发生修改的时候，浏览器重新计算收到影响的dom相关的元素的信息，大小、位置、尺寸等，然后重新将他们安置在页面中的正确的位置

所有会引起页面布局发生变化的就会引起重排，

常见引起的重排操作：

页面的首次渲染

浏览器窗口大小发生改变、

元素尺寸或者位置发生改变

元素内容发生变化

元素字体发生变化

添加或删除可见的dom元素

获取特定的属性，offsetTop offserLeft scrollTop scrollLeft等

重绘

重绘只是改变元素再页面中的展示样式，而不会引起元素再文档流中位置的改变

color/background-color/box-shadow等只会引起重绘而不会重排

重排一点过会引起重绘，而重绘不一定能会引起重排

如何减少重绘与重排

1.将多个样式属性改变合并为一个，减少style的操作，通过操作class类名来改变样式

2.将需要多次重排的元素设置为绝对定位；

3.通过变量的形式来操作dom,减少重排

4.将进行复杂处理的元素通过display属性来控制显示与隐藏

5.将频繁获取引起重排的属性缓存到变量中

6.减少使用table布局；table中任何一个元素的改变，都会引起重排

7.使用事件代理