前端面试题之css优化

1. 不使用@import，会增加加载时间。

2. 选择器尽量少于三层，太多层不利于后期维护，可读性也比较低。浏览器读取选择器是从右到左的顺序，最右边的选择器应该具有辨识度。

3. 通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用。

4. 首屏的关键样式使用内联方式，减少加载时间。

5. 非首屏样式使用异步加载，这是使用媒体查询，在onload时设置media为all才开始加载。

   6. 异步预加载。

   7. 利用js动态生成link

   8. 文件压缩。

   9. 去除无效的样式。

   10. 尽量不使用需要浏览器计算的样式，比如box-shadow、border-radius、filter等。

不足之处请指出，谢谢！