一周一章前端书·第22周：《HTML与CSS进阶教程》S02E09

第12章：性能优化

• 高质量的CSS代码主要体现在2个方面：可维护性和高性能。
• 有研究表明，Amazon每增加10毫秒的页面加载时间会导致销售额下降1%，而谷歌加载时间每增加500毫秒将导致收入减少20%。可见性能的提高对于大型网站是至关重要的。

12.1 属性缩写

• CSS很多属性是可以缩写的。通过缩写属性可以减少字符数，使得CSS代码量更少。

盒模型缩写

/*
 * border属性缩写
 */
border-width:1px;
border-style:solid;
border-color:gray;
//等同于
border:1px solid gray;

/* 
 * padding属性缩写的三种方式
 */
padding: 1px;   
/*padding-top + padding-left + padding-bottom + padding-right都为1px*/
padding: 1px 2px;   
/*padding-top和padding-bottom都为1px,padding-left和padding-right为2px*/
padding: 1px 2px 3px 4px;  
/*顺时针方向设置padding-top、padding-right、padding-bottom、padding-left*/

/* 
 * margin属性缩写的三种方式
 */
margin: 1px;   
/*margin-top + margin-left + margin-bottom + margin-right都为1px*/
margin: 1px 2px;   
/*margin-margin-bottom都为1px,margin-margin-right为2px*/
margin: 1px 2px 3px 4px;  
/*margin-top、padding-right、margin-bottom、margin-left*/

背景缩写

/*
 * background属性缩写
 */
background-image: url(../img/weibo.png);
background-repeat: no-repeat;
background-position: 0px 10px;
//等同于
background: url(../img/weibo.png) no-repeat 0px 10px;

字体缩写

• font 简写属性在一个声明中设置所有字体属性

/*
 * 字体及文本属性缩写
 */
font-style: italic;
font-variant:small-caps;
font-weight: bold;
font-size: 12px;
line-height: 1.5em;
font-family: "微软雅黑";
//等同于
font:italic small-caps bold 12px/1.5em "微软雅黑";

12.2 语法压缩

• 通过对CSS语法进行精简压缩，减少CSS文件体积大小，从而减少页面数据传输量。

空格和回车

• 网站发布的时候，可以通过工具进行压缩，去除CSS代码中的空格和回车。

结尾分号

• 最后的样式属性的结尾分号可以忽略。

.wrapper{
    padding:10px;
    border:1px solid gray;
}
//可以简写成
.wrapper{
    padding:10px;
    border:1px solid gray
}

url的引号

• 像background-image、cursor等属性的url()中的路径的引号可以忽略。

background-image:url('logo.jpg');
//可以简写成
background-image:url(logo.jpg);

属性值为0

• 当属性值是以0开头的小数时，可以把开头的0去掉。

font-size:0.5em;
//可以简写成
font-size:.5em;

合并相同的样式

• 可以通过群组选择器抽取相同的样式来合并代码，达到代码重用和精简代码的目的。

利用继进行合并

• 利用CSS属性可继承的特性，可以把相同的属性定义在父元素上，从而精简代码。

12.3 压缩工具

• 网站发布的时候可以借助压缩工具压缩CSS文件，常用的CSS压缩网站：
  • CSS Compressor
  • YUI Compressor

12.4 图片压缩

12.4.1 JPEG、PNG、GIF的区别

• JPEG体积较大，可以存储色调丰富的图像，如照片、高清图片等。但不支持透明；PNG是一种无损格式图片，可以无损压缩进行传输。PNG支持透明；GIF格式图像效果较差，但可以制作动画。
• 总的来说，要展示高品质图片可以用JPEG格式，一般图片使用PNG格式，动图使用GIF格式。

12.4.2 图片压缩

• 在线图片压缩网站：
  • JPEGmini
  • TinyPNG
• 本地压缩软件可以用ImageOptim

12.5 高性能的选择器

• 采用不同的CSS选择器，浏览器的解析速度也不一样。

12.5.1 选择器的解析原理

#column .conent div{border:1px solid gray;}

• 我们书写CSS选择器是从左到右，但浏览器对选择器的规则是从右到左来解析的。如上述代码，浏览器会先查询所有的div元素，再筛选这些div元素中，有没有存在父元素为.content类的，最后从筛选条件中找出祖先元素id为column的。
• 可见，最右侧的选择器是决定执行效率的关键，它也称为“关键选择器”。

12.5.2 CSS选择器的匹配效率

//由高到低的排序
id选择器 > class选择器 > 元素选择器 > 相邻选择器 > 子选择器 > 后代选择器 > 通配符选择器 > 属性选择器 >  伪类选择器

12.5.3 开发注意事项

1. 避免使用低效率的选择器 ：比如通配符选择、子选择器、后代选择等匹配的量非常大，效率较低，应该尽量少使用。但也不要因为追求性能，而增加过多的id、class来替代使用，以致泛滥成灾；
2. 不要在id/class选择器前加元素名：在选择器前添加元素名会增加匹配量；
3. 选择器的嵌套不要超过三层，关键选择器尽可能精准：选择器的层次越多，匹配的次数就越多，性能也就越慢；