【转载】Css 性能优化

转自：https://zhuanlan.zhihu.com/p/376816600

• 不使用 @import，会增加加载时间。
• 选择器尽量少于三层，太多层不利于后期维护，可读性也比较低。浏览器读取选择器是从右到左的顺序，最右边的选择器应该具有辨识度。
• 通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用。
• 首屏的关键样式使用内联方式，减少加载时间。
• 非首屏样式使用异步加载，这是使用媒体查询，在 onload时设置 media 为 all 才开始加载。
  <link rel="stylesheet" href="./index.css" media="none" onload="this.media='all'">
• 异步预加载。
  <link rel="preload" href="./index.css" as="style" onload="this.rel='stylesheet'">
• 利用 js 动态生成 link

  let link = document.createElement("link"); link.rel = "stylesheet";
  link.href = "./index1.css"; document.head.appendChild(link); 

• 文件压缩。
• 去除无效的样式。
• 尽量不使用需要浏览器计算的样式，比如 box-shadow、border-radius、filter 等。