FE-Interview
FE-Interview copied to clipboard
说一下什么是重绘重排,哪些操作会造成重绘重排
扫描下方二维码,获取答案以及详细解析,同时可解锁800+道前端面试题。
回流:布局引擎会根据各种样式计算每个盒子在页面上的大小与位置 重绘:当计算好盒模型的位置、大小及其他属性后,浏览器根据每个盒子特性进行绘制
回流这一阶段主要是计算节点的位置和几何信息,那么当页面布局和几何信息发生变化的时候,就需要回流,如下面情况: 添加或删除可见的DOM元素 元素的位置发生变化 元素的尺寸发生变化(包括外边距、内边框、边框大小、高度和宽度等) 内容发生变化,比如文本变化或图片被另一个不同尺寸的图片所替代 页面一开始渲染的时候(这避免不了) 浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的) 还有一些容易被忽略的操作:获取一些特定属性的值 offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 这些属性有一个共性,就是需要通过即时计算得到。因此浏览器为了获取这些值,也会进行回流 除此还包括getComputedStyle方法,原理是一样的
一些其他引起重绘行为: 颜色的修改 文本方向的修改 阴影的修改