摘要： 優化CSS。
Fundebug經授權轉載，版權歸原作者所有。
這是 Web 效能優化的第 4 篇，上一篇在下面看點選檢視：
CSS 必須通過一個相對複雜的管道，就像 HTML 和 JavaScript 一樣，瀏覽器必須從伺服器下載檔案，然後進行解析並將其應用於 DOM。由於優化程度極高，這個過程通常非常快——對於不基於框架的小型 web 專案，CSS 通常只佔總資源消耗的一小部分。
框架打破了這種平衡。包括一個 JavaScript GUI 堆疊，如 jQuery UI，可以觀察 CSS, JS 和 HTML 大小逐漸的變大。通常，開發人員最後才會感到壓力，當他們用一個強大的 8 核工作站後面，使用 T3 internet 時，沒有人關心速度，這隨著延遲或 cpu 受限裝置的出現而改變。
優化 CSS 需要一個多維的方法。雖然手工編寫的程式碼可以使用各種技術進行簡化，但是手工檢查框架程式碼是低效的。在這些情況下，使用自動化的簡化會產生更好的結果。
下面的步驟將帶我們進入 CSS 優化的世界。並不是每一個都可以直接應用到你的專案中，但是一定要記住它們。
01. 使用簡寫
使用縮寫語句，如下面所示的 margin 宣告，可以從根本上減小 CSS 檔案的大小。在 google 上搜尋 CSS Shorthand 可以找到許多其他的速記形式。
p {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
}
p {
margin: 1px 2px 3px 4px;
}
複製程式碼02. 查詢並刪除未使用的 CSS
刪除不必要的部分 CSS，j 顯然會加快網頁的載入速度。谷歌的 Chrome 瀏覽器有這種開箱即用的功能。只需轉到檢視>開發人員>開發人員工具，並在最近的版本中開啟 Sources 選項卡，然後開啟命令選單。然後，選擇 Show Coverage，在 Coverage analysis 視窗中高亮顯示當前頁面上未使用的程式碼，讓您大開眼界。
開啟谷歌瀏覽器開發都工具，在 Conlse 旁邊更多選擇 Coverage，就可以看到未使用的 CSS, 點選對應的項，高亮顯示當前頁面上未使用的程式碼，讓你大開眼界：
03. 以更便捷的方式做到這一點
在逐行分析中導航並不一定便捷，使用谷歌瀏覽器的 Audits 就可以快速幫我們分析，使用方式，開啟開發者工具，點選 Audits 欄位，點選 Run audits 後就開始分析結果。
04. 注意這些問題
請記住，對 CSS 的自動分析總是會導致錯誤。用壓縮後的 CSS 檔案替換 未壓縮 CSS 檔案之後，對整個網站進行徹底的測試——沒有人知道優化器會導致什麼錯誤。
05. 內聯關鍵 CSS
載入外部樣式表需要花費時間，這是由於延遲造成的——因此，可以把最關鍵的程式碼位放在 head 中。但是，請確保不要做得過火，記住，執行維護任務的人員也必須讀取程式碼。
<html>
<head>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
複製程式碼06. 允許反並行解析
@import 將 CSS 樣式方便新增程式碼中。遺憾的是，這些好處並不是沒有代價的:由於 @import 可以巢狀，因此無法並行解析它們。更並行的方法是使用一系列 標記，瀏覽器可以立即獲取這些標記。
@import url("a.css"); @import url("b.css"); @import url("c.css");
<link rel="stylesheet" href="a.css" />
<link rel="stylesheet" href="b.css" />
<link rel="stylesheet" href="c.css" />
複製程式碼07. 用 CSS 替換圖片
幾年前，一套半透明的 png 在網站上建立半透明效果是司空見慣的。現在，CSS 過 濾器提供了一種節省資源的替代方法。例如，以下這個程式碼片段可以確保所討論的圖片顯示為其自身的灰度版本。
img {
-webkit-filter: grayscale(100%);
/* old safari */
filter: grayscale(100%);
}
複製程式碼08. 使用顏色快捷方式
常識告訴我們，六位數的顏色描述符是表達顏色最有效的方式。事實並非如此——在某些情況下，速記描述或顏色名稱可以更短。
target {
background-color: #ffffff;
}
target {
background: #fff;
}
複製程式碼09. 刪除不必要的零和單位
CSS 支援多種單位和數字格式。它們是一個值得感謝的優化目標——可以刪除尾隨和跟隨的零，如下面的程式碼片段所示。此外，請記住，零始終是零，新增維度不會為包含的資訊附帶價值。
padding: 0.2em;
margin: 20em;
avalue: 0px;
padding: 0.2em;
margin: 20em;
avalue: 0;
複製程式碼10. 消除過多分號
這種優化需要謹慎，因為它會影響程式碼的更改。CSS 的規範允許省略屬性組中的最後一個分號。由於這種優化方法所節省的成本很小，所以我們主要針對那些正在開發自動優化的程式設計師說明這一點。
p {
. . . font-size: 1.33em;
}
複製程式碼程式碼部署後可能存在的 BUG 沒法實時知道，事後為了解決這些 BUG，花了大量的時間進行 log 除錯，這邊順便給大家推薦一個好用的 BUG 監控工具 Fundebug。
11. 使用紋理圖集
由於協議開銷的原因，載入多個小圖片的效率很低。CSS 精靈將一系列小圖片組合成一個大的 PNG 檔案，然後通過 CSS 規則將其分解。TexturePacker 等程式大大簡化了建立過程。
.download {
width: 80px;
height: 31px;
background-position: -160px -160px;
}
.download:hover {
width: 80px;
height: 32px;
background-position: -80px -160px;
}
複製程式碼12. 省略 px
提高效能的一個簡單方法是使用 CSS 標準的一個特性。為 0 的數值預設單位是 px—— 刪除 px 可以為每個數字節省兩個位元組。
h2 {
padding: 0px;
margin: 0px;
}
h2 {
padding: 0;
margin: 0;
}
複製程式碼13. 避免需要效能要求的屬性
分析表明，一些標籤比其他標籤更昂貴。以下這些解析會影響效能—如果在沒有必要的情況，儘量不要使用它們。
border-radius
box-shadow
transform
filter
:nth-child
position: fixed;
複製程式碼14. 刪除空格
空格——考慮製表符、回車符和空格——使程式碼更容易閱讀，但從解析器的角度看，它沒有什麼用處。在釋出前刪除它們，更好的方法是將此任務委託給 shell 指令碼或類似的工具。
15. 刪除註釋
註釋對編譯器也沒有任何作用。建立一個自定義解析器，以便在釋出之前刪除它們。這不僅節省了頻寬，而且還確保攻擊者和克隆者更難理解手頭程式碼背後的思想。
16. 使用自動壓縮
Yahoo 的使用者體驗團隊建立了一個處理許多壓縮任務的應用程式。它以 JAR 檔案的形式釋出，在這裡可用，並且可以使用所選的 JVM 執行。
java -jar yuicompressor-x.y.z.jar
Usage: java -jar yuicompressor-x.y.z.jar
[options] [input file]
Global Options
-h, --help Displays this
information
--type <js|css> Specifies the
type of the input file
複製程式碼17. 在 NPM 執行它
如果你希望將產品整合到 Node.JS 中，請訪問 npmjs.com/package/yui…。維護不良的儲存庫包含一組包裝器檔案和 JavaScript API。
var compressor = require('yuicompressor');
compressor.compress('/path/to/
file or String of JS', {
//Compressor Options:
charset: 'utf8',
type: 'js',
複製程式碼18. 保持 Sass 的檢查
雖然 CSS 選擇器的效能不像幾年前那麼重要(請參閱參考資料)，但是像 Sass 這樣的框架有時會產生非常複雜的代，不時檢視輸出檔案，並考慮優化結果的方法。
19. 設定快取
有句老話說，最快的檔案永遠不會通過網路傳送。讓瀏覽器快取請求有效地實現這一點。遺憾的是，快取頭的設定必須在伺服器上進行。充分上面講的的兩個 Chrome 工具，它們提供了一種快速分析更改結果的方法。
20. 打破快取
設計人員通常不喜歡快取，因為他們擔心瀏覽器會快取上次的樣式表。解決這個問題的一個簡單方法是包含帶有檔名的標記。遺憾的是，由於一些代理拒絕快取具有“動態”路徑的檔案，此步驟所附帶的程式碼中概述的方案並不適用於所有地方。
<link rel="stylesheet" href="style.css?v=1.2.3" />
複製程式碼21. 不要忘記基礎知識
優化 CSS 只是遊戲的一部分。如果你的伺服器不使用 HTTP/2 和 gzip 壓縮，那麼在資料傳輸期間會損失很多時間。幸運的是，解決這兩個問題通常很簡單。我們的示例顯示了對常用 Apache 伺服器的一些調整。如果您發現自己在一個不同的系統上，只需參考伺服器文件即可。
pico /etc/httpd/conf/httpd.conf
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
複製程式碼關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有Google、360、金山軟體、百姓網等眾多品牌企業。歡迎大家免費試用！
