公衆号：web前端開發
來源 |
https://github.com/qq449245884/xiaozhi/issues/28CSS 必須通過一個相對複雜的管道，就像 HTML 和 JavaScript一樣，浏覽器必須從伺服器下載下傳檔案，然後進行解析并将其應用于DOM。由于優化程度極高，這個過程通常非常快——對于不基于架構的小型 web 項目，CSS通常隻占總資源消耗的一小部分。
架構打破了這種平衡。包括一個 JavaScript GUI 堆棧，如 jQuery UI，可以觀察 CSS, JS 和 HTML大小逐漸的變大。通常，開發人員最後才會感到壓力，當他們用一個強大的 8 核工作站後面，使用 T3 internet 時，沒有人關心速度，這随着延遲或 cpu 受限裝置的出現而改變。
優化CSS需要一個多元的方法。雖然手工編寫的代碼可以使用各種技術進行簡化，但是手工檢查架構代碼是低效的。在這些情況下，使用自動化的簡化會産生更好的結果。
下面的步驟将帶我們進入 CSS 優化的世界。并不是每一個都可以直接應用到你的項目中，但是一定要記住它們。
01. 使用簡寫
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> 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: 20.0em;
avalue: 0px;
padding: .2em;
margin: 20em;
avalue: 0; 10. 消除過多分号
這種優化需要謹慎，因為它會影響代碼的更改。CSS的規範允許省略屬性組中的最後一個分号。由于這種優化方法所節省的成本很小，是以我們主要針對那些正在開發自動優化的程式員說明這一點。
p {
. . .
font-size: 1.33em
} 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/yuicompressor。維護不良的存儲庫包含一組包裝器檔案和
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