CSS面试题之回流（重排）和重绘

CSS 面试题经常被问到的，所以“温故而知新”，这里做个总结。

1、什么是回流（重排）

当 render tree 中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流（reflow）。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建 render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。

2、什么是重绘

当 render tree 中的一些元素需要更新属性，而这些属性只会影响元素的外观、风格，而不会影响布局的，比如 background-color。则就叫称为重绘（Repaint）。

3、区别

回流必将引起重绘，而重绘不一定会引起回流，比如：只有颜色改变的时候就只会发生重绘而不会引起回流。

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

以上关于CSS面试题之回流（重排）和重绘的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。