css提升页面性能

接下来我们说一下css面试时，问到的页面性能提升

1.属性设置使用简写，例如

 .box {
      margin-top: 10px;
      margin-right: 20px;
      margin-bottom: 30px;
      margin-left: 40px;

    }

我们可以写成

.box {
      margin: 10px 20px 30px 40px;
    }

这样写可以减小生产包的体积

2.使用css样式来替换图标

日常使用的图标，有一些我们可以用css来实现，比如说三角形，箭头，圆形，为什么要这样做，目的是为了减少http请求，节约带宽

3.删除不必要的零和单位

//优化前
    .box {
      width: 0.2em;
      height: 20.0em;
      padding: 0px
    }
    //优化后
    .box {
      width: .2em;
      height: 20em;
      padding: 0
    }

这样写跟第一个一样，目的是为了减少生产包体积

4.背景图尽量使用精灵图，也就是雪碧图，将多个背景图放在一张大图上

 这样可以减少http请求，节约带宽