浏览器的重排重绘

完整高频题库仓库地址:https://github.com/hzfe/awesome-interview

完整高频题库阅读地址:https://hzfe.github.io/awesome-interview/

相关问题

  • 如何提升页面渲染性能
  • 如何减少页面重排重绘
  • 哪些行为会引起重排/重绘

回答关键点

渲染性能 Layout Paint

浏览器渲染大致分为四个阶段,其中在解析 HTML 后,会依次进入 Layout 和 Paint 阶段。样式或节点的更改,以及对布局信息的访问等,都有可能导致重排和重绘。而重排和重绘的过程在主线程中进行,这意味着不合理的重排重绘会导致渲染卡顿,用户交互滞后等性能问题。

知识点深入

1. 什么是重排重绘

Layout(布局)

指浏览器计算各元素的几何信息,确定元素的大小以及在页面中的位置等信息的过程。

Paint(绘制/栅格化)

指将渲染树中的每个节点转换成屏幕上的实际像素的过程。

浏览器从获取文档、样式、脚本等内容,到最终渲染结果到屏幕上,需要经过如图所示的步骤。而 DOM 或 CSSOM 被修改,会导致浏览器重复执行图中的步骤。重排和重绘,本质上指的就是分别重新触发 Layout 和 Paint 的过程,且重排必定导致重绘。

引起重排/重绘的常见操作

  1. 外观有变化时,会导致重绘。相关的样式属性如 color opacity 等。
  2. 布局结构或节点内容变化时,会导致重排。相关的样式属性如 height float position 等。
  • 盒子尺寸和类型。
  • 定位方案(正常流、浮动和绝对定位)。
  • 文档树中元素之间的关系。
  • 外部信息(如视口大小等)。
3. 获取布局信息时,会导致重排。相关的方法属性如 offsetTop getComputedStyle 等。

2. 如何减少重排重绘

意义

大多数显示器的刷新率是 60FPS(frames per second)。理想情况下,浏览器需要在 1/60 秒内完成渲染阶段并交付一帧。这样用户就会看到一个交互流畅的页面。

在交互阶段,页面更新(一般是通过执行 JavaScript 来触发)通常会触发重排和重绘。为了提升浏览器渲染效率,应当尽可能减少重绘重排,降低浏览器渲染耗费的时间,尽快将内容渲染到屏幕上。

解决方案

  1. 对 DOM 进行批量写入和读取(通过虚拟 DOM 或者 DocumentFragment 实现)。
  2. 避免对样式频繁操作,了解常用样式属性触发 Layout / Paint / Composite 的机制,合理使用样式。
  3. 合理利用特殊样式属性(如 transform: translateZ(0) 或者 will-change),将渲染层提升为合成层,开启 GPU 加速,提高页面性能。
  4. 按需缓存布局信息,避免频繁读取。

另外,可以借助 DevTools Performance 面板来查看产生重排重绘任务占用主线程的情况和调用代码。

参考资料

1. [渲染树构建、布局及绘制](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn)

2. [避免大型、复杂的布局和布局抖动](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing)

3. [CSS 属性触发布局、绘制及合成的数据](https://csstriggers.com/)

4. [What forces layout / reflow](https://gist.github.com/paulirish/5d52fb081b3570c81e3a)

你可能感兴趣的:(浏览器的重排重绘)