Web 性能優化：21 種優化 CSS 和加快網站速度的方法

時間 2019-11-17

標籤 web 性能優化 css 加快網站速度方法欄目 HTML 简体版

原文原文鏈接

摘要： 優化CSS。javascript

原文：Web 性能優化：21 種優化 CSS 和加快網站速度的方法
做者：前端小智

Fundebug經受權轉載，版權歸原做者全部。css

這是 Web 性能優化的第 4 篇，上一篇在下面看點擊查看：html

CSS 必須經過一個相對複雜的管道，就像 HTML 和 JavaScript 同樣，瀏覽器必須從服務器下載文件，而後進行解析並將其應用於 DOM。因爲優化程度極高，這個過程一般很是快——對於不基於框架的小型 web 項目，CSS 一般只佔總資源消耗的一小部分。前端

框架打破了這種平衡。包括一個 JavaScript GUI 堆棧，如 jQuery UI，能夠觀察 CSS, JS 和 HTML 大小逐漸的變大。一般，開發人員最後纔會感到壓力，當他們用一個強大的 8 核工做站後面，使用 T3 internet 時，沒有人關心速度，這隨着延遲或 cpu 受限設備的出現而改變。java

優化 CSS 須要一個多維的方法。雖然手工編寫的代碼可使用各類技術進行簡化，可是手工檢查框架代碼是低效的。在這些狀況下，使用自動化的簡化會產生更好的結果。webpack

下面的步驟將帶咱們進入 CSS 優化的世界。並非每個均可以直接應用到你的項目中，可是必定要記住它們。程序員

01. 使用簡寫

使用縮寫語句，以下面所示的 margin 聲明，能夠從根本上減少 CSS 文件的大小。在 google 上搜索 CSS Shorthand 能夠找到許多其餘的速記形式。web

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 窗口中高亮顯示當前頁面上未使用的代碼，讓您大開眼界。shell

打開谷歌瀏覽器開發都工具，在 Conlse 旁邊更多選擇 Coverage，就能夠看到未使用的 CSS, 點擊對應的項，高亮顯示當前頁面上未使用的代碼，讓你大開眼界：npm

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、金山軟件、百姓網等衆多品牌企業。歡迎你們免費試用！