使用CSS提高页面渲染速度

加快页面渲染速度的四个重要步骤


该图片由Arek SochaPixabay上发布

用户喜欢速度快的Web apps,他们希望页面能快速加载并平稳运行。如果滚动鼠标时出现画面延迟,那用户很可能会因此离开你的网站。作为开发人员,你能通过很多方法来提高用户体验,本文将重点介绍加快页面渲染速度的4个CSS技巧。

1.内容可见性

通常情况下,大多数Web apps都带有复杂的UI元素,并且其扩展范围超出了用户在浏览器视图中能看到的范围。在这种情况下,我们可以用 content-visibility 来跳过屏幕外内容的渲染,如果屏幕外有很多内容,这会大大减少页面渲染时间。

这是最新添加的功能之一,也是提高渲染效果最有效的功能之一。虽然 content-visibility 同时接受数个值,但我们可以在一个元素上使用 content-visibility: auto; 来获得性能快速提升。

让我们考虑一下以下包含很多不同信息卡的页面,虽然屏幕显示12张卡比较合适,但列表中却约有375张卡。如你所见,浏览器用了1037毫秒来渲染此页面。


常规HTML页面

下一步,你可以添加 content-visibility 到所有卡。

在此示例中,将 content-visibility
添加到页面后,渲染时间降到150ms,比之前快6倍以上。


具有内容可见性

可以看到,内容可见性超给力,它对缩短页面渲染时间很有用。根据目前我们讨论的内容,你一定也认为它是页面渲染的神器。

内容可见度的限制

但是,有几个方面是内容可见性驾驭不了的,我在这里强调其中两点供你参考。

  • 此功能仍处于试验阶段。
    截止到目前,Firefox(PC和Android版本)、Internet Explorer(我不认为他们计划把这个添加到IE)和Safari(Mac和iOS)都不支持内容可见性。

  • 与滚动条行为有关的问题。
    由于元素最初用0px高度渲染,因此,每当你向下滚动时,这些元素都会进入屏幕、渲染实际内容,并且元素的高度也会相应地更新,这将使滚动条在意料之外运行。

%E6%9C%AA%E5%91%BD%E5%90%8D_%E5%89%AF%E6%9C%AC
具有内容可见性的滚动行为

要解决滚动条问题,可使用另一个名为 contain-intrinsic-size 的CSS属性。它规定元素的自然大小,因此,会用既定的高度代替0px来渲染元素。

.element{
    content-visibility: auto;
    contain-intrinsic-size: 200px;
}

然而,尽管仍在试验阶段,我发现就算有 containt-intrinsic-size ,如果我们把大量带有 content-visibility 的元素设置为 auto ,滚动条还是会有些小问题的。

因此,我的建议是计划布局,将其分解为几个部分,然后针对这些部分使用内容可见性,以实现更好的滚动条行为。

提示:使用 Bit Github )在项目之间共享可重用组件。

Bit使项目之间共享、记录和重用独立组件变得简单 使用Bit可以最大限度让我们重复使用代码、保持设计一致、团队高效协作,加快交付速度并构建可扩展的应用程序。

Bit 支持Node、React Native、React、Vue、Angular等。

%E6%9C%AA%E5%91%BD%E5%90%8D_%E5%89%AF%E6%9C%AC
示例:React在Bit.dev上共享的组件

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。

0_KP2Dz1t5MCjqapBm
不使用 will-change 图片由马克西米利安(Maximilian)提供

|60xauto
will-change 图片由马克西米利安(Maximilian)提供

什么时候不使用will-change

虽然 will-change 旨在提高性能,但如果你使用不当,它就会降低Web app的性能。

  • 使用 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 apps都必须迎合各种形状因素,其中包括PC、平板电脑和移动电话等。要达成这种响应性,我们必须根据媒体尺寸编写新样式。对于页面渲染,只有在

CSS对象模型(CSSOM)准备就绪后,它才能开始渲染阶段。根据你的Web应用程序,你可能会拥有一个较大的样式表以适应所有设备的外形尺寸。

但是,假设我们根据形状因素将其分为多个样式表。在这种情况下,我们只能让主要CSS文件阻止关键路径,并让其优先下载,让其他样式表在此之后进行下载。

<link rel="stylesheet" href="styles.css">


单个 stylesheet

将其分解为多个样式表后:

<!-- 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");


Waterfall with imports

通过使用多个链接而不是 @import ,我们可以实现更好的性能,因为它允许我们并行加载样式表。

结论

除了本文讨论的4个领域以外,我们几乎没有其他方法可以使用CSS来改善网页的性能。作为CSS的最新功能之一, content-visibility, 很有前景,因为它可以通过页面渲染获得多种性能提升。

最重要的是,我们无需编写任何JavaScript语句即可获得所有性能。

我相信通过结合上述的一些功能,你能为终端用户构建性能更好的Web apps。希望本文对你会有所帮助,如果知道任何能提高Web app性能的CSS技巧,欢迎评论,谢谢!

原文作者 Rumesh Eranga Hapuarachchi
原文链接 https://blog.bitsrc.io/improve-page-rendering-speed-using-only-css-a61667a16b2

推荐阅读
作者信息
AgoraTechnicalTeam
TA 暂未填写个人简介
文章
154
相关专栏
本专栏仅用于分享音视频相关的技术文章,与其他开发者和 Agora 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。