zl程序教程

您现在的位置是:首页 >  前端

当前栏目

CSS中的重绘和重排(回流)是什么?(面试常问)

CSS面试 什么 重排 重绘 常问
2023-09-11 14:19:18 时间

面试中问到的重排和重绘是什么?

其实在我们学习css的时候已经学过重绘和重排是什么,也经常的使用,只是那时候不知道他们会拥有这麽高级的名称。下面我们一起来看看重绘和重排(回流)是啥玩意。我最近找实习工作给问到了,那时候忘记了,后面回到学校查资料简单总结了一下

注意:那些单词要去背背,不然那个题目写的重绘和重排都是英文单词你看不懂就尴尬了

1、重绘(repaint或redraw)

当盒子的位置大小以及其它属性,如:color 、background-color 等都确定下来了,浏览器会根据我们设置对应的样式渲染出来,页面从头开始重绘一遍并且渲染出来。

重绘我们可以这样理解:

重绘是指一个元素发生外观上的改变除非浏览器的行为,浏览器根据元素的新属性重新绘制,使得元素拥有最新的设置的元素,替换之前设置的外观。

1-1触发重绘条件:

改变元素的外观属性,比如:background-color 、color等

2、重排(回流/reflow)

当渲染树中一部分或全部,因为元素的规模尺寸,布局,隐藏等改变需要重新构建,我们就叫回流(重构),每一个页面在加载第一次的时候就会触发一次回流。

2-1触发重排的条件:

页面渲染初始化、添加或删除可见的DOM元素、元素位置改变或者使用动画、元素的尺寸改变[boder、margin等]、读取[height、width、top]等

3、重绘和重排的关系:

重绘不一定触发重排,重排一定触发重绘