CSS優(yōu)化
使用縮寫的css樣式規(guī)則
使用簡短的CSS樣式規(guī)則會減少樣式文件的大小。這種方法在短期內(nèi)不會為您節(jié)省很多，但是如果在大型樣式表中使用，那么它可以起到很大的作用。所以養(yǎng)成使用簡短樣式規(guī)則是個好習(xí)慣。
div {
/*使用簡短樣式規(guī)則*/
border: 1px solid red;
margin: 1px 2px 3px 4px;
}
div {
border-left: 1px solid red;
border-right: 1px solid red;
border-top: 1px solid red;
border-bottom: 1px solid red;
margin-left: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-top: 4px;
}
使用更淺的css選擇器
在大型樣式表中，保持CSS選擇器簡潔可以節(jié)省空間。通過降低復(fù)雜性，您可以保持樣式表的精簡和低加載時間，從而提高頁面的性能。為了保持css選擇器的簡潔，那么html的結(jié)構(gòu)也就需要保持簡潔不要嵌套過深的結(jié)構(gòu)。
使用CSS預(yù)編譯器
CSS預(yù)編譯器在前端開發(fā)人員的工具包中非常重要。預(yù)編譯器提供了普通CSS中一些沒有的特性，包括變量、混合器(稱為mixin)，以及預(yù)編譯的導(dǎo)入模塊功能，嵌套樣式規(guī)則（它的可讀性更強(qiáng)，因?yàn)樗７铝薍TML的層次結(jié)構(gòu)）。然后，這些工具將用預(yù)編譯器語言編寫的文件編譯為瀏覽器可以理解的普通CSS。流行的預(yù)編譯器是LESS (http://lesscss.org)和SASS(http://sass-lang.com)
這里作者更推薦sass，這里列舉了sass的優(yōu)點(diǎn)：
- 消除樣式表冗余
- 通過變量來復(fù)用屬性值
- 使用嵌套來快速寫出多層級的選擇器
- 使用混合器來復(fù)用一段樣式
- 使用選擇器繼承來避免重復(fù)屬性
使用csscss消除冗余
csscss是一個命令行工具，用于查找CSS中的冗余。重構(gòu)CSS時，這是一個很好的起點(diǎn)。要安裝csscss，您需要Ruby的gem安裝程序，它類似于Node的npm可執(zhí)行文件，但是用于Ruby包。OS X預(yù)裝了Ruby。
如果你已經(jīng)安裝了SASS, gem已經(jīng)可以使用了。
csscss styles.css –v –-no-match-shorthand
此命令通過使用兩個參數(shù)來檢查styles.css是否存在冗余規(guī)則。v參數(shù)告訴程序要詳細(xì)信息并打印出匹配的規(guī)則?！猲o-match-shorthand參數(shù)防止程序?qū)⑷魏纹ヅ浜唽懸?guī)則(如border-bottom)擴(kuò)展為更明確的規(guī)則(如border-bottom樣式)。如果您想擴(kuò)展這些規(guī)則，請刪除開關(guān)。程序輸出將顯示多個元素之間的所有冗余樣式。如下面列子：
從上面列子可以看出，3個css樣式是共享flex的3個樣式規(guī)則，那么應(yīng)該使用多元素選擇器合并樣式：
.body .main .page ul,header .main .menu ul,header .main .top{
align-content: center
display: flex
flex-direction: row
}
避免@import聲明
您可能見過在CSS中使用@import指令。應(yīng)該避免這種做法，因?yàn)闃邮奖碇械腀import指令下載導(dǎo)入的樣式表，增加http請求個數(shù)。此行為會導(dǎo)致web頁面的總加載時間延遲。
將CSS放置在<head>中
你應(yīng)該盡可能的把CSS放到<head>標(biāo)簽中，因?yàn)?lt;head>標(biāo)簽中的內(nèi)容會先加載，這樣能盡早加載樣式文件，渲染樣式，這樣可以防止用戶看到未被渲染完成的站點(diǎn)，這種現(xiàn)象稱為Flash of Unstyled Content。出現(xiàn)這種原因是因?yàn)闉g覽器從上到下讀取HTML。在讀取HTML文檔時，瀏覽器查找對外部資源的引用。由于css加載過慢，html已經(jīng)構(gòu)建完成后，而css還沒有下載完并渲染。
盡可能使用flexbox
Flexbox是現(xiàn)代瀏覽器中一個CSS3布局引擎。它簡化了元素在頁面上的布局。它會自動處理兩個軸上的間距、對齊和對齊。它不僅是在頁面上布局元素的一種更健壯的方式，而且往往比傳統(tǒng)方法執(zhí)行得更好。
critical CSS
當(dāng)你的網(wǎng)頁特別長時，此時你的網(wǎng)頁就無法在viewport上完全顯示整個網(wǎng)頁，只能顯示最頂部的主要網(wǎng)頁部分，那么這部分顯示出來的頁面樣式稱為critical CSS（關(guān)鍵樣式）。所以也沒樣式就被分為：
- critical CSS：這些樣式用于用戶可以立即看到的內(nèi)容，并且需要盡可能快地加載。
- noncritical CSS：這些是用戶在開始向下滾動頁面時才會看到的內(nèi)容樣式。這個CSS也應(yīng)該盡快加載，但不要在關(guān)鍵樣式之前加載CSS。
區(qū)分critical CSS和noncritical CSS的好處：
- 避免出現(xiàn)Flash of Unstyled Content，即dom解析完畢后css樣式文件還沒有下載完成并渲染，導(dǎo)致出現(xiàn)也沒的無樣式空檔期。
- 提升性能
處理critical CSS和noncritical CSS：
將critical CSS內(nèi)聯(lián)到HTML的<head>中，以便更快地解析，也就是更快地解析。內(nèi)聯(lián)CSS工作得這么好的原因是瀏覽器不需要等待那么長時間。但也有一個缺點(diǎn):當(dāng)以這種方式加載站點(diǎn)的所有CSS時，將失去其可移植性。這一點(diǎn)可以通過后端語言來彌補(bǔ)，比如通過php的file_put_content來加載：
<style><?php echo file_put_content('./css/critical.min.css');?></style>
對于noncritical CSS可以通過rel="preload"進(jìn)行內(nèi)容預(yù)加載：
<link rel="preload" href="css/style.min.css" onload="this.rel='stylesheet'"/>
<noscript><link rel="stylesheet" href="css/style.min.css"/></noscript>
這一機(jī)制使得資源可以更早的得到加載并可用，且更不易阻塞頁面的初步渲染，進(jìn)而提升性能。當(dāng)CSS完成下載時，標(biāo)記上的onload事件處理程序?qū)⒂|發(fā)。一旦下載，rel屬性的值將從preload轉(zhuǎn)換為stylesheet值。
對于critical CSS部分的高度是多少，這是一個問題，因?yàn)椴煌脑O(shè)備屏幕的的高度不一，那么設(shè)置critical CSS的高度就成了問題，值得慶幸的是有一個很棒的網(wǎng)站，在http://mydevice.io/devices上，提供了各種設(shè)備的分辨率列表。
