前端優化--高性能的CSS

我覺得在學習前端中，CSS的學習應該是相對比較簡單的，也是入門比較快的，那麼如何寫出高性能的CSS呢？我們應該知道在前端開發中，HTML和CSS代碼 的可讀性和可維護性是非常重要的，那麼我們在保證可讀性和可維護性的前提下，如何讓代碼的解析速度更快呢？

1 首先使用高效的CSS選擇器

關于高效的CSS選擇器，用三個例子作比較：

1 .get .list div

2 .get .list-item

3 #getcode

那麼分析一下，上面的三個css選擇器哪個效率更高呢？在此之前先說一下CSS選擇器在比對中經曆了哪些步驟，首先CSS選擇器的比對原理是從又到左的，拿上面第一個解釋首先選擇器先找到所有的div标簽元素，再查找元素是否存在具有list類的父元素，然後再查找這些父元素中是否存在get類的父元素。

可想而知第一個的效率最差，第三個的效率最高，用ID選擇器在整個頁面中具有唯一性，查找到速度最快，并且查找的次數最少，性能最好。

2 CSS選擇器遵循一些最佳原則

（1）避免使用通配符*

通配符*使用表示在加載頁面的時候用來皮比對所有的元素，避免使用通配符給頁面加載增加大量負擔。

//避免這樣使用
*{
	font-size:14px;
}
           

（2）避免使用标簽選擇器及單個屬性選擇器作為關鍵選擇器

//不建議用法
 .get .list div {
	font-size:14px;
}
 .get .list [date-link = "#red"]{
	color:000;
}
           

（3）避免在ID選擇器前使用标簽名

//避免這樣使用
div#getcode{
	color:#f00;
}
           

（4）盡量不要在選擇器中定義過多的層級增加查找負擔

//避免這樣使用
.get>.outest>.lists>ul>li{

}
           

3 優化CSS代碼量

（1）定義簡潔的CSS規則。

（2）合并相關CSS規則。

比如margin-top,margin-right,margin-bottom,margin-left 
 .item{
	margin-top:10px;
	margin-right:10px;
	margin-bottom:10px;
	margin-left:10px; 
}
合并成
.item{
	margin:10px;
}
           

(3)定義簡潔的屬性值

//将
 .item{
	margin:0px;
	color:#FFFFFF;
	font-size:0.8em;
}
//修改為
 .item{
	margin:0;
	color:#FFF;
	font-size:.8em;
}
           

（4）合并相同的定義。

比如

.item{
	margin:10px;
	color:#000;
}
 .get{
	margin:10px;
	color:#FFF;
}
修改為
 .item, .get{
	margin:10px;
}
 .item{
	color:#000;
}
 .get{
	color:#FFF;
}
           

4 讓CSS樣式與HTML結構分離

CSS樣式與HTML結構解耦，CSS樣式單獨在一個樣式檔案中，隻需在HTML中的head标簽中用

<link rel="stylesheet" href="css檔案路徑">引用css樣式即可