CSS `Chrome DevTools` `Layers` 面板 `Composite Layer` 边界与性能影响 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众，晚上好！我是今天的讲师，咱们今天来聊聊Chrome DevTools里一个听起来有点玄乎，但其实很有用的面板：Layers。特别是这个面板里的"Composite Layer"边界，以及它们对性能的影响。别担心，我会尽量用大白话，加上一些实际的例子，保证你们听完之后，下次再面对页面卡顿的时候，心里更有底。

一、啥是Composite Layer？为啥要关注它？

想象一下，你要画一幅画，你可以直接在画布上画，也可以先在不同的透明胶片上画好不同的部分，然后把这些胶片叠在一起，最后得到完整的画面。这个“透明胶片”，在浏览器里，就可以理解成一个Composite Layer。

Composite Layer，中文可以翻译成“合成层”，是浏览器渲染页面时使用的一种优化技术。浏览器会把页面分成多个层，然后分别渲染这些层，最后再把它们合成为最终的画面。

那为啥要分层呢？

避免重绘(Repaint)和重排(Reflow/Layout)：这是性能优化的关键。如果页面上某个元素发生变化，浏览器可能需要重新计算整个页面的布局（重排），或者重新绘制整个页面（重绘）。但是，如果把这个元素放在一个独立的层里，那么它的变化就只会影响这个层，而不会影响其他层，从而大大减少了重绘和重排的范围。
硬件加速(Hardware Acceleration)：某些层的合成操作可以利用GPU（图形处理器）进行硬件加速，从而提高渲染性能。

二、Composite Layer边界：谁能成为一个独立的层？

那么，浏览器会把哪些元素放在独立的Composite Layer里呢？这可不是随便乱分的，浏览器有一套规则。一般来说，满足以下条件的元素更容易被提升为Composite Layer：

拥有3D变换(3D Transforms)：比如transform: translate3d(0, 0, 0);或者transform: translateZ(0);。这几乎是最常见的触发方式。
使用了will-change属性：will-change属性可以提前告诉浏览器，这个元素可能会发生变化，浏览器就可以提前为它创建一个层。
使用了video或者canvas元素：这些元素本身就比较复杂，通常会被放在独立的层里。
使用了CSS Filters：比如filter: blur(5px);。
元素拥有opacity小于1：opacity: 0.99;。
元素被其他拥有Composite Layer的元素包含：如果一个元素包含在一个Composite Layer里，那么它也会被提升为Composite Layer。
元素是position: fixed：固定定位的元素通常需要独立绘制，所以会被放在独立的层里。
元素是position: sticky：粘性定位的元素在滚动过程中可能会发生变化，所以也会被放在独立的层里。
使用了backface-visibility: hidden：这个属性可以隐藏元素的背面，通常用于3D变换中。
存在mask属性：遮罩属性可能会导致复杂的渲染，因此会提升到独立层。
在iframe里：每一个iframe就是一个独立的渲染上下文，通常也是一个独立的层。

三、DevTools Layers面板：Composite Layer的照妖镜

Chrome DevTools的Layers面板就是用来查看页面中Composite Layer的。打开DevTools，找到"Layers"面板（如果没有，可以在"More tools"里找到），你就可以看到页面中所有的Composite Layer，以及它们的层叠关系。

这个面板会显示每个层的ID、大小、位置、以及一些其他的属性。最重要的是，它可以告诉你哪些元素被提升为了Composite Layer，以及为什么被提升。

四、Composite Layer的性能影响：水能载舟，亦能覆舟

Composite Layer虽然可以提高渲染性能，但是如果滥用，也会带来负面的影响。

内存占用增加：每个Composite Layer都需要占用一定的内存，如果页面中Composite Layer太多，会导致内存占用过高，从而影响性能。
合成操作开销增加：虽然GPU可以加速合成操作，但是合成操作本身也需要消耗一定的资源。如果页面中Composite Layer太多，会导致合成操作开销过高，从而影响性能。
过度渲染（Overdraw）：如果多个Composite Layer重叠在一起，浏览器需要多次绘制重叠区域，这会导致过度渲染，从而影响性能。

所以，在使用Composite Layer的时候，一定要谨慎，不要为了优化而过度优化。

五、实战演练：代码示例与分析

咱们来看几个实际的例子，通过代码来理解Composite Layer的边界和性能影响。

例子1：简单的3D变换

<!DOCTYPE html>
<html>
<head>
<title>Composite Layer Example</title>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.5s ease-in-out;
}

.box:hover {
  transform: translate3d(50px, 50px, 0);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

在这个例子中，.box元素使用了transform: translate3d(50px, 50px, 0);，因此会被提升为Composite Layer。当鼠标悬停在.box元素上时，它会移动，由于它是独立的层，所以移动过程只会影响这个层，而不会影响整个页面，从而提高了性能。

例子2：will-change属性

<!DOCTYPE html>
<html>
<head>
<title>Composite Layer Example</title>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: opacity 0.5s ease-in-out;
  will-change: opacity; /* 提前告诉浏览器，opacity可能会发生变化 */
}

.box:hover {
  opacity: 0.5;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

在这个例子中，.box元素使用了will-change: opacity;，提前告诉浏览器，opacity可能会发生变化，因此会被提升为Composite Layer。当鼠标悬停在.box元素上时，它的透明度会改变，由于它是独立的层，所以透明度变化只会影响这个层，而不会影响整个页面，从而提高了性能。

例子3：滥用Composite Layer

<!DOCTYPE html>
<html>
<head>
<title>Composite Layer Example</title>
<style>
.container {
  width: 500px;
  height: 500px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 10px;
  transform: translateZ(0); /* 强制提升为Composite Layer */
}
</style>
</head>
<body>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
</body>
</html>

在这个例子中，我们强制把所有的.box元素都提升为Composite Layer。虽然这样做可以避免重绘和重排，但是会导致大量的Composite Layer，从而增加内存占用和合成操作开销，反而可能降低性能。

六、优化建议：Composite Layer的正确打开方式

那么，如何正确地使用Composite Layer来优化性能呢？

只在必要的时候使用：不要为了优化而过度优化，只在需要避免重绘和重排的时候才使用Composite Layer。
尽量减少Composite Layer的数量：尽量把相关的元素放在同一个Composite Layer里，避免创建过多的Composite Layer。
避免过度渲染：尽量减少Composite Layer的重叠，避免过度渲染。
使用will-change属性：如果知道某个元素可能会发生变化，可以使用will-change属性提前告诉浏览器，让浏览器提前为它创建一个层。
使用DevTools Layers面板进行分析：使用DevTools Layers面板可以查看页面中Composite Layer的分布情况，以及它们的性能影响，从而更好地优化性能。

七、常见问题与解答

Q：为什么我的元素使用了transform: translate3d(0, 0, 0);，但是没有被提升为Composite Layer？

A：可能是因为你的元素没有满足其他条件，比如没有设置width和height，或者被其他元素遮挡了。你可以使用DevTools Layers面板来查看具体的原因。
Q：will-change属性有哪些取值？

A：will-change属性有很多取值，常用的有transform、opacity、top、left、width、height等。你可以根据实际情况选择合适的取值。但是要注意，will-change: all;会告诉浏览器，这个元素的所有属性都可能会发生变化，这可能会导致性能问题，所以要尽量避免使用。
Q：Composite Layer和硬件加速有什么关系？

A：某些Composite Layer的合成操作可以利用GPU进行硬件加速，从而提高渲染性能。但是并不是所有的Composite Layer都可以进行硬件加速。

八、总结

Composite Layer是浏览器渲染页面时使用的一种优化技术，可以避免重绘和重排，提高渲染性能。但是如果滥用，也会带来负面的影响。所以，在使用Composite Layer的时候，一定要谨慎，只在必要的时候使用，并且要尽量减少Composite Layer的数量，避免过度渲染。使用DevTools Layers面板可以查看页面中Composite Layer的分布情况，以及它们的性能影响，从而更好地优化性能。

表格总结

特性/属性/技术	优点	缺点	适用场景	注意事项
Composite Layer	避免重绘和重排，提高渲染性能。	内存占用增加，合成操作开销增加，过度渲染。	动画，滚动，复杂的视觉效果。	只在必要的时候使用，尽量减少数量，避免过度渲染，使用DevTools Layers面板进行分析。
`will-change`	提前告诉浏览器元素可能会发生变化，让浏览器提前为它创建一个层。	如果取值不当，可能会导致性能问题。	元素可能会发生变化，并且需要避免重绘和重排。	根据实际情况选择合适的取值，避免使用`will-change: all;`。
硬件加速	提高渲染性能。	并不是所有的Composite Layer都可以进行硬件加速。	渲染复杂度高的场景。	硬件加速依赖于用户的硬件设备，如果用户的硬件设备性能不足，可能会导致性能问题。
`transform`	触发硬件加速，创造新的合成层，优化动画性能。	过度使用可能导致合成层过多，增加 GPU 的负担。	动画效果，特别是需要硬件加速的动画。	避免不必要的 `transform` 使用，特别是在静态元素上。
`opacity`	可以创建新的合成层，优化透明度变化的性能。	降低性能，尤其是在重叠元素很多的情况下。	需要透明度变化的元素，尤其是动画。	避免过度使用 `opacity`，考虑使用其他方法实现类似的效果，比如 `rgba()`。

九、练习题

请使用DevTools Layers面板分析你正在浏览的网页，看看有多少Composite Layer，以及它们的作用是什么？
请修改上面的例子3，减少Composite Layer的数量，同时保持页面的视觉效果不变。

好了，今天的讲座就到这里，希望大家有所收获！谢谢大家！

发表回复 取消回复

发表回复取消回复