html页面重绘和回流以及优化
什么是回流与重绘？
- 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
- 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
注意：回流必将引起重绘，而重绘不一定会引起回流。
回流何时发生：
当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流：
- 添加或者删除可见的DOM元素；
- 元素位置改变
- 元素尺寸改变–边框、填充、边框、宽度和高度等
- 内容改变–比如文本改变或者图片大小改变引起的计算值宽度和高度改变
- 页面渲染初始化
- 浏览器窗口尺寸改变–resizi事件发生时
触发页面重新布局的属性
| 盒子模型相关属性 | 定位属性以及浮动 | 改变节点内部文字结构 |
|---|---|---|
| width | top | text-align |
| height | bottom | overflow-y |
| padding | left | overflow |
| margin | right | font-family |
| display | position | line-height |
| border-width | float | vertival-align |
| border | clear | white-space |
| min-height | … | font-size |
| … | … | … |
只触发重绘的属性
color、border-style、border-fadius、visibility、text-decoration、background、background-image、background-image、background-position、background-repeat、background-size、outline-color、outline、outline-style、outline-width、box-shadow、…
如何规避页面回流？
- 用 translate 替代 top 改变
- 用 opacity 替代 visibility
- 不要一条一条的修改 DOM 的样式，预先定义好 class , 然后修改 DOM 的 className
- 把 Dom 离线后修改，比如先把 DOM 给 display:none (有一次reflow)，修改100次，然后再把它显示出来
- 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
- 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
- 动画实现的速度选择
- 对于动画新建图层
- css3启用GPU硬件加速 ，如下几个css属性可以触发硬件加速，transform、opacity、filter、will-change：哪一个属性即将发生变化，进而进行优化。
注意:
不能让每个元素都启用硬件加速，这样会暂用很大的内存，使页面会有很强的卡顿感。
GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制，即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。
