浏览器重排与重绘

字数统计: 2k字   |   阅读时长: 7分

浏览器重绘和重排

网页生成过程

  1. html 被 html 解析器解析成 DOM 树
  2. css 被 css 解析器解析成 CSSOM 树
  3. 结合 DOM 树与 CSSOM 树,生成一个渲染树
  4. 生成布局,即将所有渲染树的所有节点进行平面合成
  5. 将布局绘制在屏幕上

图示

渲染

网页在生成的时候,至少会渲染一次,在用户访问的过程中，还会不断重新渲染.
重新渲染需要重复之前的第四步(重新生成布局)+第五步(重新绘制)或者只有第五个步(重新绘制)。

重排比重绘影响大

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

只改变元素外观,不会引起网页重排,但当浏览器重排之后,将会重新绘制重排影响的部分
“重绘”不一定会出现”重排”，”重排”必然会出现”重绘”

重排(reflow)

概念
当 DOM 的变化影响了元素的几何信息(DOM 对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
常见引起重排属性和方法
任何会改变元素几何信息(元素的位置和尺寸大小)的操作，都会触发重排

  1. 添加或者删除可见的 DOM 元素
  2. 元素尺寸改变——边距、填充、边框、宽度和高度
  3. 内容变化，比如用户在 input 框中输入文字
  4. 浏览器窗口尺寸改变——resize 事件发生时
  5. 计算 offsetWidth 和 offsetHeight 属性
  6. 设置 style 属性的值
常见引起重排属性和方法
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 开始对整个渲染树进行重新布局。
  • 局部范围：对渲染树的某部分或某一个渲染对象进行重新布局

全局范围重排：

1
2
3
4
5
6
7
8
9
10
11
12
<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节点上发生r重排时，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

浏览器的渲染队列

1
2
3
4
div.style.left = "10px";
div.style.top = "10px";
div.style.width = "20px";
div.style.height = "20px";

这段代码理论上会触发 4 次重排+重绘，因为每一次都改变了元素的几何属性，实际上最后只触发了一次重排，这都得益于浏览器的渲染队列机制：
当我们修改了元素的几何属性，导致浏览器触发重排或重绘时。它会把该操作放进渲染队列，等到队列中的操作到了一定的数量或者到了一定的时间间隔时，浏览器就会批量执行这些操作。

强制刷新队列

1
2
3
4
5
6
7
8
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 样式请求

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

在开发中,应该谨慎的使用这些 style 请求,注意上下文关系,避免一行代码一个重排,这对性能是个巨大的消耗

重排优化建议

1. 分离读写操作

1
2
3
4
5
6
7
8
div.style.left = "10px";
div.style.top = "10px";
div.style.width = "20px";
div.style.height = "20px";
console.log(div.offsetLeft);
console.log(div.offsetTop);
console.log(div.offsetWidth);
console.log(div.offsetHeight);

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

2. 样式集中改变

建议通过改变 class 或者 csstext 属性集中改变样式

1
2
3
4
5
6
7
8
9
// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top = top + "px";
// good
el.className += " theclassname";
// good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

3. 缓存布局信息

1
2
3
4
5
6
7
8
9
// bad 强制刷新 触发两次重排
div.style.left = div.offsetLeft + 1 + "px";
div.style.top = div.offsetTop + 1 + "px";

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

4. 离线改变 dom

在要多次操作 dom 之前，通过 display 隐藏 dom，当操作完成之后，才将元素的 display 属性为可见，因为不可见的元素不会触发重排和重绘。这样就只会触发 2 次

1
2
3
dom.display = "none";
// 修改 dom 样式
dom.display = "block";

通过使用 DocumentFragment 创建一个 dom 碎片,在它上面批量操作 dom，操作完成之后，再添加到文档中，这样只会触发一次重排。

5. position 属性为 absolute 或 fixed

position 属性为 absolute 或 fixed 的元素，重排开销比较小，不用考虑它对其他元素的影响

6. 优化动画

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

  • 启用 GPPU 加速

    GPU(图像加速器)

GPU 硬件加速是指应用 GPU 的图形性能对浏览器中的一些图形操作交给 GPU 来完成，因为 GPU 是专门为处理图形而设计，所以它在速度和能耗上更有效率。
GPU 加速通常包括以下几个部分：Canvas2D，布局合成, CSS3 转换（transitions），CSS3 3D 变换（transforms），WebGL 和视频(video)。

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

总结

重排也是导致 DOM 脚本执行效率低的关键因素之一，重排与重绘作为大厂经常出现的面试题，并且涉及的性能优化，这是前端必须掌握的基本概念/技能之一(敲黑板!)。
重排会不断触发这是不可避免的，但我们在开发时，应尽量按照文中的建议来组织代码，这种优化，需要平时有意识的去做，一点一滴的去做，希望大家重视一下。

作者：OBKoro1 来源：掘金
链接：https://juejin.im/post/5c15f797f265da61141c7f86

赏

感谢观看

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

前端开发工作者<br>文档copy狂