第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-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
font-size:0.5em;
//可以简写成
font-size:.5em;
合并相同的样式
- 可以通过群组选择器抽取相同的样式来合并代码，达到代码重用和精简代码的目的。
利用继进行合并
- 利用CSS属性可继承的特性，可以把相同的属性定义在父元素上，从而精简代码。
12.3 压缩工具
- 网站发布的时候可以借助压缩工具压缩CSS文件，常用的CSS压缩网站：
12.4 图片压缩
12.4.1 JPEG、PNG、GIF的区别
- JPEG体积较大，可以存储色调丰富的图像，如照片、高清图片等。但不支持透明；PNG是一种无损格式图片，可以无损压缩进行传输。PNG支持透明；GIF格式图像效果较差，但可以制作动画。
- 总的来说，要展示高品质图片可以用JPEG格式，一般图片使用PNG格式，动图使用GIF格式。
12.4.2 图片压缩
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 开发注意事项
-
避免使用低效率的选择器 ：比如通配符选择、子选择器、后代选择等匹配的量非常大，效率较低，应该尽量少使用。但也不要因为追求性能，而增加过多的id、class来替代使用，以致泛滥成灾；
-
不要在id/class选择器前加元素名：在选择器前添加元素名会增加匹配量；
-
选择器的嵌套不要超过三层，关键选择器尽可能精准：选择器的层次越多，匹配的次数就越多，性能也就越慢；
