gzip壓縮http資源,提高網頁瀏覽速度,適合首屏加載速度優化

本文先從自己測試的例子開始演示,讓大家看看優化的效果,然後再介紹gizp的概念等

一. 測試案例

第一張圖片是沒有開啓gzip的效果,加載js文件3.6m花了3.11s
第二張圖片是開啓gzip的效果,加載同一個js文件大小被壓縮成了1.2m,花了1.84s

所以明顯可以看出來文件壓縮的效果還是很好的,大大的縮減了http資源請求的時間

圖片描述

圖片描述

二. gzip是什麼?

  1. 網頁壓縮即gzip

    網頁壓縮是一項由 WEB 服務器和瀏覽器之間共同遵守的協議,也就是說 WEB 服務器和瀏覽器都必須支持該技術,所幸的是現在流行的瀏覽器都是支持的,包括 IE、FireFox、Opera 等;服務器有 Apache 和 IIS 等。雙方的協商過程如下:  
      
    首先瀏覽器請求某個 URL 地址,並在請求的頭 (head) 中設置屬性 accept-encoding 值爲 gzip, deflate,表明瀏覽器支持 gzip 和 deflate 這兩種壓縮方式(事實上 deflate 也是使用 gzip 壓縮協議,下面我們會介紹二者之間的區別);

    WEB 服務器接收到請求後判斷瀏覽器是否支持壓縮,如果支持就傳送壓縮後的響應內容,否則傳送不經過壓縮的內容;
    瀏覽器獲取響應內容後,判斷內容是否被壓縮,如果是則解壓縮,然後顯示響應頁面的內容。

    在實際的應用中我們發現壓縮的比率往往在 3 到 10 倍,也就是本來 50k 大小的頁面,採用壓縮後實際傳輸的內容大小隻有 5 至 15k 大小,這可以大大節省服務器的網絡帶寬,同時如果應用程序的響應足夠快時,網站的速度瓶頸就轉到了網絡的傳輸速度上,因此內容壓縮後就可以大大的提升頁面的瀏覽速度。

  2. 配置啓用gzip

    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    #gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss image/jpeg image/gif image/png image/svg+xml;
    gzip_vary off;
    gzip_proxied expired no-cache no-store private auth;
    gzip_disable "MSIE [1-6].";


....排版還不太會....
參考鏈接

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