【CSS性能优化技巧】

加载时性能优化项

1.使用< link >标签 代替 @import

(1).使用@import引入css会影响浏览器的并行下载
使用@import引用的css文件只有在引用它的那个css文件被下载, 解析之后, 浏览器才知道还有另外一个css需要下载,这时候才开始去下载并解析, 构建render tree等一系列操作, 这就导致浏览器无法并行下载所需的样式文件. )
(2).对个@import会导致下载顺序紊乱
在IE浏览器中, @import会引发资源文件的下载顺序被打乱, 即排列在@import后边的js文件优选与@import下载, 打乱甚至破坏@import自身的下载.
所以使用< link >代替@import引入外部的css样式

❌ 避免：
  @import url("header.css");   
✅ 推荐：
  <link rel="stylesheet" href="header.css">   

2. 压缩 CSS

通过压缩CSS文件来删除文件中所有的空白和不必要的代码来减少文件的大小。CSS文件变小了，加载的时间自然就变少了，页面的加载速度就会变。

3.css单一样式

❌ 避免：
 margin: 10px  0 20px 0 
✅ 推荐：
 margin-bottom:20px ;
 margin-top:10px

4.建立公共样式类

合理设计CSS 布局，注意复用样式，减少渲染上花的时间。
❌ 避免：

.header {
  background-color: #fefefe;
  padding: 20px 0;
}
.footer {
  background-color: #fefefe;
  padding: 20px 0;
}

✅ 推荐:

.header,
.footer {
  background-color: #fefefe;
  padding: 20px 0;
}

5.合并css文件减少http请求

如果页面加载10个css文件,每个文件1k，那么也要比只加载一个100k的css文件慢。

6.使用0而不是0px

当一个属性的值为0时，我们可以不添加任何单位。即不要这么写：0rem，0em，0px等。

6.避免使用 !Important

添加 !Important CSS声明将覆盖掉其他对应的样式声明，如果CSS的规则中 !Important 太多，浏览器就必须对代码进行额外的检查，这可能会降低页面的加载速度。所以，尽量避免使用!Important。 在很多情况下我们是可以通过选择器来实现样式重写的，除非是想要对第三方库的CSS进行重写。

7.使用CSS代替图片实现一些特效

页面中加载图像很可能需要很长的时间，尤其是在图像未针对web进行优化的情况下。在实现背景图、渐变、几何图形时，尽量少使用图片，而是使用CSS代码实现。使用 CSS 代码实现会就会比图片加载速度更快。

8.SVG代替图片

使用SVG来代替PNG或者JPG图片：
● 可以给图片添加效果；
● 图像加载速度更快；
● 图像自动适应用户屏幕。

9.避免使用通配*规则

10.不要去用标签限定ID或者类选择符

11. 减少css嵌套，加速css解析

css嵌套过深, 会影响浏览器查找选择器的速度, 一定程度上产生很多冗余的节点, 一般最多嵌套三层.
不要在ID选择器前面进行嵌套: ID本来就是唯一的而且权限值大，嵌套完全是浪费性能。

12.充分利用css继承属性，减少代码量

了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则

13.使用十六进制而不是颜色名称

当我们将颜色设置为颜色名称时，浏览器就会花费更多时间来找出颜色的十六进制值。假如想使用红色，那设置为color:red之后，不同的浏览器显示效果可能是不一样的,因此，尽量使用使用十六进制（例如红色#ff0000）来定义颜色，就能确保在所有浏览器中以相同的色调准确的显示想要的颜色

14.简化选择器

❌ 避免：
.container > div.links-container ul li .link {
}
✅ 推荐：
.container .link {

}

可维护性性能优化项

1、将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用,提高css的可维护性；

2、oocss(面向对象css)也是提高css性能的途径

通过定义可复用的、语义化良好的基础类，然后添加到html中，这也是很多ui框架都在使用的一种方法，例如：class=“btn btn-active btn-blue”；

3、样式与内容分离：

将css代码定义到外部css中；

4、容器与样式分离；