【CSS】917- 如何只使用CSS提升页面渲染速度

分手后的思念是犯贱 2022-10-22 04:25 144阅读 0赞

![04bb3ced2a7eece121c70c907d795228.png][]

作者 | Rumesh Eranga Hapuarachchi

译者 | 张健欣

策划 | 田晓旭

来源｜前端之巅

用户喜欢快速的 Web 应用。他们期望页面加载速度快，运行流畅。如果滚动时出现动画中断或延迟，用户很可能就会离开你的网站。作为一名开发者，你可以做很多事情来提升用户体验。本文主要介绍你可以用来提升页面渲染速度的 4 个 CSS 技巧。

1. Content-visibility

一般来说，大部分 Web 应用都有复杂的 UI 元素，并且它的扩展超出了用户在浏览器视图中所能看到的范围。在这种情况下，我们可以使用`content-visibility`来跳过渲染屏幕之外的内容。如果你有大量屏幕之外的内容的话，这会大大减少页面渲染时间。

这个功能是最新添加的功能之一，而且它是提升渲染性能最有影响力的功能之一。`content-visibility`接受几个值，我们可以在一个元素上使用`content-visibility: auto;`来立即获得性能提升。

我们可以看下面这个页面，包含很多显示不同信息的卡片。虽然屏幕能显示大约 12 个卡片，但列表中有差不多 375 个卡片。如你所见，浏览器花费 1037ms 来渲染这个页面。

![7c4a0e708eac96f892951ef8bd9f2dc9.png][]一般 HTML 页面

下一步，你可以向所有的卡片中加入`content-visibility`。

> 在这个例子中，向页面中加入`content-visibility`后，渲染时间下降到 150ms。性能提升了 6 倍以上。

![3eebf4ec2f7894ddc2912bde9c3460ab.png][]使用 content-visibility

如你所见，content-visibility 的功能很强大，对于改善页面渲染时间非常有用。根据我们目前为止讨论的内容，你一定在想它是针对页面渲染的灵丹妙药。

content-visibility 的限制

然而，也有一些领域 content-visibility 不适合。我想强调 2 点供你考虑。

**这个功能还是实验性的。**目前，Firefox（PC 和 Android 版本）、Internet Explorer (我不认为他们计划向 IE 中添加这个功能) 以及 Safari (Mac 和 iOS) 不支持 content-visibility。

**与滚动条行为相关的问题。**由于元素最初渲染的高度是 0px，当你向下滚动时，这些元素会进入屏幕。实际的内容会被渲染，这个元素的高度会被相应地更新。这会使滚动条出现预料之外的行为。

![72c9e077a6d4550a55e2d83285db179c.png][]使用 content-visibility 的滚动行为

为了修复这个滚动条问题，你可以使用另一个 CSS 属性，`contain-intrinsic-size`。它指定了一个元素的自然大小。因此，这个元素会用指定的高度渲染，而不是 0px。

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

然而，在实验时，我发现即使使用`containt-intrinsic-size`，如果我们有很多元素都使用`content-visibility`且设置为`auto`，你仍然会有微小的滚动条问题。因此，我的建议是规划你的布局，将它分解为几个部分，然后在那几个部分上使用 content-visibility 来获取更好的滚动条行为。

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`属性，并优化未来与不透明度 opacity 相关的变更。

> 根据 Maximillian Laumeister 所做的性能基准测试，你可以看到他只改变了一行代码就获得了超过 120FPS 的渲染速度，而最初的渲染速度大约是 50FPS。

![9d391334d21f41e880c87863d5939128.png][]不使用 will-change；图片来源：Maximilian

![1241d29a09ba554501fbc0c40dc51893.png][]使用 will-change；图片来源：Maximilian

什么时候不要用 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 对象模型（CSS Object Model，CSSOM）准备就绪，它才开始渲染阶段。根据你的 Web 应用，你可能有一个很大的样式表来满足所有的设备形式因素。

然而，假设我们根据形式因素将它拆分成多个样式表。在这种情况下，我们可以只让主 CSS 文件阻塞关键路径，并将其优先下载，让其它样式表以低优先级的方式下载。

![ef11d6b5e2688106237d1d2b679e79fe.png][]单个样式表

在将它分解成多个样式表后：

<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" />

![f3372e33d5ce1465e33b586c5ac1256a.png][]

如你所见，根据形式因素拆分样式表能够减少渲染阻塞时间。

4. 避免使用 @import 来包含多个样式表

使用`@import`，我们可以在一个样式表中包含另一个样式表。当我们在处理一个大型项目时，使用`@import`会让代码更简洁。

关于 @import 的一个关键事实是，它是一个阻塞调用，因为它必须发起一个网络请求来获取这个文件，解析它，然后将它包含在样式表中。如果我们在样式表中有嵌套的 @import，它会妨碍渲染性能。

# style.css
    @import url("windows.css");
    # windows.css
    @import url("componenets.css");

![baa8d201e8dea0526cfd6c262c3c23ac.png][]使用 imports 的瀑布图

与其使用`@import`，我们可以使用多个链接 link 实现相同的功能且具有更好的性能，因为它允许并行下载样式表。

![12776a2c9265b60853debb5cad36da9c.png][]使用链接的瀑布图

结论

除了本文我们讨论的 4 个方面，还有一些其它的方法我们可以使用 CSS 来提高 Web 页面的性能。CSS 最新的特性之一，`content-visibility,`在未来几年看起来很有前景，因为它可以在页面渲染方面带来数倍的性能提升。

> 最重要的是，我们不用编写一句 JavaScript 代码就可以获得所有这些性能提升。

我相信，你可以结合以上特性，为最终用户构建性能更好的 Web 应用。我希望这篇文章是有用的，如果你知道任何可以提升 Web 应用性能的 CSS 技巧，请在评论中留言。谢谢！

延伸阅读

https://blog.bitsrc.io/improve-page-rendering-speed-using-only-css-a61667a16b2

![450eb2ec7089437c015609a99b698b90.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![4dfa445e0c3902a0634d4b771c512250.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[04bb3ced2a7eece121c70c907d795228.png]: /images/20221022/e9cdc235774d42deae4b11d7df8154e5.png
[7c4a0e708eac96f892951ef8bd9f2dc9.png]: /images/20221022/8647efdba7814c428a698b33daabdeb3.png
[3eebf4ec2f7894ddc2912bde9c3460ab.png]: /images/20221022/2699e28ba9de416daa812baf06ddd0bb.png
[72c9e077a6d4550a55e2d83285db179c.png]: /images/20221022/ef089f32cd854a82a246c65730619d38.png
[9d391334d21f41e880c87863d5939128.png]: /images/20221022/abdac1576ff84ffbb47958f607f75572.png
[1241d29a09ba554501fbc0c40dc51893.png]: /images/20221022/e9ee645545db4eba980d1d071b917009.png
[ef11d6b5e2688106237d1d2b679e79fe.png]: /images/20221022/6fbc7125ccae472095f25fa18ae62d7b.png
[f3372e33d5ce1465e33b586c5ac1256a.png]: /images/20221022/ceb44e494c5e4ff3b6ae878b990d2980.png
[baa8d201e8dea0526cfd6c262c3c23ac.png]: /images/20221022/4f851c1708f94bff80e72c4315b87180.png
[12776a2c9265b60853debb5cad36da9c.png]: /images/20221022/7936d91fdb98496d922f4871de3a21c9.png
[450eb2ec7089437c015609a99b698b90.gif]: /images/20221022/8ddedc0c913145af906888de4dead9be.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[4dfa445e0c3902a0634d4b771c512250.gif]: /images/20221022/0bca8078adc042f6a8d3e84ce8489f3d.png