第12章：性能優化
- 高質量的CSS代碼主要體現在2個方面：可維護性和高性能。
- 有研究表明，Amazon每增加10毫秒的頁面加載時間會導致銷售額下降1%，而谷歌加載時間每增加500毫秒將導致收入減少20%?？梢娦阅艿奶岣邔τ诖笮途W站是至關重要的。
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選擇器前加元素名：在選擇器前添加元素名會增加匹配量；
-
選擇器的嵌套不要超過三層，關鍵選擇器盡可能精準：選擇器的層次越多，匹配的次數就越多，性能也就越慢；
