哪些操作可以触发浏览器的重排（Reflow）

阅读数:109 评论数:0

分类

html/css/js

正文

浏览器的重排（Reflow）是指浏览器重新计算页面元素的位置和尺寸的过程。重排是一个计算密集型的过程，因为它需要更新渲染树，并且可能导致整个页面或页面的一部分重新绘制。触发重排的操作通常包括：

添加或删除可见的DOM元素： 当你向页面添加或从页面移除元素时，浏览器需要重新计算页面布局。
元素位置或尺寸的变化： 如果你改变了元素的宽度、高度、边距、填充或边框等属性，这会触发重排。
内容变化： 如果一个元素的内容发生变化，尤其是输入框中的文字变化，可能会导致周围元素的位置调整。
页面渲染初始化： 当页面初次渲染时，会发生重排。
CSS样式的变化： 修改元素的样式，尤其是布局相关的样式，会触发重排。
计算或获取某些属性： 访问某些属性或方法时，浏览器需要提供最新的计算值，如 offsetWidth, offsetHeight, scrollTop, scrollLeft, clientTop, clientLeft, getComputedStyle(), 以及 getBoundingClientRect() 等。
窗口或框架尺寸变化： 调整浏览器窗口的大小，或者修改<iframe>的尺寸也会触发重排。
激活CSS伪类： 如:hover（通过用户与页面交互时激活）。
设置style属性的值： 直接通过style属性修改样式也会触发重排。

dom.style.height = "auto"; // 将元素的高度设置为自动，即元素的自然高度
const { height } = dom.getBoundingClientRect(); // 获取元素当前的自然高度
dom.style.height = 0; // 将元素的高度设置为0，这将导致元素的高度变化
dom.getBoundingClientRect(); // 触发浏览器的重排(reflow)以确保过渡能够执行
dom.style.height = height + 'px'; // 将元素的高度设置为之前获取的自然高度