转自：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 等。
AllInAce说道： 
Google Chrome 
Windows 10
DealerShadow说道： 
ChipWhisperer说道：