css性能优化

11 阅读1分钟

css作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验。

一:实现方式

  • 内联首屏关键css
  • 异步加载css
  • 资源压缩
  • 合理使用选择器
  • 减少使用昂贵的属性
  • 不要使用@import

资源压缩: 利用webpack,rollup等模块化工具,将css代码进行压缩,使文件变小,大大降低浏览器的加载时间

合理使用选择器
css匹配的规则是从右到左开始匹配。
如果嵌套的层级更多,页面中的元素更多,那么匹配所要花费的时间代价自然更高

编写选择器的时候,需要遵循的规则:

  • 不要嵌套使用过多复杂选择器,最好不要三层以上
  • 使用id选择器就没必要再进行嵌套
  • 通配符和属性选择器效率最低,避免使用

不要使用@import
css样式文件的两个引入方式,link元素,@import
@import 会影响浏览器的并行下载,使得页面在加载时增加额外的延迟,增添了额外的往返耗时

总结

css实现性能的方式可以从选择器嵌套,属性特性,减少http。
同时还要注意css代码加载顺序

参考网站:mp.weixin.qq.com/s?__biz=MzU…