1、content-visibility属性 ***
- 浏览器支持性，在
https://caniuse.com/网站中查询该属性的兼容性，目前仅chrome及opera支持。
浏览器兼容性 - 使用场景
当页面内容过长已经超出浏览器窗口可视范围，如果一次性加载全部内容会导致页面加载性能不佳，此时采用content-visibility来跳过渲染屏幕之外的内容，从而减少页面渲染时间。 - 使用方法
可选值：
/* Keyword values */
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;
/* Global values */
content-visibility: initial;
content-visibility: unset;
在需要优化显示的元素上设置
.optimize-item{
content-visibility: auto;
}
- ！！！可能会出现的问题
由于元素最初渲染的高度是0px，当向下滚动时，这些元素会进入屏幕。实际的内容会被渲染，这个元素的高度会被相应地更新。如果这个元素很大有一定高度，那么滚动条的长度就会发生变化，页面可能就会发生抖动的现象。此时用到contains-intrinsic-size属性给元素设置初始自然高度，提前占用一定高度避免页面抖动。
补充上一步样式
.optimize-item{
content-visibility: auto;
contains-intrinsic-size:1000px;
}
2、will-change属性 *
- 浏览器支持性，在
https://caniuse.com/网站中查询该属性的兼容性，除了ie浏览器外主流浏览器均支持。
浏览器兼容性 - 使用场景
对页面加载动画效果进行优化处理。浏览器会为这个元素创建一个单独的层。然后，浏览器将这个元素的渲染委托给 GPU，以及其它一些优化。由于 GPU 加速接管了动画渲染，最终这个动画会更流畅。 - 注意事项：
- 不要将 will-change 应用到太多元素上，可能会消耗很多机器资源，导致页面响应缓慢。
- 建议在父元素上使用 will-change，在子元素上使用动画。
- 建议在完成所有动画之后将 will-change 从元素上删除。
- 使用方法
.my-class{
will-change: opacity;
}
.child-class{
transition: opacity 1s ease-in-out;
}
3、避免使用@import来导入样式表 **
- @import 的一个关键事实是，它是一个阻塞调用，因为它必须发起一个网络请求来获取这个文件，解析它，然后将它包含在样式表中。如果我们在样式表中有嵌套的 @import，它会妨碍渲染性能。
- 采用link引入外部css样式可以并行下载样式表，提高性能
