通过跳过内容的屏幕外渲染来改善初始加载时间在Chromium85中，content-visibility属性可能是对提高页面加载性能影响最大的新CSS之一特性。因为content-visibility可以跳过不在屏幕上的内容渲染，包括布局和渲染，直到真正需要布局渲染。因此，利用它可以让初始用户更快地加载并更快地与屏幕上的内容进行交互。在上面的演示中，使用content-visibility:auto属性可以将平铺内容区域的初始加载性能提高7倍。阅读下面的更多内容。浏览器对内容可见性的支持依赖于cssContainementSpec中的原语。虽然内容可见性属性目前仅在Chromium85中受支持（并且被认为是Firefox的“值得原型设计”），但大多数现代浏览器都支持ContainmentSpec。CSSContainmentCSSContainment规范的主要目的是通过在页面呈现期间忽略文档中的某些子树来提高页面呈现性能。当容器的内容发生变化时，浏览器认为其他元素也可能发生变化，因此会检查页面上的所有元素。浏览器已经这样做了很长时间，每个人都已经习惯了。但另一方面，开发者非常清楚当前修改的元素是否独立，是否影响其他元素。因此，如果开发者能够通过CSS将这些信息告诉浏览器，浏览器就不需要考虑其他元素了，那就再完美不过了。CSSContainment模块中提供的contain属性为我们提供了这种能力。csscontain有四个属性可以用空格分隔组合，每个属性可以单独使用。size：表示元素框的大小与其内容无关，也就是说计算元素框大小时会忽略其子元素layout：该值表示不影响元素内部布局不受任何外部影响，并且该元素及其内容不会影响上级样式：声明那些同时影响该元素及其后代的属性，都在该元素的范围内paint：声明该元素的后代将不会显示在它的边缘之外。如果一个元素在视图之外或以其他方式不可见，它的后代也保证不会显示。设置content-visibility以跳过渲染通常很难清楚地了解使用哪个contain属性，因为浏览器只有在指定适当的值后才开始优化。您可以使用这些值来验证最有效的方法，或者您可以使用content-visibilityCSS属性来自动应用已使用的容量。内容可见性确保您以开发人员的最低成本获得最大的浏览器性能。content-visibility属性接受多个值，但auto是立即提高性能的那个。具有content-visibility:auto属性的元素可以获得布局、样式和绘制约束（区域）。如果该元素不在屏幕上（并且与用户无关，相关元素将是具有焦点或在其子树中被选中的元素），它还会获得一个大小约束（包含）（并停止绘制和点击其内容测试).这是什么意思？简而言之，如果该元素不在屏幕上，则不会渲染其后代。浏览器决定元素的大小而不考虑元素的任何内容，这里会跳过大部分渲染（例如元素子树的样式和布局）。浏览器不会在元素接近视口时增加大小限制，而是开始绘制和命中测试元素的内容。这样可以让渲染工作及时被用户看到。示例：旅游博客travel_blog.mp4在此示例中，我们将旅游博客的基线设置为右侧，并将content-visibility:auto应用于左侧的分块区域。结果显示，在初始页面加载时，渲染时间从232毫秒变为30毫秒。一般的旅游博客都会包含一些图片和一些描述性的文字故事。当典型的浏览器导航到旅游博客时会发生这种情况：页面的部分内容和任何所需的资源都是根据浏览器的样式和布局从网络上下载的，无论该内容是否对用户的浏览器可见返回到第1步，直到所有页面和资源都已下载在第2步中，浏览器处理所有内容，寻找可能已更改的内容。它更新任何新元素的样式和布局，以及可能因新更新而移动的元素。这是渲染工作。这需要时间。演示：https://codepen.io/una/pen/rNxEWLo现在考虑一下如果您将内容可见性设置为会发生什么：博客上的每个故事都是自动的？它通常是相同的循环：浏览器下载并呈现内容块。但是，不同的是第2步的工作量。有了content-visibility，它会对用户当前可见的所有内容（它们在屏幕的可视区域内）进行样式和布局。然而，当处理完全不在屏幕上的内容时，浏览器会跳过渲染工作，只对元素框本身进行样式设置和布局。加载页面的行为就像它只包含完整的屏幕内容外加每个屏幕外内容的空白框。这看起来好多了，并且可以将加载的渲染成本降低50%或更多。在我们的示例中，我们看到渲染时间从232毫秒缩短到30毫秒，提高了7倍。您需要做哪些工作才能获得这些好处？首先，我们将内容分成几个部分：将内容分块成部分并应用故事类的示例，以接收内容可见性：auto。请参阅Codepen上的演示然后，我们将以下样式规则应用于这些部分：.story{content-visibility:auto;包含固有大小：1000px；/*在下一节中解释。*/}注意：随着内容移入和移出可见性，它将根据需要开始和停止绘制。然而，这并不意味着浏览器将不得不一遍又一遍地渲染和重新渲染相同的内容，因为尽可能保存渲染工作。使用contain-intrinsic-size指定元素的自然大小为了实现内容可见性的潜在好处，浏览器需要应用大小约束以确保内容的呈现不受元素大小的任何影响.这意味着该元素将被布置为就好像它是空的一样。如果元素在常规块布局中没有指定高度，则其高度为0。这可能并不理想，因为滚动条的大小会根据每个具有非零高度的内容而改变。值得庆幸的是，CSS提供了另一个属性contains-intrinsic-size，如果元素受到大小限制，它可以有效地指定元素的自然大小。在我们的示例中，我们将其设置为1000px作为这些部分的高度和宽度的估计值。这意味着它的布局就像它有一个“固有大小”大小的子元素一样，确保未调整大小的div仍然占用空间。contains-intrinsic-size用作占位符大小，而不是呈现的内容。隐藏内容设置content-visibility:hidden如果您想利用缓存绘制状态以使内容不会在未绘制的情况下出现在屏幕上怎么办？使用内容可见性：隐藏。content-visibility:hidden属性为您提供未呈现内容和缓存呈现状态的所有相同好处，因为content-visibility:auto在屏幕外。但是，与auto不同的是，它不会自动开始在屏幕上渲染。这给了你更多的控制权，允许你隐藏元素的内容并在以后快速取消隐藏它们。将此与其他隐藏元素内容的常用方法进行比较：display:none:隐藏元素并破坏其呈现状态。这意味着取消隐藏元素与渲染具有相同内容的新元素一样昂贵。visibility:hidden:隐藏元素并保持渲染。这并没有真正从文档中删除元素，因为它（及其子树）仍然占据页面上的几何空间，并且仍然可以点击。它还可以在需要时更新渲染状态，即使隐藏时也是如此。另一方面，content-visibility:hidden隐藏元素，同时保留其呈现状态，因此如果需要任何更改，它只会在元素再次显示时发生（即content-visibility:hidden属性被删除）。内容可见性的一些好的用例：隐藏：实现高级虚拟滚动条和测量布局。结论：内容可见性和CSS包含规范意味着您的CSS文件将获得一些令人兴奋的性能提升。有关这些属性的更多信息，请参阅：TheCSSContainmentSpecMDNDocsonCSSContainmentCSSWGDraftsarticle/lBECNlBbgd81U01aQUMF?utm_source=related_read&utm_medium=article2，https://www.zcfy.cc/article/css-containment-in-chrome-52-web-updates-google-developers-873.html3，https://developer。mozilla.org/zh-CN/docs/Web/CSS/contain原文翻译地址带视频：[https://www.yuque.com/17biu/sacpix/dvfeii]
