前端性能优化——回流与重绘

前言

最近在研究virtual dom，接着就研究回顾起回流（reflow）与重绘（repaint）了。

回流与重绘，好像你们都很熟悉的样子，可是要具体来讲说，又说不出什么来。下面我是我稍作的整理：

浏览器渲染流程

在理解这两个概念以前，咱们先来看看浏览器渲染的工做流程。这里以webkit渲染引擎为例

1. 浏览器请求到html文档后，将html解析成dom Tree
2. css被解析成css style rules
3. 解析完成后，将结合dom Tree和style rules构造render tree
4. 浏览器计算render tree中每一个渲染对象的位置和大小，即布局（layout）
5. 最后进行绘制（painting）

回流与重绘

回流（reflow）

当元素的规模尺寸、布局、隐藏等改变，而致使render tree的一部分(或所有)从新构建，即称为回流。每一个页面至少进过一次回流，就在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并从新构造这部分渲染树，完成回流后，浏览器会从新绘制受影响的部分到屏幕中，该过程成为重绘。

重绘（repaint）

当render tree中的一些元素须要更新属性，这些属性只影响元素的外观，风格，而不会影响元素尺寸、布局、隐藏的，好比background-color，就叫重绘。

注意：回流必将引发重绘，而重绘不必定会引发回流。

回流的发生

1. 可见元素尺寸的改变，如width、height、margin、padding等属性改变引发尺寸的变化
2. window resize事件的触发
3. 元素display属性的改变
4. 元素位置的改变
5. 等等

性能优化

回流与重绘很是影响web性能，由于每一次html和css的从新解析而后再构建成render tree，都须要通过大量的计算，这个过程是很耗时间耗性能的。如何减小呢？建议

1. 页面元素适当定高，如img的夹在在文档流中占据的空间从0到彻底加载，会产生频繁的重绘
2. 减小dom的深度，能够减小解析器耗时
3. 尽可能简化css
4. 复杂的动画，可使其元素脱离文档流，使用position:absolute或者position:fixed，以减小对父元素的影响

固然，这里列举的并非所有的方法，若你有更好的建议，也但愿一块儿分享出来

参考文档

https://kb.cnblogs.com/page/1...
https://www.html5rocks.com/zh...