浏览器の回流&重绘

上文提到了浏览器渲染界面的时候会经过两个流程，也就是回流和重绘，此文简单概述一下回流和重绘：

回流

回流是指浏览器要重新构建渲染树的过程，通常是因为渲染树的结构发生了改变，就会引发回流

引发回流的几种情况：

• 添加或删除可见的DOM元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
• 页面一开始渲染的时候（这肯定避免不了）
• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的

重绘

重绘不像回流一样要重新构建整颗渲染树，重绘发生的条件一般不涉及结构上的变化，只是一些不影响布局的属性发生了改变，一般是设置节点样式的时候会发生重绘，但是设置节点大小一定会回流的，因为它影响了布局。

总结

回流是重新构建渲染树并进行再次布局以及绘制的过程，工程量很大；重绘是改变节点样式的时候会发生的现象，只是调用了构建渲染树的最后绘制阶段的一些工程，开销不是很庞大

通常来说，回流一定会引起重绘，重绘不一定会回流；这一点可以从浏览器渲染机制中得到答案