关于重绘回流的基础概念

什么是回流？

回流：reflow 当render tree中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，就是回流（reflow）

特点：

（1）每个页面至少回流一次

（2）回流时，浏览器会使渲染树中受影响的部分失效，并重构这部分渲染树

（3）回流完成时，浏览器就会重新绘制受影响的部分，是重绘过程

什么是重绘

重绘：repaints 当render tree中的一些元素需要更新属性，而这些属性只能影响元素的外观、风格而不影响布局，则称之为重绘（repaints）

特点：回流一定会引起重绘，重绘不一定会引起回流，回流的成本比重绘高

什么时候会回流

当布局和几何属性改变时就需要回流

（1）添加或者删除可见的DOM元素

（2）元素位置改变

（3）元素尺寸改变——边框、边距、填充、宽度和高度

（4）内容改变——比如文本改变或图片大小引起的计算值宽度和高度改变

（5）页面渲染初始化

（6）resize事件

什么时候会重绘

元素的属性或样式发生变化

性能优化具体方案

（1）使用DocumentFragment让要操作的元素"离线"，处理后一起更新

（2）直接更改classname（ 将多次更改变为一次更改 ），动态更改使用CSSText

（3）对于触发浏览器强制回流的属性进行缓存（比如获取元素的大小和位置）：浏览器为了给最精确的值就会进行回流

（4）对于需要多次重绘的元素，使用position使其脱离文档流