【前端优化】重排(reflow)和重绘(reapint)

最新推荐文章于 2022-09-17 12:24:01 发布

Sco_Jing1031

最新推荐文章于 2022-09-17 12:24:01 发布

阅读量711

点赞数 4

分类专栏： HTML+CSS 文章标签： javascript html reflow repaint 前端

本文链接：https://blog.csdn.net/m0_47109503/article/details/121806093

版权

HTML+CSS 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

本文深入探讨了浏览器渲染过程中的重排(reflow)与重绘(repaint)概念，强调了两者对性能的影响。文章详细列举了触发重排的常见属性和方法，说明了重排的范围及其优化策略，如减少重排范围和次数。同时，介绍了重绘的概念，以及如何通过浏览器渲染队列来优化渲染性能。此外，提供了实用的优化建议，如分离读写操作、样式集中改变、离线改变DOM等，以提升网页加载和交互速度。

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

欢迎学习交流！！！
持续更新中…

页面生成过程

在这里插入图片描述

HTML 被 HTML 解析器解析成 DOM 树；
CSS 被 CSS 解析器解析成 CSSOM 树；
结合 DOM 树和 CSSOM 树，生成一棵渲染树(Render Tree)，这一过程称为 Attachment；
生成布局(flow)，浏览器在屏幕上“画”出渲染树中的所有节点；
将布局绘制(paint)在屏幕上，显示出整个页面。

第四步和第五步是最耗时的部分，两步合起来，即通常所说的渲染。

渲染

网页生成的时候，至少会渲染一次。
在用户访问的过程中，还会不断重新渲染
重新渲染需要重复之前的第四步(重新生成布局)+第五步(重新绘制)或者只有第五个步(重新绘制)。
重新渲染即触发重排和重绘，不管页面发生了重排还是重绘，都会影响性能，尤其是重排会使我们付出高额的性能代价，所以应该尽量避免重排

重排与重绘的比较

重排比重绘大：“大”，即谁能影响谁。

重绘：某些元素的外观被改变，例如：元素的填充颜色
重排：重新生成布局，重新排列元素。

单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分。比如改变元素高度，这个元素乃至周边dom都需要重新绘制。

即：“重绘"不一定会出现"重排”，“重排"必然会出现"重绘”

重排(reflow)

重排：当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。

重排也叫回流，简单的说就是重新生成布局，重新排列元素。

回流就好比向河里(文档流)扔了一块石头(dom变化)，激起涟漪，然后引起周边水流受到波及，所以叫做回流

常见引起重排的属性和方法

任何会改变元素几何信息(元素的位置和尺寸大小)的操作，都会触发重排。

页面初始渲染，这是开销最大的一次重排
添加/删除可见的DOM元素
改变元素位置
改变元素尺寸，比如边距、填充、边框、宽度和高度等
改变元素内容，比如文字数量，图片大小等
改变元素字体大小
改变浏览器窗口尺寸，比如resize事件发生时
激活CSS伪类（例如：:hover）
设置 style 属性的值，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow
查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等，除此之外，当调用 getComputedStyle方法，或者IE里的 currentStyle 时，也会触发重排，原理是一样的，都为求一个“即时性”和“准确性”。

常见引起重排的属性和方法
width	height	margin	padding
display	border	position	overflow
clientWidth	clientHeight	clientTop	clientLeft
offsetWidth	offsetHeight	offsetTop	offsetLeft
scrollWidth	scrollHeight	scrollTop	scrollLeft
scrollIntoView()	scrollTo()	getComputedStyle()
getBoundingClientRect()	scrollIntoViewIfNeeded()

重排影响的范围

由于浏览器渲染界面是基于流失布局模型的，所以触发重排时会对周围DOM重新排列，影响的范围有两种：

全局范围：从根节点html开始对整个渲染树进行重新布局。
局部范围：对渲染树的某部分或某一个渲染对象进行重新布局

全局范围重排：

<body>
  <div class="hello">
    <h4>hello</h4>
    <p><strong>Name:</strong>BDing</p>
    <h5>male</h5>
    <ol>
      <li>coding</li>
      <li>loving</li>
    </ol>
  </div>
</body>

当p节点上发生reflow重排时，hello和body也会重新渲染，甚至h5和ol都会收到影响。

局部范围重排：

用局部布局来解释这种现象：把一个dom的宽高之类的几何信息定死，然后在dom内部触发重排，就只会重新渲染该dom内部的元素，而不会影响到外界。

尽可能减少重排次数和范围

重排需要更新渲染树,性能花销非常大；
重排的代价十分高昂，会破坏用户体验，并且让UI展示非常迟缓，因此需要尽可能的减少触发重排的次数。
重排的性能花销和渲染树有多少节点需要重新构建有关系
因此应该尽量以局部布局的形式组织html结构，尽可能小的影响重排的范围。
而不是像全局范围的示例代码一样一块的堆砌标签，随便一个元素触发重排都会导致全局范围的重排。

重绘(repaint)

重绘：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。

常见引起重绘的属性和方法
color	border-style	visibility	background
text-decoration	background-image	background-position	background-repeat
outline-color	outline	outline-style	border-radius
outline-width	box-shadow	background-size

浏览器的渲染队列

问：下列代码会触发几次渲染？

div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';

根据上文的定义，这段代码理论上会触发4次重排+重绘，因为每一次都改变了元素的几何属性，实际上最后只触发了一次重排，这都得益于浏览器的渲染队列机制；

当修改了元素的几何属性时，导致浏览器触发重排或重绘。它会把该操作放进渲染队列，等到队列中的操作到了一定的数量或者到了一定的时间间隔时，浏览器就会批量执行这些操作。

强制刷新队列

div.style.left = '10px';
console.log(div.offsetLeft);
div.style.top = '10px';
console.log(div.offsetTop);
div.style.width = '20px';
console.log(div.offsetWidth);
div.style.height = '20px';
console.log(div.offsetHeight);

此段代码会触发4次重排+重绘，因为在console中请求的这几个样式信息，无论何时浏览器都会立即执行渲染队列的任务，即使该值与操作中修改的值无关联。

因为在队列中，可能会有影响到这些值的操作，为了给我们最精确的值，浏览器会立即重排+重绘。

强制刷新队列的style样式请求

offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop, scrollLeft, scrollWidth, scrollHeight
clientTop, clientLeft, clientWidth, clientHeight
getComputedStyle(), 或者 IE的 currentStyle

在开发中，应谨慎使用以上style请求，注意上下文关系，避免一行代码一个重排，减少性能的消耗。

重排优化建议

减少重排范围

应尽量以局部布局的形式组织html结构，尽可能小的影响重排的范围。

尽可能在低层级的DOM节点上，而不是像上述全局范围的示例代码一样，如果你要改变p的样式，class就不要加在div上，通过父元素去影响子元素不好。
尽量不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局。那么在不得已使用table的场合，可以设置table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。

减少重排次数

1. 分离读写操作

DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。

// bad 强制刷新 触发四次重排+重绘
div.style.left = div.offsetLeft + 1 + 'px';
div.style.top = div.offsetTop + 1 + 'px';
div.style.right = div.offsetRight + 1 + 'px';
div.style.bottom = div.offsetBottom + 1 + 'px';


// better 缓存布局信息 相当于读写分离 触发一次重排+重绘
var curLeft = div.offsetLeft;
var curTop = div.offsetTop;
var curRight = div.offsetRight;
var curBottom = div.offsetBottom;

div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';
div.style.right = curRight + 1 + 'px';
div.style.bottom = curBottom + 1 + 'px';

前文中触发4次重排+重绘的代码，这次只触发了一次重排，得益于前文中所提到的浏览器的渲染队列机制。

在第一个console的时候，浏览器把之前上面四个写操作的渲染队列都给清空了。剩下的console，因为渲染队列本来就是空的，所以并没有触发重排，仅仅拿值。

2. 样式集中改变

不建议示范：
div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';

不要频繁的操作样式，对于一个静态页面来说，明智且可维护的做法是更改类名而不是修改样式，对于动态改变的样式来说，相较每次微小修改都直接触及元素，更好的办法是统一在 cssText 变量中编辑。

虽然现在大部分现代浏览器都会有 Flush 队列进行渲染队列优化，但是有些老版本的浏览器比如IE6的效率依然低下。

// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top = top + "px";

// 当top和left的值是动态计算而成时...
// better 
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

// better
el.className += " className";

3. 离线改变DOM

“离线”意味着不在当前的 DOM 树中做修改：

使用display:none，隐藏要操作的dom

dom.display = 'none'
// 修改dom样式
dom.display = 'block'

一旦给元素设置 display:none 时（只有一次重排重绘），元素便不会再存在在渲染树中，相当于将其从页面上“拿掉”，我们之后的操作将不会触发重排和重绘，添加足够多的变更后，通过 display属性显示（另一次重排重绘）。通过这种方式即使大量变更也只触发两次重排。另外，visibility : hidden 的元素只对重绘有影响，不影响重排。

通过 documentFragment 创建一个 dom 碎片,在它上面批量操作 dom，操作完成之后，再添加到文档中，这样只会触发一次重排。
复制节点，在副本上工作，然后替换它

4. 缓存布局信息

// bad 强制刷新 触发两次重排
div.style.left = div.offsetLeft + 1 + 'px';
div.style.top = div.offsetTop + 1 + 'px';

// better 缓存布局信息 相当于读写分离
var curLeft = div.offsetLeft;
var curTop = div.offsetTop;
div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';

5. 使用 absolute 或 fixed 脱离文档流

position属性为absolute或fixed的元素，使用绝对定位会使的该元素单独成为渲染树中 body 的一个子元素，重排开销比较小，不会对其它节点造成太多影响。当在这些节点上放置这个元素时，一些其它在这个区域内的节点可能需要重绘，但是不需要重排。

6. 优化动画

可以把动画效果应用到 position属性为 absolute 或 fixed 的元素上，这样对其他元素影响较小。

动画效果还应牺牲一些平滑，来换取速度，中间的度需要自己衡量：

比如实现一个动画，以1个像素为单位移动这样最平滑，但是reflow就会过于频繁，大量消耗CPU资源，如果以3个像素为单位移动则会好很多

启用GPU加速

GPU 硬件加速是指应用 GPU 的图形性能对浏览器中的一些图形操作交给 GPU 来完成，因为 GPU 是专门为处理图形而设计，所以它在速度和能耗上更有效率。

GPU 加速通常包括以下几个部分：Canvas2D，布局合成，CSS3转换（transitions），CSS3 3D变换（transforms），WebGL和视频(video)。

  /*
  * 根据上面的结论
  * 将 2d transform 换成 3d
  * 就可以强制开启 GPU 加速
  * 提高动画性能
  */
  div {
    transform: translate3d(10px, 10px, 0);
  }

优秀文章：
浏览器重绘(repaint)重排(reflow)与优化[浏览器机制]
CSS硬件加速的好与坏

Sco_Jing1031

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
【前端优化】重排(reflow)和重绘(reapint)

在页面的生命周期中，一些效果的交互都有可能发生重排（Layout）和重绘（Painting），这些都会使我们付出高额的性能代价。浏览器从下载文件至本地到显示页面是个复杂的过程，这里包含了重绘和重排，二者也是最耗时的部分，一旦触发重排，我们对DOM的修改引发了DOM几何元素的变化，渲染树需要重新计算，使浏览器需要根据新的属性进行绘制。更比而言，重排会产生比重绘更大的开销。所以，我们在实际生产中要严格注意减少重排的触发。
复制链接

扫一扫

专栏目录