JS 浏览器 `Paint` 与 `Composite` 阶段性能分析与优化

各位观众老爷，晚上好！我是今晚的主讲人，很高兴能和大家一起聊聊浏览器渲染流水线中两个非常关键，但也经常被我们忽略的阶段：Paint 和 Composite。

准备好了吗？咱们开车啦！

一、浏览器渲染流水线回顾：从HTML到像素

在深入Paint和Composite之前，咱们先来快速回顾一下浏览器的渲染流水线，或者说，浏览器是如何把我们写的HTML、CSS和JavaScript代码变成屏幕上看到的图像的。

HTML解析 (Parsing): 浏览器拿到HTML后，会把它解析成DOM (Document Object Model) 树。DOM树是HTML文档的结构化表示，就像一棵家谱树，告诉你谁是谁的祖宗，谁是谁的儿子。
CSS解析 (Style): 浏览器解析CSS，生成CSSOM (CSS Object Model) 树。CSSOM树包含了所有CSS规则，用于后续的样式计算。
渲染树构建 (Render Tree): 浏览器将DOM树和CSSOM树结合起来，构建渲染树。渲染树只包含需要显示的节点，以及每个节点的样式信息。注意，display: none的节点不会出现在渲染树中。
布局 (Layout): 浏览器计算渲染树中每个节点的几何属性，比如位置、大小等。这个过程也叫做“回流 (Reflow)”或“重排 (Reflow)”。
绘制 (Paint): 浏览器遍历渲染树，将每个节点绘制到不同的图层。这个过程也叫做“栅格化 (Rasterization)”。
合成 (Composite): 浏览器将多个图层按照正确的顺序合并成最终的图像，显示在屏幕上。

今天，咱们重点聊聊第5和第6步：Paint 和 Composite。

二、Paint：画出你的世界

Paint阶段，顾名思义，就是“绘制”。浏览器会遍历渲染树，把每个节点绘制到一个或多个“绘制记录 (Paint Records)”中。这些绘制记录记录了绘制的顺序和操作，比如绘制矩形、文本、图像等。

2.1 什么是绘制记录？

绘制记录可以理解为一系列的绘画指令，告诉浏览器如何绘制一个元素。例如，一个简单的<div>元素可能包含以下绘制记录：

绘制背景颜色
绘制边框
绘制内容 (文本或子元素)

2.2 图层 (Layers) 的概念

在Paint阶段，并不是所有的元素都会绘制到同一个图层中。浏览器会将一些元素绘制到单独的图层中，以便进行更高效的合成。

哪些元素会创建新的图层呢？

拥有显式的 transform 或 opacity 属性 (除了 none)
拥有 <video>、<canvas> 或 <iframe> 元素
拥有 will-change 属性 (后面细讲)
position: fixed 的元素
z-index 值不为 auto 的定位元素 (relative, absolute, sticky, fixed)
等… (浏览器会根据情况自动创建图层)

为什么要有图层？

想象一下，如果所有的元素都绘制在同一个图层中，那么每次修改一个元素，都需要重新绘制整个页面。有了图层，浏览器只需要重新绘制修改的图层，然后重新合成即可，大大提高了性能。

2.3 Paint 的性能问题

Paint操作本身是比较耗时的，特别是对于复杂的页面。以下是一些可能导致Paint性能问题的因素：

过多的DOM元素： DOM元素越多，需要绘制的节点就越多。
复杂的CSS样式： 复杂的样式，比如阴影、渐变、圆角等，会增加绘制的复杂度。
频繁的重绘 (Repaint)： 当元素的外观发生变化时 (比如修改了背景颜色)，浏览器需要重新绘制该元素。频繁的重绘会导致性能下降。

2.4 Paint 优化技巧

减少DOM元素： 尽量减少不必要的DOM元素，可以使用语义化的HTML结构，避免使用过多的<div>。
简化CSS样式： 避免使用过于复杂的CSS样式，可以使用更简单的样式来实现相同的效果。
避免频繁的重绘： 尽量避免频繁修改元素的外观，可以使用CSS动画或过渡来平滑地改变元素的外观。
- 例子：不要频繁修改行内样式，而是添加/移除 CSS 类。
- 尽可能修改层叠较低的元素。
使用will-change属性： will-change属性可以提前告诉浏览器，元素将要发生什么样的变化，以便浏览器提前做好优化。
- 例如：will-change: transform; 告诉浏览器，该元素将要发生transform变化，浏览器会为该元素创建一个新的图层，并优化transform的性能。
- 注意： 不要滥用will-change属性，因为它会增加内存的消耗。只在需要优化的元素上使用will-change属性。

三、Composite：把拼图拼起来

Composite阶段，就是“合成”。浏览器会将多个图层按照正确的顺序合并成最终的图像，显示在屏幕上。这个过程也叫做“合成 (Compositing)”。

3.1 合成的原理

浏览器会将每个图层绘制到一个或多个“纹理 (Textures)”中。纹理可以理解为一块内存区域，存储了图像数据。然后，浏览器使用GPU (Graphics Processing Unit) 将这些纹理按照一定的顺序和混合模式 (Blending Mode) 合成到一起，最终显示在屏幕上。

3.2 合成的性能问题

Composite操作通常是由GPU完成的，性能比较高。但是，如果合成的图层过多，或者图层之间的混合模式过于复杂，也会导致性能下降。

3.3 Composite 优化技巧

减少图层数量： 尽量减少不必要的图层，可以将一些元素合并到同一个图层中。
使用简单的混合模式： 避免使用过于复杂的混合模式，可以使用更简单的混合模式来实现相同的效果。
利用硬件加速： 确保浏览器启用了硬件加速，可以使用chrome://gpu查看GPU加速状态。

四、Paint 和 Composite 的关系

Paint 和 Composite 是紧密相关的。Paint 负责绘制图层，Composite 负责合成图层。

如果修改了元素的几何属性 (比如位置、大小)，会导致Layout，然后重新Paint和Composite。
如果修改了元素的外观属性 (比如背景颜色)，会导致Paint，然后重新Composite。
如果修改了元素的transform或opacity属性，通常只会导致Composite，而不需要重新Paint。

五、使用 Chrome DevTools 进行性能分析

Chrome DevTools 提供了强大的性能分析工具，可以帮助我们识别Paint 和 Composite 的性能瓶颈。

5.1 Performance 面板

Record： 点击 Record 按钮，开始记录页面性能。
Stop： 点击 Stop 按钮，停止记录。
火焰图 (Flame Chart)： 查看火焰图，可以找到耗时较长的Paint 和 Composite 操作。
Summary： 查看 Summary 面板，可以了解Paint 和 Composite 的耗时占比。
Layers 面板： 查看 Layers 面板，可以了解页面的图层结构。

5.2 Rendering 面板

Paint flashing： 开启 Paint flashing，可以高亮显示每次Paint的区域。
Layer borders： 开启 Layer borders，可以显示图层的边界。
FPS meter： 开启 FPS meter，可以实时显示页面的帧率。
GPU raster： 开启 GPU rasterization，强制使用GPU进行栅格化。

5.3 案例分析

假设我们有一个简单的页面，包含一个移动的方块：

<!DOCTYPE html>
<html>
<head>
  <title>Paint and Composite Demo</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box');
    let x = 0;
    function animate() {
      x += 1;
      box.style.left = x + 'px';
      requestAnimationFrame(animate);
    }
    animate();
  </script>
</body>
</html>

这段代码会导致频繁的Layout、Paint和Composite，因为每次修改box.style.left都会触发回流。

优化方案：

使用transform属性来移动方块：
```
function animate() {
  x += 1;
  box.style.transform = `translateX(${x}px)`;
  requestAnimationFrame(animate);
}
```
使用transform属性只会触发Composite，而不需要重新Layout和Paint，性能大大提升。
添加 will-change: transform; 告诉浏览器，该元素将要发生transform变化，浏览器会为该元素创建一个新的图层，并优化transform的性能。

六、总结：掌握 Paint 和 Composite，提升Web性能

Paint 和 Composite 是浏览器渲染流水线中非常重要的两个阶段。理解这两个阶段的原理和性能问题，可以帮助我们更好地优化Web性能，提升用户体验。

记住以下几点：

减少DOM元素和CSS样式的复杂度。
避免频繁的重绘。
使用transform和opacity属性进行动画。
使用will-change属性提前告知浏览器。
使用Chrome DevTools进行性能分析。

希望今天的分享对大家有所帮助！谢谢大家！

附录：常用优化技巧表格

优化点	优化方法	影响阶段
DOM 结构	减少不必要的DOM元素，使用语义化的HTML结构。	Layout, Paint
CSS 样式	简化CSS样式，避免使用过于复杂的样式。	Paint
重绘/重排	尽量避免频繁修改元素的外观和几何属性，可以使用CSS动画或过渡来平滑地改变元素的外观。尽可能修改层叠较低的元素.	Layout, Paint, Composite
动画	使用`transform`和`opacity`属性进行动画，而不是修改`left`、`top`、`width`、`height`等属性。	Composite
图层	尽量减少不必要的图层，可以将一些元素合并到同一个图层中。	Composite
`will-change`	使用`will-change`属性提前告知浏览器元素将要发生的变化。	Paint, Composite
图片优化	使用合适的图片格式 (WebP)，压缩图片大小，使用`srcset`属性提供不同尺寸的图片。	Paint, Composite (图片解码)
字体优化	使用Web字体时，选择合适的字体格式 (WOFF2)，预加载字体，避免字体闪烁 (FOIT/FOUT)。	Paint
滚动优化	对于滚动容器，可以使用`overflow: auto`或`overflow: scroll`，避免滚动事件触发回流。可以使用`passive`事件监听器来优化滚动性能。	Layout, Paint, Composite
硬件加速	确保浏览器启用了硬件加速，可以使用`chrome://gpu`查看GPU加速状态。	Composite
避免强制同步布局	在JavaScript中，避免强制浏览器进行同步布局 (Forced Synchronous Layout)。例如，在修改元素样式后立即读取元素的几何属性。	Layout
懒加载	对于页面底部的内容，可以使用懒加载 (Lazy Loading)，只在用户滚动到可视区域时才加载内容。	Layout, Paint, Composite

希望这个表格能帮助大家更好地理解和应用优化技巧！祝大家编码愉快！

发表回复 取消回复

发表回复取消回复