回流和重绘

1.页面渲染过程

解析HTML构建 DOM Tree
解析CSS构建 CSSOM Tree
构建渲染树（Render Tree）
根据Render Tree渲染网页节点实现布局

2.什么是回流和重绘

2.1回流

当渲染树render tree中的一部分因为元素的规模尺寸，布局，隐藏等，而需要重新构建。
在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘

回流代价远大于重绘，回流必然发生重绘，而重绘不一定发生回流

回流就是计算元素在设备内确切的位置和大小并且重新绘制

导致回流操作（影响布局）：

页面首次渲染

浏览器窗口大小发生变化（resize事件）
元素尺寸或位置发生改变（边距，宽高，边框）
元素内容变化（文字数量或图片大小）
添加或者删除可见的DOM元素
激活CSS伪类
查询某些属性或调用某些方法

width，heigth，margin，padding，display，font-size…

2.2 重绘

当渲染树render tree中的一些元素需要更新样式，但这些央视属性只改变元素的外观，风格而不影响布局，就成为重绘（repaint）

导致重绘操作（不影响布局）：

color，background…

2.3 为什么不建议频繁操作DOM？

浏览器线程中DOM和JS的实现，并不是在同一个引擎中完成的。通过JS操作DOM涉及到两个线程之间的通信，损耗性能

3.浏览器的优化机制

由于每次回流（重排）都会造成额外的计算小号，因此大多数浏览器都会通过队列化修改并批量执行来优化重排搓成。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到一个阈值，才会进行批量修改并且清空队列。

4.优化回流重绘

1.合并对DOM样式的修改（class）

• 避免使用table布局
• CSS尽可能扁平化
• 如果需要对DOM进行多次访问，尽量使用局部变量缓存该DOM

2.DOM离线处理

• display:none仅触发一次回流（visibility : hidden 的元素只对重绘有影响，不影响重排）
• 通过 documentFragment 创建一个 dom 文档片段进行批量操作
• 克隆节点，修改完再替换原始节点

3.DOM脱离普通文本流

• 使用absoult或fixed让元素脱离普通文档流

4.CSS3硬件加速
transform
opacity
filters
Will-change