html页面重绘和回流以及优化

什么是回流与重绘？

1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
2. 当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具有不同的渲染机制，即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。