加快页面渲染速度的四个重要步骤
该图片由Arek Socha在Pixabay上发布
用户喜欢速度快的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高度渲染，因此，每当你向下滚动时，这些元素都会进入屏幕、渲染实际内容，并且元素的高度也会相应地更新，这将使滚动条在意料之外运行。
具有内容可见性的滚动行为
要解决滚动条问题，可使用另一个名为 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等。
示例：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。
不使用 will-change 图片由马克西米利安（Maximilian）提供
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