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

1、前端性能優化的一點:

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

 

2、前端性能優化的另一點:

對HTTP傳輸進行壓縮,即在js,css、圖片等資源已經壓縮的基礎上(其實,文件的壓縮與否均可,文件的壓縮跟HTTP傳輸過程的壓縮沒關係),在HTTP傳輸過程中的再次壓縮。

 

3、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查看

 

4、壓縮方式選擇:

gzipGUNzip的縮寫,使用無損壓縮,壓縮效果最佳,已經成爲使用最爲普遍、支持的瀏覽器最多的數據壓縮格式。

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

 

5、如何使用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資源來做無用功。
 

6、對HTTP傳輸內容進行壓縮的優、缺點:

① 優點:減少HTTP響應時間,提升傳輸效率。

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

隨着硬件性能不斷提高,上述問題正在不斷弱化,國內外大型網站都對HTTP傳輸進行壓縮。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章