淺談前端性能優化（二）——對HTTP傳輸進行壓縮

一、前端性能優化的一點：

對js、css、圖片等進行壓縮，儘量減少文件的大小，減小文件下載的時間，從而減小網頁響應的時間。

 

二、前端性能優化的另外一點：

對HTTP傳輸進行壓縮，即在js，css、圖片等資源已經壓縮的基礎上（其實，文件的壓縮與否都可，文件的壓縮跟HTTP傳輸過程的壓縮不要緊），在HTTP傳輸過程當中的再次壓縮。

 

三、HTTP1.1的Accept-Encoding和content-Encoding：

從HTTP1.1開始，客戶端能夠經過Accept-Encoding頭來聲明瀏覽器支持的壓縮方式，服務端經過content-Encoding來啓用壓縮，配置壓縮的文件類型，壓縮方式。當客戶端的請求到達服務器，服務器對資源進行壓縮後，返回給客戶端，客戶端按照相應的方式進行解析。

eg：

客戶端（HTTP請求頭）——accept-encoding: gzip, deflate, sdch, br

服務器（HTTP響應頭）——content-encoding:gzip

壓縮驗證查看效果：

文件傳輸前的大小——經過屬性查看

文件傳輸過程當中的大小——經過Network中的Size查看

 

四、壓縮方式選擇：

gzip是GUNzip的縮寫，使用無損壓縮，壓縮效果最佳，已經成爲使用最爲廣泛、支持的瀏覽器最多的數據壓縮格式。

天貓、淘寶、京東、蘇寧、騰訊、百度等大型網站都使用gzip壓縮方式。

 

五、如何使用gzip壓縮

客戶端不用作任何配置，在服務端配置便可，不一樣服務器的配置方法也不盡相同。

以tomcat服務器的配置爲例：

找到tomcat安裝目錄下的conf文件夾下的server.xml文件，進行以下配置，重啓tomcat便可：

①　compress="on" ：表示開啓壓縮。

②　compressionMinSize="2048"：表示對大於2KB的文件進行壓縮

③　compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,image/png,image/jpeg,image/gif"：表示將進行壓縮的文件類型，對js，css，圖片壓縮能夠大大提高壓縮效果。

注意：不該該對圖片進行再壓縮，由於圖片自己已經被壓縮過，若是再進行gzip壓縮，可能獲得的結果是和圖片自己大小相差不大，純粹是浪費服務器的CPU資源來作無用功。
 

六、對HTTP傳輸內容進行壓縮的優、缺點：

①　優勢：減小HTTP響應時間，提高傳輸效率。

②　缺點：壓縮過程佔用服務器額外的CPU週期，客戶端也要對壓縮文件進行解壓縮，這也須要佔用部分時間。