CSS提高页面渲染速度

1. Content-visibility

内容可见性，跳过屏幕外部内容的渲染
content-visibility: auto;

注意：

• 此功能处于试验阶段。
• 与滚动条相关的问题，会以一种非预期的方式进行。

2. Will-change

通过该属性，浏览器会为元素创建一个单独的层，它将该元素的渲染与其他优化一起委托给GPU。这将使动画更加流畅。

示例：

// In stylesheet
.animating-element {
  will-change: opacity;
}

// In HTML
<div class="animating-elememt">
  Animating Child elements
</div>

上述代码，浏览器将识别will-change，并优化未来与不透明度相关的变化。

注意：

• 使用will-change表明该元素在未来会发生变化。建议在父元素上使用will-change,子元素上使用动画。
• 不要使用非动画元素，没有要变的东西，会导致资源浪费。
• 在所有动画结束之后，移除will-change

3. 分解样式表， 减少渲染阻止时间

只让主css文件阻塞关键路径，以高优先级下载；其他样式表以低优先级下载

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

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

@import是一个阻塞调用，它必须通过网络请求来获取文件，解析文件，并且要包含在样式表中，会妨碍渲染性能。

可以用多个link来实现同样的功能。性能要好很多。它允许我们并行加载样式表。