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

前言

最近在研究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...