热搜:fiddler git ip ios 代理
历史搜索

CSS面试题之回流(重排)和重绘

游客2024-11-06 12:03:01
目录文章目录
  1. 1、什么是回流(重排)
  2. 2、什么是重绘
  3. 3、区别

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

1、什么是回流(重排)

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

2、什么是重绘

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

3、区别

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

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

标签:CSS