前端性能優化成神之路—資源合併與壓縮減小HTTP請求

資源合併與壓縮減小HTTP請求的概要

資源合併與壓縮減小HTTP請求主要的兩個優化點是減小HTTP請求的數量和減小請求資源的大小

http協議是無狀態的應用層協議，意味着每次http請求都須要創建通訊鏈路、進行數據傳輸，而在服務器端，每一個http都須要啓動獨立的線程去處理。

這些通訊和服務的開銷都很昂貴，減小http請求的數量和減小請求資源的大小可有效提升訪問性能

減小http的主要手段是合併CSS、合併JavaScript、合併圖片。將瀏覽器一次訪問須要的javascript和CSS合併成一個文件，這樣瀏覽器就只須要一次請求。

圖片也能夠合併，多張圖片合併成一張，若是每張圖片都有不一樣的超連接，可經過CSS偏移響應鼠標點擊操做，構造不一樣的URL。將圖片base64，這樣也能夠減小請求

 

 

HTML壓縮

首先咱們來看一下新浪的首頁是沒有進行html壓縮的有空格換行等等

再來看看百度首頁是有作html壓縮的

HTML代碼壓縮就是壓縮這些文件在文本文件中有意義，可是html中不顯示的字符，包括空格，製表符，換行符等，還有一些其餘意義的字符，好比HTML註釋也能夠被壓縮

在編寫代碼的過程當中空格，換行這些是頗有意義的，能夠比較容易看懂，可是瀏覽器不會在意這些

HTML代碼壓縮的方法有以下幾種：使用在線網站進行壓縮，  同構構建工具好比（fis3，webpack）自動壓縮，nodejs提供了html-minifier工具，後端模板引擎渲染壓縮

 

 

CSS壓縮

下面首先來看一下百度首頁的css壓縮代碼，去掉了回車和空格，還作了無效代碼刪除（註釋，無效的字符），css語義合併

CSS代碼壓縮的方法有以下幾種：使用在線網站進行壓縮，  同構構建工具好比（fis3，webpack）自動壓縮，nodejs提供了html-minifier工具對html中的css進行壓縮，使用clean-css對css進行壓縮

 

 

 

JS的壓縮和混亂

首先來看一下百度首頁對js的壓縮，主要對js作如下四件事情：無效字符的刪除（空格，回車），剔除註釋，代碼語義的縮減和優化（將一些變量的長度進行縮短等），代碼保護（js代碼是能夠在客戶端看到的，將js代碼混亂後就變的不容易看懂，對代碼進行了必定的保護做用）

JS代碼壓縮的方法有以下幾種：使用在線網站進行壓縮， nodejs提供了html-minifier工具對html中的js進行壓縮，使用uglifyjs2對js進行壓縮

 

 

 

文件合併

左邊是不合並請求，右邊是合併請求

不合並請求存在的問題：文件與文件之間有插入的上行請求，增長了N-1個網絡延遲，受丟包問題影響更嚴重，通過代理服務器時可能會被斷開

合併請求存在的問題

首屏渲染的問題（文件合併以後生成的那個文件比較大，請求時間會比較長，就會致使首屏渲染比較慢的問題（vue，react等單頁面應用框架））

緩存失效問題（js文件是有緩存的，在標記這個js是否有改變是經過js後面加上一個MD5戳，惟一表示這個js文件改變，若是a.js，b.js,.....任何一個文件改變都會致使合併後的js文件改變，這樣緩存的js就無效了，當只是a.js改變原本只是a.js的緩存失效，而不會大面積的js緩存失效，這就是緩存失效的問題）

那麼在合併js文件的時候須要注意的是：

對公共庫的js代碼進行合併（公共庫改變大部分狀況下是不會改的），將業務代碼單獨打包成一個文件，或者不進行合併（由於改動會比較大比較頻繁），這樣改變了業務代碼不會影響公共庫的js的緩存

不一樣頁面的合併，

 

 

 

開啓HTTP的gzip壓縮

查看前端性能優化成神之路-HTTP壓縮開啓gzip這篇文章 

 

 

圖片壓縮

查看：前端性能優化成神之路—圖片相關的優化