1. 合并 CSS 文件
    2. 减少 CSS 嵌套,最好不要嵌套三层以上
    3. 不要在 ID 选择器前面进行嵌套
    4. 建立公共样式类,把相同样式提取出来作为公共类使用
    5. 巧妙运用 CSS 的继承机制,如果父节点定义了,子节点就无需定义
    6. 避免使用 CSS 表达式,非常浪费性能
    7. CSS 压缩
    8. CSS Sprite,合成所有 icon 图片
    9. GZIP 压缩
    10. 避免使用 @import ,外部的 CSS 文件中使用 @import 会使得页面在加载时增加额外的延迟

    使用 @import 引入 CSS 会影响浏览器的并行加载。使用 @import 引用的 CSS 文件只有在引用它的那个 CSS 文件被下载,解析之后,浏览器才会知道还有另外一个 CSS 需要下载,这时才去下载,然后下载后开始解构,构成 render tree 等一系列操作,这就导致浏览器无法并行下载所需的样式文件。
    其次,多个 @import 会导致下载顺序紊乱,在 IE 中, @import 会引发资源文件的下载顺序被打乱,即排列在 @import 后面的 JS 文件优先于 @import 下载,并且打乱甚至破坏 @import 自身的并行下载。
    所以不要使用这一方法,使用 link 标签就行了。

    1. 避免重绘和重排

    参考文章: