（38）重构和重绘

 

 解析：我们的HTML元素在加载前会生成一个DOM tree（DOM树），CSS呢会在加载前生成一个Style Rules（样式规则），让我们这两个都生成后会和并在一起然后生成一个Render Tree（渲染树），最后通过渲染树进行渲染展示到页面上。

一、回流

回流（Reflow）：render tree 中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。

重绘：render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会一影响render树重新布局的，比如只是单纯的修改字体颜色等。

它们的区别很大：

回流必将引起重绘，而重绘不一定会引起回流。也就是说重绘不一定是再原有的属性上更改属性值，而是增加了一个新的属性。回流因为需要改变渲染树的内容，所以必定会引起重绘。

当页面布局和几何属性改变时就需要回流，比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变—边距、填充、边框、宽度和高度，内容改变。