css作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验。
一:实现方式
- 内联首屏关键css
- 异步加载css
- 资源压缩
- 合理使用选择器
- 减少使用昂贵的属性
- 不要使用@import
资源压缩: 利用webpack,rollup等模块化工具,将css代码进行压缩,使文件变小,大大降低浏览器的加载时间
合理使用选择器
css匹配的规则是从右到左开始匹配。
如果嵌套的层级更多,页面中的元素更多,那么匹配所要花费的时间代价自然更高
编写选择器的时候,需要遵循的规则:
- 不要嵌套使用过多复杂选择器,最好不要三层以上
- 使用id选择器就没必要再进行嵌套
- 通配符和属性选择器效率最低,避免使用
不要使用@import
css样式文件的两个引入方式,link元素,@import
@import 会影响浏览器的并行下载,使得页面在加载时增加额外的延迟,增添了额外的往返耗时
总结
css实现性能的方式可以从选择器嵌套,属性特性,减少http。
同时还要注意css代码加载顺序