CSS `Paint / Layout / Composite` 性能分析工具 (`Chrome DevTools`) 高级应用 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位老铁，晚上好！我是今晚的性能优化大师——老司机。今晚咱们聊聊 Chrome DevTools 里那个神秘的“Paint / Layout / Composite”性能分析工具，保证让你听完以后，对网页性能优化有更深的理解，下次再遇到卡顿问题，也能轻松搞定！

一、性能分析三剑客：Paint / Layout / Composite 是啥？

咱们先来认识一下这三位主角。想象一下，浏览器渲染网页就像一个流水线，这三位就是流水线上最重要的三个环节：

Layout (布局/重排): 就像设计师在画草图，决定每个元素在页面上的位置和大小。它会计算出页面上每个元素需要占据多少空间，以及它们之间的关系。如果某个元素的位置、大小发生变化，就需要重新 Layout，这个过程很耗性能。
Paint (绘制/重绘): 草图画好了，就要开始上色了！Paint 就是把每个元素用颜色、纹理等绘制到屏幕上。如果元素的样式发生变化（比如颜色、背景），就需要重新 Paint。
Composite (合成): 所有元素都绘制好了，最后一步就是把它们像拼图一样拼在一起，形成最终的页面。这个过程通常由 GPU 完成，性能比较好。

这三者之间的关系是：如果 Layout 发生了，必然会导致 Paint；Paint 发生后，通常会触发 Composite。

二、开启你的性能分析之旅

首先，打开你的 Chrome 浏览器，按下 F12（或者 Ctrl+Shift+I / Cmd+Option+I）打开 DevTools。然后，按照下面的步骤：

选择 "Performance" 面板： 在 DevTools 顶部找到 "Performance"（性能）选项卡，点击进入。
开始录制： 点击左上角的圆形 "Record"（录制）按钮开始录制。
操作页面： 在页面上执行你想要分析的操作，比如滚动、点击按钮、输入文字等等。
停止录制： 操作完成后，点击 "Stop"（停止）按钮结束录制。

DevTools 会生成一份详细的性能报告，其中就包含了 Paint、Layout、Composite 的信息。

三、解读性能报告：找到性能瓶颈

性能报告看起来有点复杂，但别怕，咱们一步一步来。

Flame Chart (火焰图): 这是最重要的部分。它以时间为横轴，展示了各个函数调用的堆栈信息。火焰越高，表示该函数执行的时间越长。
- Layout 区域： 找到标有 "Layout" 的区域，这里显示了所有 Layout 操作的耗时。如果这个区域占比很高，说明你的页面存在大量的重排。
- Paint 区域： 找到标有 "Paint" 的区域，这里显示了所有 Paint 操作的耗时。如果这个区域占比很高，说明你的页面存在大量的重绘。
- Composite 区域： 找到标有 "Composite Layers" 的区域，这里显示了所有合成操作的耗时。通常情况下，Composite 的耗时应该比较低。
Summary (摘要) 面板： 在火焰图下方，有一个 "Summary" 面板，它会告诉你各种操作占总时间的百分比。比如 "Painting" 占了 30%，说明 Paint 操作是性能瓶颈之一。
Bottom-Up (自底向上) / Call Tree (调用树) 面板： 这两个面板可以让你更深入地了解每个函数的调用关系和耗时。

四、实战演练：优化常见的性能问题

接下来，咱们通过几个常见的例子，来看看如何利用 Paint / Layout / Composite 信息来优化页面性能。

案例一：频繁的重排 (Layout Thrashing)

问题描述： 页面滚动时，某个元素的尺寸或位置频繁变化，导致浏览器不断地进行 Layout。
症状： 火焰图中 "Layout" 区域占比很高，滚动时页面卡顿。
代码示例：

<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
  const box = document.getElementById('box');
  window.addEventListener('scroll', () => {
    box.style.width = window.scrollY + 'px'; // 滚动时不断改变宽度
  });
</script>

优化方案：
1. 减少 Layout 的次数： 不要在滚动事件中直接修改元素的尺寸或位置。可以使用 requestAnimationFrame 来合并多次修改。
2. 使用 transform 代替 width 和 height： 修改 transform 属性通常不会触发 Layout，而是直接进行 Composite。

<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
  const box = document.getElementById('box');
  window.addEventListener('scroll', () => {
    requestAnimationFrame(() => {
      box.style.transform = `scale(${window.scrollY / 100})`; // 使用 transform
    });
  });
</script>

案例二：大面积的重绘 (Paint)

问题描述： 修改某个元素的样式，导致整个页面或者大面积区域重新绘制。
症状： 火焰图中 "Paint" 区域占比很高，修改样式后页面卡顿。
代码示例：

<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
  const box = document.getElementById('box');
  setInterval(() => {
    box.style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16); // 每隔一段时间改变背景颜色
  }, 100);
</script>

优化方案：
1. 减少 Paint 的面积： 尽量只修改需要修改的元素，避免影响到其他元素。
2. 使用 will-change 属性： 提前告诉浏览器哪些元素将会发生变化，让浏览器提前做好优化。
3. 使用 opacity 或 transform 代替其他样式： 修改 opacity 或 transform 属性通常不会触发 Paint，而是直接进行 Composite。
4. 图片优化： 确保图片大小合适，格式正确，并且进行了压缩。

<div id="box" style="width: 100px; height: 100px; background-color: red; will-change: background-color;"></div>
<script>
  const box = document.getElementById('box');
  setInterval(() => {
    box.style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  }, 100);
</script>

案例三：复杂的 CSS 选择器

问题描述： 使用复杂的 CSS 选择器，导致浏览器需要花费更多的时间来匹配元素。
症状： 火焰图中 "Recalculate Style" 区域占比很高，页面加载速度慢。
代码示例：

/* 不好的例子 */
body > div#container > ul.list > li:nth-child(odd) > a {
  color: blue;
}

优化方案：
1. 简化 CSS 选择器： 尽量使用简单的 CSS 选择器，避免嵌套过深。
2. 使用 BEM (Block Element Modifier) 命名规范： BEM 可以帮助你更好地组织 CSS 代码，减少 CSS 选择器的复杂度。

/* 好的例子 */
.list-item__link {
  color: blue;
}

案例四：大量的 DOM 操作

问题描述： 频繁地添加、删除、修改 DOM 元素，导致浏览器不断地进行 Layout 和 Paint。
症状： 火焰图中 "Layout" 和 "Paint" 区域占比都很高，页面响应速度慢。
代码示例：

<ul id="list"></ul>
<script>
  const list = document.getElementById('list');
  for (let i = 0; i < 1000; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    list.appendChild(li); // 每次循环都插入一个 DOM 元素
  }
</script>

优化方案：
1. 减少 DOM 操作的次数： 可以使用 DocumentFragment 来批量添加 DOM 元素。
2. 使用虚拟 DOM： 虚拟 DOM 可以减少实际的 DOM 操作次数，提高页面性能。

<ul id="list"></ul>
<script>
  const list = document.getElementById('list');
  const fragment = document.createDocumentFragment(); // 创建 DocumentFragment
  for (let i = 0; i < 1000; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    fragment.appendChild(li); // 将元素添加到 DocumentFragment 中
  }
  list.appendChild(fragment); // 一次性将 DocumentFragment 添加到 DOM 中
</script>

五、进阶技巧：Layers 面板

除了 Performance 面板，DevTools 还有一个 "Layers" 面板，它可以让你更深入地了解页面的分层情况。

什么是 Layers (图层)?

浏览器会将页面分成多个图层，每个图层都包含一些元素。图层可以提高渲染性能，因为浏览器可以独立地渲染每个图层，而不需要重新绘制整个页面。
如何使用 Layers 面板？
1. 打开 DevTools，选择 "Layers" 面板。
2. Layers 面板会显示页面的分层结构。
3. 你可以点击每个图层，查看该图层包含的元素。
Layers 面板的应用：
1. 查找不必要的图层： 如果某个元素没有必要创建新的图层，可以尝试将其合并到其他图层中。
2. 优化图层合成： 可以通过调整元素的 z-index 属性来优化图层合成的顺序。
3. 查看图层的绘制次数： 如果某个图层的绘制次数过多，说明该图层存在性能问题。

六、总结：性能优化永无止境

今天的讲座就到这里了。希望通过今天的学习，你能够更加熟练地使用 Chrome DevTools 的 Paint / Layout / Composite 性能分析工具，找到页面性能的瓶颈，并进行优化。

记住，性能优化是一个持续的过程，需要不断地学习和实践。只有不断地积累经验，才能成为真正的性能优化大师！

一些建议：

优化方向	建议
减少重排	避免频繁修改元素的尺寸和位置，使用 `transform` 代替 `width` 和 `height`，使用 `requestAnimationFrame` 合并多次修改。
减少重绘	尽量只修改需要修改的元素，使用 `will-change` 属性，使用 `opacity` 或 `transform` 代替其他样式，优化图片。
优化 CSS	简化 CSS 选择器，使用 BEM 命名规范。
优化 DOM	减少 DOM 操作的次数，使用 DocumentFragment 批量添加 DOM 元素，使用虚拟 DOM。
优化图层	查找不必要的图层，优化图层合成的顺序，查看图层的绘制次数。
其他优化	减少 HTTP 请求，使用 CDN，启用 Gzip 压缩，使用缓存，优化 JavaScript 代码，使用 Web Workers 进行后台处理。
工具使用技巧	善用 Chrome DevTools 的 Performance 面板和 Layers 面板，定期进行性能测试，及时发现和解决问题。

最后，送大家一句箴言：代码写得好，性能跑得快！

感谢大家的聆听！下次有机会再和大家分享其他性能优化技巧。拜拜！

发表回复 取消回复

发表回复取消回复