媒介

最近在研讨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…