发布于 由admin

CSS离屏渲染：`will-change: scroll-position`创建的合成层与显存消耗

CSS 离屏渲染：will-change: scroll-position 创建的合成层与显存消耗

大家好，今天我们要深入探讨一个在 Web 性能优化中经常遇到，但又容易被误解的问题：will-change: scroll-position 如何创建合成层，以及这种合成层对显存消耗的影响。我们将从渲染流程、合成层原理入手，结合实际代码示例，分析 will-change: scroll-position 的作用机制，并讨论如何合理使用它来提升性能，避免潜在的显存问题。

渲染流程：从代码到像素

要理解 will-change: scroll-position 的作用，首先需要了解浏览器的渲染流程。一个网页从 HTML、CSS、JavaScript 代码，最终呈现在用户面前，需要经历以下几个关键步骤：

  1. 解析 HTML 构建 DOM 树 (DOM Tree)：浏览器解析 HTML 代码，构建文档对象模型 (DOM)，这是一个树状结构，代表网页的结构。

  2. 解析 CSS 构建 CSSOM 树 (CSS Object Model Tree)：浏览器解析 CSS 代码，构建 CSS 对象模型，也是一个树状结构，包含网页的样式信息。

  3. 将 DOM 树和 CSSOM 树合并成渲染树 (Render Tree)：浏览器将 DOM 树和 CSSOM 树结合起来，构建渲染树。渲染树只包含需要显示的节点，以及节点的样式信息。display: none 的元素不会出现在渲染树中。

  4. 布局 (Layout/Reflow)：浏览器计算渲染树中每个节点的几何位置和尺寸，也就是确定每个元素在页面上的确切位置。

  5. 绘制 (Paint)：浏览器遍历渲染树，将每个节点绘制到不同的层 (Layer) 中。这些层可以是普通的像素层，也可以是合成层 (Compositing Layer)。

  6. 合成 (Composite)：浏览器将所有的层按照正确的顺序合并成最终的图像，显示在屏幕上。

渲染流程中的关键概念：层 (Layer)

在绘制阶段，浏览器会将渲染树的节点绘制到不同的层中。默认情况下，所有的节点都会绘制到同一个层中。但是，有些节点会被提升为独立的合成层。

合成层 (Compositing Layer)

合成层是独立的缓冲区，拥有自己的纹理 (Texture)，可以由 GPU 进行加速渲染。这意味着对合成层的修改，可以直接在 GPU 中进行合成，而不需要重新绘制整个页面，从而提高渲染性能。

哪些元素会被提升为合成层？

以下是一些常见的会被提升为合成层的元素：

  • <html> 元素（根元素）
  • 拥有 3D 或透视变换 (3D transforms) 的元素，例如 transform: translateZ(0) 或 perspective: 1000px
  • 使用 <video> 和 <canvas> 元素的元素
  • 使用 CSS 滤镜 (CSS filters) 的元素，例如 filter: blur(5px)
  • 在其后代中拥有合成层的元素
  • 拥有 will-change 属性，且该属性指定的值会导致创建新合成层的元素
  • position: fixed 的元素 (某些浏览器)
  • overflow: scroll 的元素（仅当 overflow 属性的值不为 visible 时）
  • backface-visibility: hidden 的元素

will-change 属性：提前告知浏览器优化策略

will-change 属性允许开发者提前告知浏览器，某个元素将会发生哪些变化。浏览器可以根据这些信息，提前进行优化，例如创建新的合成层，分配更多的资源等等。

will-change 属性的值可以是：

  • auto：浏览器自己决定是否优化。这是默认值。
  • scroll-position：暗示元素的内容可能会发生滚动。
  • contents：暗示元素的内容可能会发生变化。
  • transform：暗示元素可能会发生变换 (例如 translate, rotate, scale)。
  • opacity：暗示元素可能会发生透明度变化。
  • top, left, bottom, right：暗示元素的位置可能会发生变化。
  • width, height：暗示元素的尺寸可能会发生变化。
  • will-change: custom-ident：允许指定自定义属性。
  • all：暗示元素的所有属性都可能发生变化。

will-change: scroll-position 的作用

will-change: scroll-position 告诉浏览器，该元素的内容可能会发生滚动。浏览器可能会创建一个新的合成层来处理滚动，从而提高滚动性能。

代码示例 1：没有 will-change: scroll-position

<!DOCTYPE html>
<html>
<head>
<title>No will-change: scroll-position</title>
<style>
.scrollable {
  width: 300px;
  height: 200px;
  overflow: auto;
  border: 1px solid black;
}

.content {
  height: 500px; /* 内容高度大于容器高度，产生滚动条 */
}
</style>
</head>
<body>

<div class="scrollable">
  <div class="content">
    <p>This is scrollable content.  Lots and lots of it.</p>
    <p>This is scrollable content.  Lots and lots of it.</p>
    <p>This is scrollable content.  Lots and lots of it.</p>
    <p>This is scrollable content.  Lots and lots of it.</p>
    <p>This is scrollable content.  Lots and lots of it.</p>
  </div>
</div>

</body>
</html>

在这个例子中，.scrollable 元素拥有 overflow: auto 属性，当内容超出容器高度时，会出现滚动条。但是，我们没有使用 will-change: scroll-position。在这种情况下，浏览器可能会直接在主线程中处理滚动，可能会导致滚动不流畅。

代码示例 2：使用 will-change: scroll-position

<!DOCTYPE html>
<html>
<head>
<title>will-change: scroll-position</title>
<style>
.scrollable {
  width: 300px;
  height: 200px;
  overflow: auto;
  border: 1px solid black;
  will-change: scroll-position; /* 关键所在 */
}

.content {
  height: 500px; /* 内容高度大于容器高度，产生滚动条 */
}
</style>
</head>
<body>

<div class="scrollable">
  <div class="content">
    <p>This is scrollable content.  Lots and lots of it.</p>
    <p>This is scrollable content.  Lots and lots of it.</p>
    <p>This is scrollable content.  Lots and lots of it.</p>
    <p>This is scrollable content.  Lots and lots of it.</p>
    <p>This is scrollable content.  Lots and lots of it.</p>
  </div>
</div>

</body>
</html>

在这个例子中，我们为 .scrollable 元素添加了 will-change: scroll-position 属性。这会告诉浏览器，该元素的内容可能会发生滚动，浏览器可能会创建一个新的合成层来处理滚动。

will-change: scroll-position 的效果

当浏览器为 .scrollable 元素创建了合成层后，滚动操作可以直接在 GPU 中进行合成，而不需要重新绘制整个页面。这可以显著提高滚动性能，尤其是在内容复杂的页面上。

合成层与显存消耗

虽然合成层可以提高渲染性能，但也会带来一些负面影响：

  • 增加显存消耗：每个合成层都需要占用显存来存储其纹理。如果页面上的合成层数量过多，可能会导致显存不足，影响性能。
  • 增加内存消耗：创建合成层会增加内存消耗。
  • 增加渲染复杂度：合成层的管理会增加渲染复杂度。

will-change: scroll-position 对显存的影响

will-change: scroll-position 可能会导致浏览器为滚动容器创建一个新的合成层，从而增加显存消耗。

如何查看合成层？

可以使用 Chrome DevTools 查看页面上的合成层：

  1. 打开 Chrome DevTools (F12)。
  2. 点击 "More tools" -> "Rendering"。
  3. 勾选 "Layer borders"。

这样，你就可以在页面上看到合成层的边框。

如何衡量显存消耗？

可以使用 Chrome DevTools 的 Performance 面板来衡量显存消耗：

  1. 打开 Chrome DevTools (F12)。
  2. 切换到 "Performance" 面板。
  3. 点击 "Record" 按钮，开始录制性能数据。
  4. 操作页面，触发滚动。
  5. 点击 "Stop" 按钮，停止录制。
  6. 在 Performance 面板中，可以查看 "Memory" 部分，了解显存消耗情况。

代码示例 3：显存消耗对比

为了更直观地展示 will-change: scroll-position 对显存的影响，我们可以创建一个包含多个滚动容器的页面，分别测试是否使用 will-change: scroll-position 的情况。

<!DOCTYPE html>
<html>
<head>
<title>Memory Consumption Comparison</title>
<style>
.container {
  display: flex;
  flex-wrap: wrap;
}

.scrollable {
  width: 300px;
  height: 200px;
  overflow: auto;
  border: 1px solid black;
  margin: 10px;
}

.content {
  height: 500px; /* 内容高度大于容器高度，产生滚动条 */
}

/* Option A: No will-change */
/*.scrollable {*/
/*  will-change: scroll-position; !* Uncomment to test with will-change *!*/
/*}*/

/* Option B: With will-change */
.scrollable {
  will-change: scroll-position; /* Uncomment to test with will-change */
}

</style>
</head>
<body>

<div class="container">
  <div class="scrollable">
    <div class="content">
      <p>This is scrollable content.  Lots and lots of it.</p>
      <p>This is scrollable content.  Lots and lots of it.</p>
      <p>This is scrollable content.  Lots and lots of it.</p>
      <p>This is scrollable content.  Lots and lots of it.</p>
      <p>This is scrollable content.  Lots and lots of it.</p>
    </div>
  </div>
  <div class="scrollable">
    <div class="content">
      <p>This is scrollable content.  Lots and lots of it.</p>
      <p>This is scrollable content.  Lots and lots of it.</p>
      <p>This is scrollable content.  Lots and lots of it.</p>
      <p>This is scrollable content.  Lots and lots of it.</p>
      <p>This is scrollable content.  Lots and lots of it.</p>
    </div>
  </div>
  <div class="scrollable">
    <div class="content">
      <p>This is scrollable content.  Lots and lots of it.</p>
      <p>This is scrollable content.  Lots and lots of it.</p>
      <p>This is scrollable content.  Lots and lots of it.</p>
      <p>This is scrollable content.  Lots and lots of it.</p>
      <p>This is scrollable content.  Lots and lots of it.</p>
    </div>
  </div>
</div>

</body>
</html>

在这个例子中，我们创建了三个滚动容器。你可以通过注释/取消注释 CSS 中的 will-change: scroll-position 来切换两种情况，然后使用 Chrome DevTools 的 Performance 面板来比较显存消耗。

测试步骤：

  1. 打开 Chrome DevTools (F12)。
  2. 切换到 "Performance" 面板。
  3. 点击 "Record" 按钮，开始录制性能数据。
  4. 滚动页面上的滚动容器。
  5. 点击 "Stop" 按钮，停止录制。
  6. 在 Performance 面板中，查看 "Memory" 部分，记录显存消耗。
  7. 注释/取消注释 CSS 中的 will-change: scroll-position，重复步骤 3-6。
  8. 比较两种情况下的显存消耗。

测试结果分析：

通常情况下，使用 will-change: scroll-position 会增加显存消耗，因为浏览器会为滚动容器创建一个新的合成层。但是，如果页面上的滚动容器数量较少，或者滚动操作比较频繁，那么使用 will-change: scroll-position 可以提高滚动性能，从而带来更好的用户体验。

如何合理使用 will-change

will-change 属性是一个强大的工具，但如果不合理使用，可能会适得其反。以下是一些建议：

  1. 只在必要时使用 will-change：不要过度使用 will-change，只在确实需要提高性能的元素上使用它。
  2. 指定具体的属性：尽量指定具体的属性，例如 will-change: transform 或 will-change: scroll-position，而不是使用 will-change: all。
  3. 在元素即将发生变化时添加 will-change：不要过早地添加 will-change，最好在元素即将发生变化时再添加它。可以使用 JavaScript 来动态添加 will-change 属性。
  4. 在元素变化完成后移除 will-change：在元素变化完成后，及时移除 will-change 属性，释放资源。
  5. 注意显存消耗：在使用 will-change 时，要注意显存消耗，避免创建过多的合成层。

代码示例 4：动态添加和移除 will-change

<!DOCTYPE html>
<html>
<head>
<title>Dynamic will-change</title>
<style>
.scrollable {
  width: 300px;
  height: 200px;
  overflow: auto;
  border: 1px solid black;
  margin: 10px;
}

.content {
  height: 500px; /* 内容高度大于容器高度，产生滚动条 */
}
</style>
</head>
<body>

<div class="scrollable" id="myScrollable">
  <div class="content">
    <p>This is scrollable content.  Lots and lots of it.</p>
    <p>This is scrollable content.  Lots and lots of it.</p>
    <p>This is scrollable content.  Lots and lots of it.</p>
    <p>This is scrollable content.  Lots and lots of it.</p>
    <p>This is scrollable content.  Lots and lots of it.</p>
  </div>
</div>

<button id="enableWillChange">Enable will-change</button>
<button id="disableWillChange">Disable will-change</button>

<script>
const scrollable = document.getElementById('myScrollable');
const enableButton = document.getElementById('enableWillChange');
const disableButton = document.getElementById('disableWillChange');

enableButton.addEventListener('click', () => {
  scrollable.style.willChange = 'scroll-position';
});

disableButton.addEventListener('click', () => {
  scrollable.style.willChange = 'auto'; // Or an empty string: scrollable.style.willChange = '';
});
</script>

</body>
</html>

在这个例子中，我们使用 JavaScript 来动态添加和移除 will-change: scroll-position 属性。当用户点击 "Enable will-change" 按钮时，会为 .scrollable 元素添加 will-change: scroll-position 属性。当用户点击 "Disable will-change" 按钮时，会移除该属性。

案例研究：大型列表滚动优化

假设我们有一个包含大量数据的列表，需要在页面上滚动显示。如果直接渲染整个列表，可能会导致性能问题，例如滚动卡顿、响应缓慢等等。

优化方案：

  1. 虚拟化列表 (Virtualization)：只渲染当前可见的列表项，而不是渲染整个列表。
  2. 使用 will-change: scroll-position：为列表容器添加 will-change: scroll-position 属性，告诉浏览器该元素的内容可能会发生滚动。
  3. 使用 requestAnimationFrame：使用 requestAnimationFrame 来平滑滚动动画。

代码示例 5：虚拟化列表 + will-change: scroll-position

由于代码量较大，这里只给出关键部分的示例代码。完整的实现可以使用现有的虚拟化列表库，例如 react-window 或 react-virtualized (如果使用 React)。

// 简化版的虚拟化列表示例 (仅展示关键思路)
const listContainer = document.getElementById('listContainer');
const itemHeight = 30;
const totalItems = 1000;
const visibleItems = Math.ceil(listContainer.clientHeight / itemHeight);
let startIndex = 0;

function renderList() {
  listContainer.innerHTML = ''; // Clear the existing content
  for (let i = startIndex; i < startIndex + visibleItems; i++) {
    if (i < totalItems) {
      const listItem = document.createElement('div');
      listItem.className = 'listItem';
      listItem.style.height = `${itemHeight}px`;
      listItem.textContent = `Item ${i + 1}`;
      listContainer.appendChild(listItem);
    }
  }
}

function handleScroll() {
  const newStartIndex = Math.floor(listContainer.scrollTop / itemHeight);
  if (newStartIndex !== startIndex) {
    startIndex = newStartIndex;
    requestAnimationFrame(renderList); // Use requestAnimationFrame for smoother rendering
  }
}

listContainer.addEventListener('scroll', handleScroll);
renderList(); // Initial render

// CSS (Include will-change: scroll-position)
// #listContainer {
//   overflow-y: auto;
//   height: 300px;
//   will-change: scroll-position;
//   position: relative; /*  Needed for absolute positioning within */
// }
//
// .listItem {
//   position: absolute; /*  Absolute positioning for virtualized items */
//   width: 100%;
//   top: calc(var(--index) * 30px); /*  Dynamic top based on index and itemHeight */
// }

在这个例子中，我们使用了虚拟化列表技术，只渲染当前可见的列表项。同时，为列表容器添加了 will-change: scroll-position 属性，并使用 requestAnimationFrame 来平滑滚动动画。

总结与思考

will-change: scroll-position 可以提高滚动性能，但也会增加显存消耗。 在使用时，需要权衡利弊，只在必要时使用，并注意显存消耗。

正确使用 will-change 属性可以有效提升 Web 应用的性能，但是过度使用或者不合理使用，反而可能会导致性能下降。因此，理解其原理，结合实际场景进行分析和测试，才能真正发挥 will-change 的优势。 性能优化是一个持续的过程，需要不断学习和实践。

更多IT精英技术系列讲座，到智猿学院

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注