性能优化 ---- 页面渲染 重绘 回流

页面呈现流程： （代码怎么显示到电脑上）

参考： 高性能WEB开发：深入理解页面呈现、重绘、回流

• 浏览器解析html生成Dom数，根节点一般为document对象，里面包含所有的html标签 文本 注释 包括display: none隐藏以及js动态添加的元素
• 浏览器把所有的样式解析成样式结构体cssom
• dom数和css结构体 构建 渲染书（render tree）能识别样式 每个节点都有自己对应的样式，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到render tree中。
• 一旦render tree构建完毕后，浏览器就可以根据render tree来绘制页面了。

回流（reflow）

因为一些原因要重新构建渲染数的时候，就叫做回流, 第一次构建的时候也叫做回流。

引起回流的操作（回流一定会导致重绘）

影响元素几何属性发生变化

• 元素规模尺寸布局发生遍化的时候
• 改变浏览器大小
• 显示隐藏元素 （display）
• 移动元素

重绘

浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

只引起重绘的操作

• 改变字体颜色 背景颜色

回流比重绘的代价要更高，回流的花销跟render tree有多少节点需要重新构建有关系，假设你直接操作body，比如在body最前面插入1个元素，会导致整个render tree回流，这样代价当然会比较高，但如果是指body后面插入1个元素，则不会影响前面元素的回流。

浏览器本身的优化

浏览器都会优化这些操作，浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会把flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

请求以下信息会引起，强制浏览器提前flush队列的操作

• offsetTop, offsetLeft, offsetWidth, offsetHeight
• scrollTop/Left/Width/Height
• clientTop/Left/Width/Height
• width,height
• 请求了getComputedStyle(), 或者 ie的 currentStyle

如何减少重绘、回流

（就是减少对render数的操作、减少获取style的操作）

具体方法

• 避免一个一个的改变样式（每改变一个就引起一次重绘甚至回流）通过直接改变className ，动态改变一些样式，则使用cssText来改变
• 让要操作的元素进行"离线处理"，处理完后一起更新，这里所谓的"离线处理"，即让元素不存在于render tree中
• 不要经常访问会引起浏览器flush队列的属性，实在要就先读取到变量中进行缓存，以后用的时候直接读取变量就可以了
  a) 使用documentFragment或div等元素进行缓存操作，这个主要用于添加元素的时候，大家应该都用过，就是先把所有要添加到元素添加到1个div(这个div也是新加的)，最后才把这个div append到body中。
  b) 先display:none 隐藏元素，然后对该元素进行所有的操作，最后再显示该元素。因对display:none的元素进行操作不会引起回流、重绘。所以只要操作只会有2次回流（隐藏时一次 显示时一次）。
• 考虑你的操作会影响到render tree中的多少节点以及影响的方式，影响越多，花费肯定就越多。

// block1是position:absolute 定位的元素，它移动会影响到它父元素下的所有子元素。
// 因为在它移动过程中，所有子元素需要判断block1的z-index是否在自己的上面，
// 如果是在自己的上面,则需要重绘,这里不会引起回流
$("#block1").animate({left:50});
// block2是相对定位的元素,这个影响的元素与block1一样，但是因为block2非绝对定位
// 而且改变的是marginLeft属性，所以这里每次改变不但会影响重绘，
// 还会引起父元素及其下元素的回流
$("#block2").animate({marginLeft:50});