浏览器的重绘（repaint）与重排（reflow）

最新推荐文章于 2022-03-19 23:16:54 发布

mr.shen7436

最新推荐文章于 2022-03-19 23:16:54 发布

阅读量407

点赞数

分类专栏：性能优化文章标签：性能优化浏览器 DOM

本文链接：https://blog.csdn.net/shenhaiyang7436/article/details/90957466

版权

性能优化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文探讨了浏览器的重绘（repaint）和重排（reflow）概念，解释了何时会发生这些操作，如DOM变化、浏览器窗口尺寸调整等。重排影响元素几何属性，需要重新构造渲染树，而重绘仅更新视觉表现。这两种操作成本高，应当避免频繁触发。优化策略包括一次性改变样式、批量处理DOM操作和缓存布局信息。

摘要由CSDN通过智能技术生成

浏览器下载完成页面中的所有组件——HTML标记、JavaScript、CSS、图片——之后会解析并生成两个内部数据结构：

DOM树：表示页面结构
渲染树：表示DOM节点如何展示

DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点（隐藏的DOM元素在渲染树中没有对应的节点）。
渲染树的节点被称为“帧”或“盒”，符合CSS模型的定义，理解页面元素为一个具有padding，margins，borders，position的盒子。
一旦DOM树和渲染树构建完成，浏览器就开始显示（绘制“paint”）页面元素。

重排——reflow

当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框宽度或给段落增加文字，导致行数增加——浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为重排。
下述情况会发生重排：

添加或删除可见的DOM元素。
元素位置或尺寸改变。
内容改变，例如文本改变或者图片被不同尺寸的图片替换。
页面渲染器初始化。
浏览器窗口尺寸改变（进度条的出现也算）。

由于每次重排都会产生计算消耗，大多数浏览器通过队列化修改并批量执行来优化重排过程。然而，你可能会强制刷新队列并要求计划任务立刻执行。
获取布局信息的操作会导致队列刷新：

offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop, scrollLeft, scrollWidth, scrollHeight
clientTop, clientLeft, clientWidth, clientHeight
getCoputedStyle() (currentStyle in IE)
以上属性和方法需要返回最新的布局信息，因此浏览器不得不执行渲染队列中的待处理变化并触发重排以返回正确的值。

重绘——repaint

完成重排后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。
并不是所有的DOM变化都会影响几何属性，例如改变元素的背景色并不会影响元素的宽高，这种情况下，只会发生一次重绘而不需要重排。

重绘和重排都是代价昂贵的操作，应尽量减少这类过程的发生！

优化

最小化重绘和重排

一次性改变尽可能多的样式
批量改变DOM

缓存布局信息

例如在动画中，获取一次起始位置的值，然后将其赋值给一个变量，比如 var current = myElement.offsetLeft，然后在动画循环中，直接使用 current 变量而不再查询偏移量。

myElement.style.left = 1 + myElement.style.left + 'px';
if (myElement.style.left >= 500) {
  stopAnimation();
}

// 以下代码更为高效

current++;
myElement.style.left = current + 'px';
if (current >= 500) {
  stopAnimation();
}

让元素脱离动画流