使用 content-visibility:属性提高浏览器渲染性能

发布时间:2020-12-15 09:40:42 阅读:63
content-visibility属性在 Chromium 85 中得到支持,该属性可能是影响页面加载性能的最具影响力的新 CSS 属性之一。content-visibility可以使用户代理可以跳过元素的渲染工作,包括布局和绘画,直到需要它为止。

因为跳过了渲染,所以如果大部分内容不在屏幕上,则利用该content-visibility属性可使初始用户加载更快。

它还允许与屏幕上的内容进行更快的交互。

应用于content-visibility: auto分块的内容区域可使初始负载的渲染性能提高 7 倍

浏览器支持

content-visibility: auto依赖于 CSS 包含规范中的原语,虽然content-visibility: auto目前 仅在 Chromium 85 中得到支持(并且被 Firefox 视为 “有价值的原型”),但是大多数现代浏览器都支持该属性。

CSS 属性值

该属性主要目标是通过提供 DOM 子树与页面其余部分的可预测隔离来实现 Web 内容的渲染性能改进。

基本上,开发人员可以告诉浏览器页面的哪些部分被封装为一组内容,从而使浏览器无需考虑子树之外的状态就可以对内容进行推理。知道内容(子树)的哪些位包含隔离的内容意味着浏览器可以为页面渲染做出优化决策。

CSS 包含四种属性值,每种类型都是containCSS 属性的潜在值,可以将它们组合在一起,以空格分隔的值列表:

  • size:元素上的大小限制可确保元素框的布局,而无需检查其后代。这意味着,如果我们仅需要元素的大小,就可以跳过后代的布局。
  • layout:布局限制意味着后代不会影响页面上其他框的外部布局。如果我们要做的只是布置其他方框,这使我们有可能跳过后代的布局。
  • style:样式包含可确保不仅对子元素有影响的属性不会脱离元素(例如,计数器)。如果我们想要的只是在其他元素上计算样式,这使我们有可能跳过后代的样式计算。
  • paint:绘制包含可以确保容纳盒的后代不会显示在其边界之外。没有任何内容可以使元素明显溢出,并且如果元素在屏幕外或以其他方式不可见,则其后代也将不可见。如果元素不在屏幕上,这使我们有可能跳过 paint后代。

使用content-visibility跳过渲染工作

可能很难弄清楚要使用哪个包含值,因为只有在指定了适当的设置后,浏览器优化才能开始。你可以使用这些值来查看最合适的值,或者可以使用另一个 CSS 属性content-visibility来自动应用所需的包含。content-visibility确保开发人员以最小的努力获得最大的浏览器性能提升。

content-visibility属性可以接受多个值,但是auto可以立即提高性能。具体属性值包括:自动获得布局、样式和绘制内容。如果该元素不在屏幕上(并且与用户无关,则相关元素将是在其子树中具有焦点或选择的元素),那么它也会获得size包容性。

简而言之,如果该元素不在屏幕上,则不会渲染其后代。浏览器在不考虑元素任何内容的情况下确定元素的大小,并在此处停止。跳过大多数渲染,例如元素子树的样式和布局。

当元素接近视口时,浏览器不再添加size容器,而是开始绘制和点击测试元素的内容。这使得渲染工作能够及时地被用户看到。

contain-intrinsic-size指定元素的自然大小

为了实现content-visibility的潜在好处,浏览器需要应用大小限制,以确保内容的呈现结果不会以任何方式影响元素的大小。这意味着该元素将布局为好像是空的。如果元素没有在常规块布局中指定的高度,则其高度为 0。

这可能不是理想的,因为滚动条的大小会发生变化,这取决于每个具有非零高度的故事。

值得庆幸的是,CSS 提供了另一个属性,contain-intrinsic-size该属性可以有效地指定元素的自然大小(如果该元素受大小包含影响)。在我们的示例中,我们将其设置1000px为对部分的高度和宽度的估计。

这意味着它将进行布局,就好像它有一个 “内在大小” 尺寸的子对象一样,从而确保未调整大小的 div 仍然占据空间。 contain-intrinsic-size充当占位符大小来代替呈现的内容。

content-visibility: hidden隐藏内容

如果要利用缓存的呈现状态的优点,使内容不呈现在屏幕上而又不呈现它怎么办?输入: content-visibility: hidden

content-visibility: hidden属性为你提供未渲染内容和缓存渲染状态的所有相同优点,与content-visibility: auto屏幕外一样。但是,与之不同auto,它不会自动开始在屏幕上呈现。

这给了你更多的控制权,使你可以隐藏元素的内容并稍后快速取消隐藏它们。

将其与隐藏元素内容的其他常见方式进行比较:

  • display: none:隐藏元素并破坏其呈现状态。这意味着取消隐藏元素与渲染具有相同内容的新元素一样昂贵。
  • visibility: hidden:隐藏元素并保持其呈现状态。这并不能真正从文档中删除该元素,因为它(及其子树)仍占据页面上的几何空间,并且仍然可以单击。它也可以在需要时随时更新渲染状态,即使隐藏也是如此。

content-visibility: hidden在另一方面,在保留元素的呈现状态的同时将其隐藏,因此,如果需要进行任何更改,则仅在再次显示该元素(即,content-visibility: hidden删除属性)时才会发生更改 。


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"使用 content-visibility:属性提高浏览器渲染性能",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560