CSS 優(yōu)化和提高性能的方法有哪些？

加載性能：

（1）css 壓縮：將寫好的 css 進(jìn)行打包壓縮，可以減小文件體積。

（2）css 單一樣式：當(dāng)需要下邊距和左邊距的時(shí)候，很多時(shí)候會選擇使用 margin:top 0 bottom 0；但 margin-bottom:bottom;margin-left:left;執(zhí)行效率會更高。

（3）減少使用@import，建議使用 link，因?yàn)楹笳咴陧撁婕虞d時(shí)一起加載，前者是等待頁面加載完成之后再進(jìn)行加載。

選擇器性能：

（1）關(guān)鍵選擇器（key selector）。選擇器的最后面的部分為關(guān)鍵選擇器（即用來匹配目標(biāo)元素的部分）。CSS 選擇符是從右到左進(jìn)行匹配的。當(dāng)使用后代選擇器的時(shí)候，瀏覽器會遍歷所有子元素來確定是否是指定的元素等等；

（2）如果規(guī)則擁有 ID 選擇器作為其關(guān)鍵選擇器，則不要為規(guī)則增加標(biāo)簽。過濾掉無關(guān)的規(guī)則（這樣樣式系統(tǒng)就不會浪費(fèi)時(shí)間去匹配它們了）。

（3）避免使用通配規(guī)則，如*{}計(jì)算次數(shù)驚人，只對需要用到的元素進(jìn)行選擇。

（4）盡量少的去對標(biāo)簽進(jìn)行選擇，而是用 class。

（5）盡量少的去使用后代選擇器，降低選擇器的權(quán)重值。后代選擇器的開銷是最高的，盡量將選擇器的深度降到最低，最高不要超過三層，更多的使用類來關(guān)聯(lián)每一個(gè)標(biāo)簽元素。

（6）了解哪些屬性是可以通過繼承而來的，然后避免對這些屬性重復(fù)指定規(guī)則。

渲染性能：

（1）慎重使用高性能屬性：浮動、定位。

（2）盡量減少頁面重排、重繪。

（3）去除空規(guī)則：｛｝?？找?guī)則的產(chǎn)生原因一般來說是為了預(yù)留樣式。去除這些空規(guī)則無疑能減少 css 文檔體積。

（4）屬性值為 0 時(shí)，不加單位。

（5）屬性值為浮動小數(shù) 0.**，可以省略小數(shù)點(diǎn)之前的 0。

（6）標(biāo)準(zhǔn)化各種瀏覽器前綴：帶瀏覽器前綴的在前。標(biāo)準(zhǔn)屬性在后。

（7）不使用@import 前綴，它會影響 css 的加載速度。

（8）選擇器優(yōu)化嵌套，盡量避免層級過深。

（9）css 雪碧圖，同一頁面相近部分的小圖標(biāo)，方便使用，減少頁面的請求次數(shù)，但是同時(shí)圖片本身會變大，使用時(shí)，優(yōu)劣考慮清楚，再使用。

（10）正確使用 display 的屬性，由于 display 的作用，某些樣式組合會無效，徒增樣式體積的同時(shí)也影響解析性能。

（11）不濫用 web 字體。對于中文網(wǎng)站來說 WebFonts 可能很陌生，國外卻很流行。web fonts 通常體積龐大，而且一些瀏覽器在下載 web fonts 時(shí)會阻塞頁面渲染損傷性能。

可維護(hù)性、健壯性：

（1）將具有相同屬性的樣式抽離出來，整合并通過 class 在頁面中進(jìn)行使用，提高 css 的可維護(hù)性。

（2）樣式與內(nèi)容分離：將 css 代碼定義到外部 css 中。