前端时间被面试官问到了解重绘和重排吗，我说不是很了解，寄... 作为一个初级前端，对这个了解甚少，但是面试好像经常问，还是得了解一下

先看一张图：

这就是浏览器解析HTML的的流程图

个人理解：就是大家常说的重排，或者回流，浏览器首次从renderTree到生成页面排版的这个计算过程叫做，就是发生在这个过程中，而页面后期因为DOM操作等因素改变再次重排布局叫。

个人理解： 浏览器计算好布局排版之后（reflow之后）把排版渲染到页面展现在屏幕上的过程叫，而页面发生改变重新的过程叫做

节点的位置和大小发生改变页面需要重新排版就会发生

实际上也就是大部分DOM操作都会触发重排，比如：

• 改变节点的尺寸（如宽高增加border等）
• 改变节点的位置（如改变外边距、添加定位、浮动等）
• 内容改变（比如文档中文本也是属于节点，变化也会触发reflow）
• 浏览器窗口size发生改变（这里等于body直接变了必定全部reflow）

节点的背景色或者颜色这种不影响布局排版的属性发生改变会触发

浏览器解析渲染的流程是

这就很容易得出一个结论：

由于页面中只的情况比较少，性能消费大部分是在上，所以这里主要讨论

reflow虽然无法避免，但是我们应该在代码中减少reflow次数

上面的代码中理论上修改了三次要触发三次reflow，但是现代浏览器(IE已死不算)都做了优化，连续的操作会进入重排队列，最后一次性重排减少性能消耗。

光看代码没用，我们在Chrome浏览器开发者工具的performance可以看到的次数，执行一下看看结果

点击箭头指的刷新Chrome会刷新页面并开始计算性能， 结束之后看下面的模块看时间大概3000毫秒的时候发生了layout，这就是设置定时器的原因，还有其他很多layout是我装的Chrome插件的原因。

但是如果在DOM操作中夹杂了读取DOM属性的操作，比如：

这里我们再运行一下performance看看

哦豁直接重排三次，页面看起来效果一样为什么差别这么大。

实际上还有一个特性，现代浏览器可以缓存DOM操作最后一次性layout，但是在中间读取DOM属性浏览器会认为必须要重排渲染一下才能获取到最新的属性，所以DOM的读取操作会强制触发同步reflow，而会强制reflow的属性有： 这些

因此，在DOM操作中尽量集中修改样式。

这个简而言之以下三步

1. 使元素脱离文档。
2. 对其应用多重改变。
3. 把元素带回文档中。

而使元素脱离文档可以有以下方法：

1. 隐藏元素，应用修改，重新显示。
2. 使用文档片断（docuement fragment）在当前DOM之外构建一个子树，再把它拷贝回文档。
3. 将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素。或 先将元素从document中删除，完成修改后再把元素放回原来的位置

浏览器从HTML到页面十分消耗性能，而重排（reflow）和重绘（repaint）也十分耗费性能，因此在我们书写代码过程中应该注意尽量减少reflow和repaint带来额性能消耗，当然我们大部分人开发中很少遇到需要考虑这个的因素，因为现代化框架比如Vue的虚拟DOM和Diff算法已经充分考虑并为我们解决了这种问题，但是作为前端人我们也要了解这里的知识以备不时之需。

文中如有描述不对的地方欢迎留言指出，也欢迎大家一起讨论。