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

目录
文章目录隐藏
  1. 1、什么是回流(重排)
  2. 2、什么是重绘
  3. 3、区别

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

1、什么是回流(重排)

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

2、什么是重绘

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

3、区别

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

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » CSS面试题之回流(重排)和重绘

发表回复