浏览器渲染机制、重绘、重排

渲染

网页在生成时，渲染次数 >= 1，因为在用户访问的过程中，会不断重新渲染，重新渲染有两种形式：重排与重绘

重排

概念：

当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。

理解：

重新生成布局，重新排列元素。使页面的结构发生改变，所以要重新排列。重排又称回流，就好比向河里扔了块石头，水面的涟漪扩散，周边的水流都受到了波及，不得不重排。

例子：

             1. 添加或者删除可见的DOM元素；
             2. 元素尺寸改变——边距、填充、边框、宽度和高度
             3. 内容变化，比如用户在input框中输入文字
             4. 浏览器窗口尺寸改变——resize事件发生时
             5. 计算 offsetWidth 和 offsetHeight 属性
             6. 设置 style 属性的值

影响范围：

1. 全局范围：从根节点html开始对整个渲染树进行重新布局。
2. 局部范围：对渲染树的某部分或某一个渲染对象进行重新布局

优化：

1. 分离读写操作
2. 样式集中修改
3. 缓存需要修改的DOM元素
4. 尽量只修改position：absolute或fixed元素，对其他元素影响不大
5. 动画开始GPU加速，translate使用3D变化

重绘

概念：

一个元素外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，就是重绘

理解：

只改变外观，不改变页面结构

重排与重绘的关系

重排一定包含重绘，因为一旦浏览器的布局重新改变之后，该变动的地方周围元素的样式肯定要重新绘制，所以重排一定会重绘，但重绘不一定会重排