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

Posted 永远没有404

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端优化重排(reflow)和重绘(reapint)相关的知识,希望对你有一定的参考价值。

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


页面生成过程

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

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

渲染

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

重排与重绘的比较

重排比重绘大:“大”,即谁能影响谁。

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

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

       即:“重绘"不一定会出现"重排”,“重排"必然会出现"重绘”

重排(reflow)

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

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

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

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

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

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

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

常见引起重绘的属性和方法
colorborder-stylevisibilitybackground
text-decorationbackground-imagebackground-positionbackground-repeat
outline-coloroutlineoutline-styleborder-radius
outline-widthbox-shadowbackground-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属性为absolutefixed的元素,使用绝对定位会使的该元素单独成为渲染树中 body 的一个子元素,重排开销比较小,不会对其它节点造成太多影响。当在这些节点上放置这个元素时,一些其它在这个区域内的节点可能需要重绘,但是不需要重排。

6. 优化动画

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

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

       比如实现一个动画,以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硬件加速的好与坏

以上是关于前端优化重排(reflow)和重绘(reapint)的主要内容,如果未能解决你的问题,请参考以下文章

前端性能优化之重排和重绘

前端性能优化之重排和重绘

前端性能优化之重排和重绘

js中的重绘与重排的区别

React组件性能优化总结

前端性能优化 —— reflow(回流)和repaint(重绘)