今天來(lái)分享一些有助于提高性能的 CSS 代碼優(yōu)化小技巧!

1. 避免高消耗屬性

分析表明，一些CSS屬性的渲染速度比其他屬性慢，因此應(yīng)該謹(jǐn)慎使用。包括以下屬性：

• box-shadow
• border-radius
• position: fixed
• transform
• :nth-child
• filter

上述屬性都是對(duì)性能要求比較高的。如果這些屬性使用較少，那這就不是問(wèn)題。但是如果一個(gè)頁(yè)面出現(xiàn)幾百次，那么整體的CSS可能會(huì)受到影響，所以要謹(jǐn)慎使用。

2. 使用 <link> 代替 @import

@import 規(guī)則主要用于導(dǎo)入資源或者CSS文件。它會(huì)阻止其他文件并行下載，并可能會(huì)導(dǎo)致網(wǎng)站速度變慢。

不要在CSS中這樣操作：

@import url("header.css");
@import url("slider.css");
@import url("content.css");
@import url("footer.css");

可以使用多個(gè)HTML 中的標(biāo)簽來(lái)代替@import，它將并行加載CSS文件，可以在一定程度上提高應(yīng)用的加載的速度。

可以在HTML這樣操作：

<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="slider.css">
<link rel="stylesheet" href="content.css">
<link rel="stylesheet" href="footer.css">

3. 簡(jiǎn)化選擇器

我們知道，有很多方法可以對(duì) HTML 元素進(jìn)行樣式設(shè)置，而最復(fù)雜的 CSS 選擇器可能需要幾毫秒的時(shí)間來(lái)解析。降低選擇器的復(fù)雜性就可以減少瀏覽器的負(fù)載并保持代碼簡(jiǎn)潔明了。

避免這么寫(xiě)：

.container > div.links-container ul li .link {

}

可以這么寫(xiě)：

.container .link {

}

4. 避免使用 !Important

在一些時(shí)候，可以使用!Important 來(lái)提高樣式的優(yōu)先級(jí)，以使樣式生效。除非沒(méi)有別的辦法，否則不要使用!Important。

添加 !Important CSS聲明將覆蓋掉其他對(duì)應(yīng)的樣式聲明，如果CSS的規(guī)則中 !Important 太多，瀏覽器就必須對(duì)代碼進(jìn)行額外的檢查，這可能會(huì)降低頁(yè)面的加載速度。所以，盡量避免使用!Important。在很多情況下我們是可以通過(guò)選擇器來(lái)實(shí)現(xiàn)樣式重寫(xiě)的，除非是想要對(duì)第三方庫(kù)的CSS進(jìn)行重寫(xiě)。

5. CSS實(shí)現(xiàn)特效和SVG代替圖片

頁(yè)面中加載圖像很可能需要很長(zhǎng)的時(shí)間，尤其是在圖像未針對(duì)web進(jìn)行優(yōu)化的情況下。在實(shí)現(xiàn)背景圖、漸變、幾何圖形時(shí)，盡量少使用圖片，而是使用CSS代碼實(shí)現(xiàn)。使用 CSS 代碼實(shí)現(xiàn)就會(huì)比圖片加載速度更快。

還可以使用SVG來(lái)代替PNG或者JPG圖片：

• 可以給圖片添加效果;
• 圖像加載速度更快;
• 圖像自動(dòng)適應(yīng)用戶(hù)屏幕。

6. 壓縮 CSS

我們可以通過(guò)壓縮CSS文件來(lái)刪除文件中所有的空白和不必要的代碼來(lái)減少文件的大小。CSS文件變小了，加載的時(shí)間自然就變少了，頁(yè)面的加載速度就會(huì)變。

7. 使用0而不是0px

當(dāng)一個(gè)屬性的值為0時(shí)，我們可以不添加任何單位。即不要這么寫(xiě)：0rem，0em，0px等。

當(dāng)然，這么寫(xiě)是沒(méi)有錯(cuò)的，但是這些單位是沒(méi)有用的，當(dāng)處理一個(gè)巨大的CSS文件時(shí)，沒(méi)有單位會(huì)比有單位時(shí)文件小一點(diǎn)。

8. 使用十六進(jìn)制而不是顏色名稱(chēng)

當(dāng)我們將顏色設(shè)置為顏色名稱(chēng)時(shí)，瀏覽器就會(huì)花費(fèi)更多時(shí)間來(lái)找出顏色的十六進(jìn)制值。假如想使用紅色，那設(shè)置為color:red之后，不同的瀏覽器顯示效果可能是不一樣的，作為開(kāi)發(fā)人員，我們不能讓瀏覽器來(lái)決定網(wǎng)頁(yè)將如何顯示。

因此，盡量使用使用十六進(jìn)制(例如紅色#ff0000)來(lái)定義顏色，就能確保在所有瀏覽器中以相同的色調(diào)準(zhǔn)確得顯示想要的顏色。

9. 避免過(guò)多 font-family

為每個(gè)選擇器去定義字體并不是一個(gè)好的辦法，它會(huì)導(dǎo)致代碼很難維護(hù)，假如以后想要更改字體，就不得不在每個(gè)選擇器中更改它。

因此不要像下面這樣來(lái)定義字體：

h1 {
  font-family: Arial, Helvetica, sans-serif;
}

p {
  font-family: Arial, Helvetica, sans-serif;
}

.selection {
  font-family: Arial, Helvetica, sans-serif;
}

.footer {
  font-family: "Times New Roman", Times, serif;
}

可以在正文中定義要使用的字體，如果想要在其他選擇器中覆蓋該字體，就可以通過(guò)在該選擇器中使用所需的字體來(lái)實(shí)現(xiàn)：

body{
  font-family: Arial, Helvetica, sans-serif;
}

footer{
  font-family: "Times New Roman", Times, serif";
}

如果頁(yè)面中很多部分的字體都不盡相同，就可以將字體定義在 class 中，然后在需要的HTML標(biāo)簽上使用該class即可：

.font-helvetica {
  font-family: Arial, Helvetica, sans-serif;
}

.font-times {
  font-family: "Times New Roman", Times, serif";
}

10. 使用備用字體

有些情況下，應(yīng)用中使用的字體可能在用戶(hù)設(shè)備上不可用。在這種情況下，可以指定使用其他備用字體：

p{
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

這樣，瀏覽器就會(huì)按順序進(jìn)行解析，直到解析到第一個(gè)可用的字體，如果都不可用，就會(huì)使用瀏覽器的默認(rèn)字體。

11. 使用 CSS 重置

每個(gè)瀏覽器都有自己的 HTML 元素默認(rèn)樣式。假如有一個(gè)沒(méi)有任何樣式的 H1 元素，那么在默認(rèn)情況下，在Firefox中，會(huì)給它一個(gè)上下為21.433px，左右為 0 的margin值。而在Safari中，會(huì)給它一個(gè)上下為21px，左右為 0 的margin值。

因此，重置CSS樣式，一個(gè)很好的做法就是從頭開(kāi)始定義樣式。很多開(kāi)發(fā)人員會(huì)使用通用選擇器(*)來(lái)執(zhí)行基本重置：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

在使用通用選擇器 (*) 進(jìn)行重置有時(shí)會(huì)導(dǎo)致性能問(wèn)題，因?yàn)樗鼤?huì)針對(duì)每個(gè)標(biāo)簽去設(shè)置其樣式。

可以使用一些常用的CSS重置代碼庫(kù)，比如normalize。也可以參考一些CSS重置的最佳實(shí)踐。

12. 減少重復(fù)代碼

當(dāng)兩個(gè)元素或選擇器具有相同的 CSS 屬性時(shí)，可以使用逗號(hào)來(lái)組合這些選擇器，而不是重復(fù)聲明樣式，這樣它們將共享 CSS 樣式。

避免這樣寫(xiě)：

.header {
  background-color: #fefefe;
  padding: 20px 0;
}

.footer {
  background-color: #fefefe;
  padding: 20px 0;
}

建議這樣寫(xiě)：

.header,
.footer {
  background-color: #fefefe;
  padding: 20px 0;
}