Define CSS Portal

什么是 CSS Portal？

CSS Containment 规范中引入的一项功能在 CSS 中称为“portal”（门户）。通过使开发人员能够将特定的页面元素与页面的其余部分隔离，CSS Containment 让他们更好地控制网页渲染速度，因为它限制了所需的布局和渲染计算量。

在 CSS containment 的上下文中，门户是一个容器元素，用作其内容的边界或“墙”。它为包含的元素建立了一个新的格式化和堆叠上下文。在处理复杂或动态变化的内容时，这种隔离有助于渲染优化和性能改进。

当使用 `contain` 属性启用元素上的 containment 时，它们精确地激活门户 containment，其值为 `portal`。通过将此属性应用于容器元素，您可以告诉浏览器容器元素内的内容应作为具有其自己的渲染上下文的独立实体进行处理。

示例

以下是关于如何利用 `contain: portal;` 资产的说明：

`.portal-container` 元素包含 `portal;` 属性，它告诉浏览器为其内容创建门户 containment。当容器内的内容频繁更改或动画化时，这种 containment 可以优化渲染并提高性能。

为什么我们使用 Portal CSS？

在 CSS 中使用门户有几个好处，尤其是结合 `contain: portal;` 属性。

• 性能优化：通过将包含的元素与页面的其余部分分离，门户有助于提高渲染性能。浏览器可以通过创建新的渲染上下文来优化门户内的渲染和布局计算，从而减少对页面其他区域的影响。
• 防止不必要的布局：containment 边界确保当门户内的元素发生更改或动画化时，浏览器只需重新计算该特定门户内的布局，而无需重新计算整个页面。这在处理复杂或动态更改的内容时特别有用，因为它有助于减少额外的布局计算。
• 减少绘制区域：通过将元素封装在门户内，浏览器可以隔离这些元素的渲染，从而可能降低绘制区域的总数并提高渲染速度。这在处理大型、视觉复杂的元素或动画时特别有用。
• 封装和隔离：门户提供了一种隔离和封装特定网页组件的方法，使这些组件能够独立运行。这对于需要保持与页面其余部分样式分离或具有自身布局要求的部件、组件或部分很有帮助。

我们如何使用 CSS Portal

以下是如何在您的 HTML 和 CSS 代码中使用 CSS 门户 containment 的示例：

HTML

CSS

说明

• 如前面的示例所示，我们的门户容器是一个带有类名“portal-container”的 `div` 元素。
• 为了样式化容器元素，我们使用 CSS 属性 `.portal-container`。
• 它们包含一个 `portal;` 属性，该属性在此元素上启用门户 containment。
• 我们添加了一些 CSS 规则以
• 展示容器的样式，例如黑色边框和内边距。
• 使用此代码，浏览器可以通过隔离 `.portal-container` 中的内容来优化门户内的渲染和布局计算。
• 对容器内内容进行的任何更改或动画将对页面的其余部分影响较小，从而可能提高性能。

CSS Portal 的局限性

尽管 CSS 门户有助于封装和提高性能，但重要的是要了解它们的局限性：

• 浏览器支持：截至我 2021 年 9 月的知识截止日期，浏览器对 CSS 门户的支持非常有限。浏览器对门户的部分支持或缺乏支持可能会影响您代码的跨浏览器兼容性。在生产环境中使用 CSS 门户之前，验证当前的浏览器支持至关重要。
• 对性能的影响：虽然门户在某些情况下可以提高性能，但它们可能并非总能提供显着的优势，尤其是对于更简单的网页或组件。为了确定使用门户的好处是否足以证明其实现是合理的，测量和分析您特定用例的性能至关重要。
• 维护和复杂性：向 CSS 代码添加门户会使其更难以维护，尤其是在处理大型项目或团队时。管理 containment 边界并理解它们如何影响布局和渲染可能需要更多工作。此外，使用门户的代码可能需要更新和维护。
• 有限的用例：CSS 门户在处理特定容器内复杂或动态更改的内容时最有用。如果您的网页或组件符合这些规范，使用门户的优势可能才真正显著。在实施门户之前，确定它们是否对您的特定用例是必要的至关重要。