- 合并 CSS 文件
- 减少 CSS 嵌套,最好不要嵌套三层以上
- 不要在 ID 选择器前面进行嵌套
- 建立公共样式类,把相同样式提取出来作为公共类使用
- 巧妙运用 CSS 的继承机制,如果父节点定义了,子节点就无需定义
- 避免使用 CSS 表达式,非常浪费性能
- CSS 压缩
- CSS Sprite,合成所有 icon 图片
- GZIP 压缩
- 避免使用 @import ,外部的 CSS 文件中使用 @import 会使得页面在加载时增加额外的延迟
使用 @import 引入 CSS 会影响浏览器的并行加载。使用 @import 引用的 CSS 文件只有在引用它的那个 CSS 文件被下载,解析之后,浏览器才会知道还有另外一个 CSS 需要下载,这时才去下载,然后下载后开始解构,构成 render tree 等一系列操作,这就导致浏览器无法并行下载所需的样式文件。
其次,多个 @import 会导致下载顺序紊乱,在 IE 中, @import 会引发资源文件的下载顺序被打乱,即排列在 @import 后面的 JS 文件优先于 @import 下载,并且打乱甚至破坏 @import 自身的并行下载。
所以不要使用这一方法,使用 link 标签就行了。
- 避免重绘和重排
参考文章: