【前端面试】为什么获取 clientWidth 这类属性，浏览器会重排重绘
2022-02-18 10:36:09
获取 clientWidth 这类属性时，浏览器会重排重绘的原因：
答案：获取 clientWidth、clientHeight、offsetWidth、offsetHeight 这些属性时，浏览器会进行重排重绘，因为这些属性反映的是元素的实时尺寸或位置信息，而这些信息必须在浏览器完成布局和渲染后才能准确获取。
详细解释：
浏览器渲染流程：
浏览器在接收到 HTML、CSS 和 JavaScript 代码后，会按照特定的流程进行渲染。这个流程大致包括解析 HTML、构建 DOM 树、解析 CSS、构建 CSSOM 树、合并 DOM 树和 CSSOM 树形成渲染树、布局（计算每个元素的位置和大小）、绘制（将元素绘制到屏幕上）。
渲染队列与性能优化：
为了提高性能，浏览器会将一些样式更改（如设置元素的宽度、高度、颜色等）放入渲染队列中，而不是立即执行。这样做可以合并多次样式更改，减少重排和重绘的次数。
当渲染队列中的更改积累到一定程度，或者遇到需要立即获取元素尺寸或位置的属性时，浏览器会执行渲染队列中的更改，进行重排和重绘。
clientWidth 等属性的特殊性：
clientWidth、clientHeight、offsetWidth、offsetHeight 这些属性反映的是元素的实时尺寸或位置信息。
当 JavaScript 代码尝试获取这些属性的值时，浏览器必须确保元素的尺寸和位置信息是最新的，因此会立即执行渲染队列中的更改，进行重排和重绘，以获取准确的尺寸或位置信息。
示例分析：
在提供的示例中，当执行 box.style.height='100px' 时，这条更改被放入渲染队列中。
紧接着执行 box.style.width=(box.clientHeight+100)+'px'，由于这里需要获取 box.clientHeight 的值，浏览器必须立即执行渲染队列中的更改，以获取 box 的最新高度。
因此，在这个示例中，浏览器进行了两次重排重绘：一次是设置高度时（虽然被放入渲染队列，但在此处算作一次潜在的重排机会），另一次是获取 clientHeight 时强制执行的。
性能优化建议：
为了减少重排和重绘的次数，建议尽量减少对元素尺寸和位置的直接操作，使用 CSS 类来批量更改样式。
如果需要多次获取元素的尺寸或位置信息，可以考虑将这些信息缓存起来，避免重复获取导致的多次重排重绘。
使用 requestAnimationFrame 或 setTimeout 等方法将样式更改推迟到浏览器空闲时进行，以减少对用户体验的影响。
综上所述，获取 clientWidth 等属性时浏览器会进行重排重绘，是因为这些属性需要最新的元素尺寸和位置信息，而这些信息必须在浏览器完成布局和渲染后才能准确获取。
热门标签
