CSS `Occlusion Culling` (遮挡剔除) 在 CSS 渲染中的潜在应用 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位前端的观众老爷们，晚上好！我是今天的主讲人，咱们今天聊点儿新鲜的——CSS 里的“遮挡剔除”（Occlusion Culling）。这玩意儿听起来是不是像游戏引擎里的黑科技？没错，我们的目标就是把它“借鉴”过来，给 CSS 渲染性能狠狠地提个速！

一、啥是遮挡剔除？（别怕，不搞高数）

遮挡剔除，简单来说，就是让浏览器别费劲渲染那些看不见的东西。想象一下，你站在一栋大楼面前，后面的风景都被挡住了。如果让你画这栋楼，肯定不会傻乎乎地把后面的风景也画出来吧？浏览器也一样，如果一个元素完全被其他元素遮挡，那渲染它就是白费力气。

这个概念在游戏开发里应用广泛，比如渲染一个复杂的城市，如果所有建筑都渲染，显卡早晚得冒烟。遮挡剔除就能智能地判断哪些建筑是玩家看不见的，然后直接跳过，省下大量的渲染资源。

二、CSS 渲染的“痛点”（性能瓶颈在哪儿？）

CSS 渲染的过程大致是这样的：

解析 CSS： 浏览器解析 CSS 代码，构建 CSSOM（CSS 对象模型）。
构建渲染树： 结合 DOM（文档对象模型）和 CSSOM，构建渲染树（Render Tree），只包含需要渲染的可见元素。
布局（Layout）： 计算每个元素的大小、位置等几何信息。
绘制（Paint）： 将渲染树上的节点绘制到屏幕上。

性能瓶颈主要集中在布局和绘制两个阶段。

布局（Layout）： 复杂的 CSS 样式会导致频繁的重排（Reflow）和重绘（Repaint）。例如，修改一个元素的尺寸，可能会影响到其他元素的布局，从而触发整个页面的重新计算。
绘制（Paint）： 如果页面元素过多，或者存在大量的透明度、阴影、模糊等效果，绘制过程会消耗大量的 GPU 资源。

而遮挡剔除，理论上可以减少需要布局和绘制的元素数量，从而提升渲染性能。

三、CSS 遮挡剔除的可能性（理论可行性分析）

虽然 CSS 本身没有直接提供遮挡剔除的 API，但我们可以通过一些技巧来实现类似的效果。

content-visibility: auto;（实验性特性）

这个 CSS 属性允许浏览器跳过某些元素的渲染，直到它们进入视口。这有点像懒加载，但它是针对渲染的，而不是针对资源加载的。
```
.hidden-element {
  content-visibility: auto; /* 或者 visible, hidden */
  contain-intrinsic-size: 100px; /* 必须设置，指定高度 */
}
```
content-visibility: auto 表示当元素不在视口内时，浏览器可以跳过渲染。contain-intrinsic-size 是一个占位符，告诉浏览器该元素的高度，防止页面跳动。

注意： content-visibility 属性目前还在实验阶段，兼容性可能不太好。

Intersection Observer API（浏览器原生 API）

这个 API 可以用来监听元素是否进入视口。我们可以结合这个 API，动态地控制元素的 visibility 或 display 属性，从而实现类似遮挡剔除的效果。

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    } else {
      entry.target.classList.remove('visible');
    }
  });
});

const elements = document.querySelectorAll('.potentially-hidden');
elements.forEach(element => {
  observer.observe(element);
});

.potentially-hidden {
  visibility: hidden; /* 初始状态隐藏 */
}

.potentially-hidden.visible {
  visibility: visible; /* 进入视口后显示 */
}

这段代码监听所有 .potentially-hidden 元素的可见性，当元素进入视口时，添加 visible 类，显示元素；当元素离开视口时，移除 visible 类，隐藏元素。

getBoundingClientRect()（DOM API）

这个方法可以获取元素相对于视口的位置和大小。我们可以利用这个方法，判断元素是否被其他元素完全遮挡，如果是，就将其 display 属性设置为 none，从而避免渲染。

function isElementOccluded(element) {
  const rect = element.getBoundingClientRect();
  const elementsUnderneath = document.elementsFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2);

  // 从下往上遍历，找到第一个不透明的元素
  for (let i = 0; i < elementsUnderneath.length; i++) {
    const elementUnderneath = elementsUnderneath[i];
    const style = window.getComputedStyle(elementUnderneath);

    // 排除自身
    if (elementUnderneath === element) continue;

    // 如果找到一个不透明的元素，并且在element之上，则表示element被遮挡
    if (style.opacity === '1' && elementUnderneath.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING) {
        return true;
    }
  }

  return false;
}

function occludeElements() {
  const elements = document.querySelectorAll('.occludable');
  elements.forEach(element => {
    if (isElementOccluded(element)) {
      element.style.display = 'none';
    } else {
      element.style.display = ''; // 恢复默认值
    }
  });
}

// 定期检查遮挡情况
setInterval(occludeElements, 100); // 每 100 毫秒检查一次

这段代码定义了一个 isElementOccluded 函数，用于判断一个元素是否被其他元素遮挡。 occludeElements 函数遍历所有 .occludable 元素，如果元素被遮挡，就将其 display 属性设置为 none。

注意： document.elementsFromPoint 方法会返回指定坐标下的所有元素（从上到下），所以我们需要从下往上遍历，找到第一个不透明的元素。 compareDocumentPosition 用于判断两个节点在文档中的位置关系。

四、代码示例：一个简单的遮挡剔除场景

假设我们有一个简单的场景，一个大的 <div> 元素作为背景，上面覆盖着一些小的 <div> 元素。

<!DOCTYPE html>
<html>
<head>
  <title>CSS Occlusion Culling Demo</title>
  <style>
    .background {
      width: 500px;
      height: 500px;
      background-color: lightblue;
      position: relative;
    }

    .occludable {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
    }

    .occluder {
      width: 100px;
      height: 100px;
      background-color: green;
      position: absolute;
      z-index: 1; /* 确保遮挡元素在被遮挡元素之上 */
    }
  </style>
</head>
<body>
  <div class="background">
    <div class="occludable" style="left: 100px; top: 100px;"></div>
    <div class="occludable" style="left: 200px; top: 200px;"></div>
    <div class="occludable" style="left: 300px; top: 300px;"></div>
    <div class="occluder" style="left: 150px; top: 150px;"></div>
  </div>

  <script>
    function isElementOccluded(element) {
      const rect = element.getBoundingClientRect();
      const elementsUnderneath = document.elementsFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2);

      // 从下往上遍历，找到第一个不透明的元素
      for (let i = 0; i < elementsUnderneath.length; i++) {
        const elementUnderneath = elementsUnderneath[i];
        const style = window.getComputedStyle(elementUnderneath);

        // 排除自身
        if (elementUnderneath === element) continue;

        // 如果找到一个不透明的元素，并且在element之上，则表示element被遮挡
        if (style.opacity === '1' && elementUnderneath.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING) {
            return true;
        }
      }

      return false;
    }

    function occludeElements() {
      const elements = document.querySelectorAll('.occludable');
      elements.forEach(element => {
        if (isElementOccluded(element)) {
          element.style.display = 'none';
        } else {
          element.style.display = ''; // 恢复默认值
        }
      });
    }

    // 定期检查遮挡情况
    setInterval(occludeElements, 100); // 每 100 毫秒检查一次
  </script>
</body>
</html>

在这个例子中，绿色的 <div> 元素（.occluder）遮挡了部分红色的 <div> 元素（.occludable）。运行这段代码，你会发现被绿色元素完全遮挡的红色元素会被隐藏。

五、性能测试（是骡子是马，拉出来溜溜）

为了验证遮挡剔除的效果，我们可以使用 Chrome DevTools 的 Performance 面板进行性能测试。

打开 Chrome DevTools，切换到 Performance 面板。
点击 Record 按钮，开始录制。
刷新页面，或者执行一些会导致页面重排和重绘的操作。
停止录制，查看性能分析结果。

通过对比启用遮挡剔除和禁用遮挡剔除的性能数据，我们可以评估遮挡剔除对渲染性能的提升效果。

测试指标：

指标	描述
FPS	每秒帧数，越高越好。
CPU 使用率	CPU 占用率，越低越好。
Memory 使用率	内存占用率，越低越好。
Layout 时间	布局（Layout）所花费的时间，越短越好。
Paint 时间	绘制（Paint）所花费的时间，越短越好。

测试方法：

创建两个版本的页面：一个版本启用遮挡剔除，另一个版本禁用遮挡剔除。
使用 Chrome DevTools 的 Performance 面板，分别录制两个版本的页面，并分析性能数据。
对比两个版本的性能数据，评估遮挡剔除对渲染性能的提升效果。

六、优缺点分析（别光听好话，也要知道坑在哪儿）

优点：

提升渲染性能： 减少需要布局和绘制的元素数量，从而降低 CPU 和 GPU 的负载，提升渲染性能。
改善用户体验： 更流畅的动画和滚动效果，更快的页面加载速度。
节省电量： 降低设备的功耗，延长电池续航时间。

缺点：

实现复杂度高： 需要编写复杂的 JavaScript 代码来判断元素是否被遮挡。
可能引入 Bug： 错误的遮挡判断可能会导致元素显示不正确。
性能开销： 判断元素是否被遮挡本身也会消耗一定的性能。
兼容性问题： 某些实现方式可能存在兼容性问题。

七、应用场景（哪些地方可以用？）

复杂的 UI 组件： 例如，大型的表格、树形控件、地图等。
单页应用（SPA）： SPA 通常包含大量的 DOM 元素，更容易出现性能问题。
移动端页面： 移动设备的性能相对较弱，更需要优化渲染性能。
长列表： 配合虚拟滚动使用，可以大幅提升长列表的渲染性能。

八、总结与展望（未来可期！）

CSS 遮挡剔除是一项有潜力的优化技术，可以有效地提升 CSS 渲染性能。虽然目前 CSS 本身没有直接提供遮挡剔除的 API，但我们可以通过一些技巧来实现类似的效果。随着 Web 技术的不断发展，相信未来会有更多更方便的 API 出现，让 CSS 遮挡剔除变得更加简单高效。

总而言之，言而总之，CSS 遮挡剔除这个概念值得我们关注和探索。希望今天的分享能给大家带来一些启发，让大家在开发高性能 Web 应用的道路上更进一步！

感谢各位的观看！下次再见！

发表回复 取消回复

发表回复取消回复