共计 3360 个字符,预计需要花费 9 分钟才能阅读完成。
起源:https://blog.zhangbing.site/2020/12/28/improve-page-rendering-speed-using-only-css/
用户喜爱疾速的网络应用,他们心愿页面加载速度快,性能晦涩。如果在滚动时有破损的动画或滞后,用户很有可能会来到你的网站。作为一名开发者,你能够做很多事件来改善用户体验。本文将重点介绍 4 个能够用来进步页面渲染速度的 CSS 技巧。
1. Content-visibility
一般来说,大多数 Web 利用都有简单的 UI 元素,它的扩大范畴超出了用户在浏览器视图中看到的内容。在这种状况下,咱们能够应用内容可见性(content-visibility
)来跳过屏幕外内容的渲染。如果你有大量的离屏内容,这将大大减少页面渲染工夫。
这个性能是最新减少的性能之一,也是对进步渲染性能影响最大的性能之一。尽管 content-visibility
承受几个值,但咱们能够在元素上应用 content-visibility: auto;
来取得间接的性能晋升。
让咱们考虑一下上面的页面,其中蕴含许多不同信息的卡片。尽管大概有 12 张卡适宜屏幕,但列表中大概有 375 张卡。正如你所看到的,浏览器用了 1037ms 来渲染这个页面。
下一步,您能够向所有卡增加 content-visibility
。
在这个例子中,在页面中退出
content-visibility
后,渲染工夫降落到 150ms,这是 6 倍以上的性能晋升。
正如你所看到的,内容可见性是相当弱小的,对进步页面渲染工夫十分有用。依据咱们目前所探讨的货色,你肯定是把它当成了页面渲染的银弹。
content-visibility 的限度
然而,有几个畛域的内容可视性不佳。我想强调两点,供大家参考。
- 此性能仍处于试验阶段。 截至目前,Firefox(PC 和 Android 版本)、IE(我认为他们没有打算在 IE 中增加这个性能)和,Safari(Mac 和 iOS)不反对内容可见性。
- 与滚动条行为无关的问题。 因为元素的初始渲染高度为 0px,每当你向下滚动时,这些元素就会进入屏幕。理论内容会被渲染,元素的高度也会相应更新。这将使滚动条的行为以一种非预期的形式进行。
为了解决滚动条的问题,你能够应用另一个叫做 contain-intrinsic-size
的 CSS 属性。它指定了一个元素的天然大小,因而,元素将以给定的高度而不是 0px 出现。
.element{
content-visibility: auto;
contain-intrinsic-size: 200px;
}
然而,在试验时,我留神到,即便应用 conta-intrinsic-size
,如果咱们有大量的元素,content-visibility
设置为 auto
,你依然会有较小的滚动条问题。
因而,我的倡议是布局你的布局,将其分解成几个局部,而后在这些局部上应用内容可见性,以取得更好的滚动条行为。
2. Will-change 属性
浏览器上的动画并不是一件新鲜事。通常状况下,这些动画是和其余元素一起定期渲染的。不过,当初浏览器能够应用 GPU 来优化其中的一些动画操作。
通过 will-change CSS 属性,咱们能够表明元素将批改特定的属性,让浏览器当时进行必要的优化。
上面产生的事件是,浏览器将为该元素创立一个独自的层。之后,它将该元素的渲染与其余优化一起委托给 GPU。这将使动画更加晦涩,因为 GPU 减速接管了动画的渲染。
思考以下 CSS 类:
// In stylesheet
.animating-element {will-change: opacity;}
// In HTML
<div class="animating-elememt">
Animating Child elements
</div>
当在浏览器中渲染上述片段时,它将辨认 will-change
属性并优化将来与不透明度相干的变动。
依据 Maximillian Laumeister 所做的性能基准,能够看到他通过这个单行的扭转取得了超过 120FPS 的渲染速度,而最后的渲染速度大略在 50FPS。
什么时候不是用 will-change
尽管 will-change
的目标是为了进步性能,但如果你滥用它,它也会升高 Web 利用的性能。
-
应用
will-change
示意该元素在将来会发生变化。 因而,如果你试图将will-change
和动画同时应用,它将不会给你带来优化。因而,倡议在父元素上应用will-change
,在子元素上应用动画。.my-class{will-change: opacity;} .child-class{transition: opacity 1s ease-in-out;}
- 不要应用非动画元素。 当你在一个元素上应用
will-change
时,浏览器会尝试通过将元素挪动到一个新的图层并将转换工作交给 GPU 来优化它。如果您没有任何要转换的内容,则会导致资源节约。
最初须要留神的是,倡议在实现所有动画后,将元素的 will-change
删除。
3. 缩小渲染阻止工夫
明天,许多 Web 利用必须满足多种形式的需要,包含 PC、平板电脑和手机等。为了实现这种响应式的个性,咱们必须依据媒体尺寸编写新的款式。当波及页面渲染时,它无奈启动渲染阶段,直到 CSS 对象模型(CSSOM)已准备就绪。依据你的 Web 利用,你可能会有一个大的样式表来满足所有设施的模式因素。
然而,假如咱们依据表单因素将其拆分为多个样式表。在这种状况下,咱们能够只让主 CSS 文件阻塞要害门路,并以高优先级下载它,而让其余样式表以低优先级形式下载。
<link rel="stylesheet" href="styles.css">
将其合成为多个样式表后:
<!-- style.css contains only the minimal styles needed for the page rendering -->
<link rel="stylesheet" href="styles.css" media="all" />
<!-- Following stylesheets have only the styles necessary for the form factor -->
<link rel="stylesheet" href="sm.css" media="(min-width: 20em)" />
<link rel="stylesheet" href="md.css" media="(min-width: 64em)" />
<link rel="stylesheet" href="lg.css" media="(min-width: 90em)" />
<link rel="stylesheet" href="ex.css" media="(min-width: 120em)" />
<link rel="stylesheet" href="print.css" media="print" />
如您所见,依据款式因素合成样式表能够缩小渲染阻止工夫。
4. 防止 @import 蕴含多个样式表
通过 @import
,咱们能够在另一个样式表中蕴含一个样式表。当咱们在解决一个大型项目时,应用 @import
能够使代码更加简洁。
对于
@import
的要害事实是,它是一个阻塞调用,因为它必须通过网络申请来获取文件,解析文件,并将其蕴含在样式表中。如果咱们在样式表中嵌套了@import
,就会障碍渲染性能。
# style.css
@import url("windows.css");
# windows.css
@import url("componenets.css");
与应用 @import
相比,咱们能够通过多个 link
来实现同样的性能,但性能要好得多,因为它容许咱们并行加载样式表。
总结
除了咱们在本文中探讨的 4 个方面,咱们还有一些其余的办法能够应用 CSS 来进步网页的性能。CSS 最近的一个个性:content-visibility
,在将来的几年里看起来是如此的有前途,因为它给页面渲染带来了数倍的性能晋升。
最重要的是,咱们不须要写一条 JavaScript 语句就能取得所有的性能。
我置信你能够联合以上的一些性能,为终端用户构建性能更好的 Web 利用。心愿这篇文章对你有用,如果你晓得什么 CSS 技巧能够进步 Web 利用的性能,请在上面的评论中提及。谢谢大家。