CSS-提高、优化性能的方法

350 阅读1分钟

总结分为一下几点:

优化加载速度

  • 压缩、减小文件体积
  • 利用http缓存
  • 不使用@import
  • 利用css继承减少代码量
  • 使用简写减少代码量
  • 查找并删除无用的css
  • 必要时内联关键css,比如缩短首屏渲染时间时
  • 删除不必要的0和单位

优化渲染性能

  • 在head元素中引用css
  • 避免使用复杂的选择器,嵌套最好不要超过三层
  • 减少重绘和回流
  • 注意高性能消耗属性的使用
border-radius
box-shadow
transform……

提高css可维护性

  • 内容与样式分离
  • 注意命名,语义化
  • 提高css重用性,提取公共css