复习前端：浏览器渲染机制

2023 年大年初五，继续复习浏览器渲染机制，浏览器会阻止网页的某些呈现，直到首先加载某些资源，同时异步加载其他资源。

浏览器的渲染流程？

大致流程如下：

1. 处理 HTML 并构建 DOM 树。

2. 处理 CSS 构建 CSSOM 树。

3. 将 DOM 与 CSSOM 合并成一个渲染树。

4. 根据渲染树来布局，计算每个节点的位置。

5. 调用 GPU 绘制，合成图层，显示在屏幕上。

在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢。

DOM 树

CSSOM 树

渲染树

如何根据浏览器渲染机制加快首屏速度

• 优化文件大小：HTML 和 CSS 的加载和解析会阻塞渲染树的生成，影响首屏显示速度。因此，可以通过优化文件大小，减少 CSS 文件层级来加快首屏速度。

• 避免资源下载阻塞文档解析：当浏览器解析到 <script> 标签时，会阻塞文档解析，直到脚本执行完毕，所以通常将 <script> 标签放在 HTML 文档的最下面，或者加上 defer、async 进行异步下载

什么是 reflow（重排），什么情况下会触发 reflow

reflow 通常是指 HTML 的重排或者回流。

• 当元素的大小或位置发生变化时，需要重新计算渲染树，这就是 reflow
  

• 当 DOM 元素的几何属性（width、height、padding、margin、border ）改变时触发 reflow

• DOM 元素移动或增加触发 reflow
  

• 读写属性时触发 reflow ，例如：offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight
  

• 调用 window.getComputedStyle 会触发 reflow
  

什么是 repaint（重绘），什么情况下会触发 repaint（重绘）

当 DOM 样式发生变化但不影响 DOM 的几何形状时，将触发重绘，但不会触发reflow （回流）。重绘在性能上优于回流，因为不需要更新 DOM 位置信息，省略了布局过程。

什么是 GPU 加速，如何使用 GPU 加速，GPU 加速的缺点

• 优点：使用 transform、opacity、filters 等属性时，会直接在 GPU 中完成处理，改变这些属性不会造成回流和重绘

• 缺点：GPU 渲染字体会造成字体模糊，而且太多了 GPU 处理可能会导致内存问题

如何减少回流

• 使用 translate 替代 top
  

• 使用 class 代替 style，减少 style 的使用

• 和使用时的防抖和节流 resize，scroll 这两个都会直接导致回流

• 使用 visibility 替换 display:none ，因为前者只会导致重绘，后者会导致回流

• 批量修改元素时，可以先将元素从文档流中移除，修改完成后再放入文档流中。

• 为了避免触发同步布局事件，在获取 offsetWidth 等属性的值时，可以使用变量来存储查询结果，避免多次查询。每次查询诸如 offset、scroll、client 之类的属性时，都会触发回流

• 对于复杂的动画效果，使用绝对定位让它们远离文档流。复杂的动画效果会频繁触发重排和重绘。可以设置动画元素的绝对定位，使其与文档流分离，避免重复回流和重绘。