仅使用CSS就可以提高页面渲染速度的4个技巧
全栈修炼
共 3062字,需浏览 7分钟
·
2021-02-02 07:09
本文将重点介绍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 属性
通过will-change 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.减少渲染阻止时间
但是,假设我们根据表单因素将其拆分为多个样式表。在这种情况下,我们可以只让主CSS文件阻塞关键路径,并以高优先级下载它,而让其他样式表以低优先级方式下载。
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles.css" media="all" />
<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
来实现同样的功能,但性能要好得多,因为它允许我们并行加载样式表。总结
content-visibility
,在未来的几年里看起来是如此的有前途,因为它给页面渲染带来了数倍的性能提升。最重要的是,我们不需要写一条JavaScript语句就能获得所有的性能。
来源:https://blog.bitsrc.io/improve-page-rendering-speed-using-only-css-a61667a16b2
作者:Rumesh Eranga Hapuarachchi
笔者的年终总结在这里,希望能带给你一点启发。
评论