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

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

1、什么是回流(重排)

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

2、什么是重绘

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

3、区别

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

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

「点点赞赏,手留余香」

0

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

微信微信 支付宝支付宝

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

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » CSS面试题之回流(重排)和重绘

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们