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
来实现同样的功能。性能要好很多。它允许我们并行加载样式表。