簡(jiǎn)介

GZip 是一種改進(jìn)web應(yīng)用程序性能的技術(shù)，文件壓縮后再傳輸可以減少傳輸數(shù)據(jù)，提升傳輸速度。在Nginx服務(wù)器上開啟Gzip壓縮可以有效減少網(wǎng)絡(luò)傳輸流量，提升網(wǎng)站的訪問速度和性能。

可以作用于任何字節(jié)流的通用壓縮程序。它會(huì)在后臺(tái)記憶一些之前看到的內(nèi)容，并嘗試以高效方式查找并替換重復(fù)的數(shù)據(jù)片段，從而達(dá)到較好的壓效果。但使用 gzip 壓縮的最大錯(cuò)誤之一就是用 gzip 壓縮頁面中的每個(gè)資源文件。

支持資源類型

實(shí)際上，GZip 主要用于對(duì)文本類型的資源進(jìn)行壓縮，例如常用見的文本資源：

• HTML 文件：text/HTML（默認(rèn)壓縮）、application/xhtml+xml
• CSS 文件：text/css
• JS 文件：application/x-javascript、application/javascript、text/javascript
• JSON文件：application/json、application/geo+json、application/ld+json application/manifest+json、application/x-web-app-manifest+json
• XML 文件：application/xml、application/atom+xml、application/rdf+xml、application/rss+xml
• SVG 文件：image/svg+xml;

GZip 對(duì)基于文本的內(nèi)容的資源壓縮效果最好，在壓縮較大文件時(shí)往往可實(shí)現(xiàn)高達(dá) 70-90% 的壓縮率，而如果對(duì)已經(jīng)通過替代算法壓縮過的資源（例如，大多數(shù)圖片格式）運(yùn)行 gzip，則效果甚微，甚至毫無效果。

瀏覽器支持情況

如圖所示，目前所有主流的現(xiàn)代瀏覽器都支持 gzip 壓縮，如下圖所示：

圖片

瀏覽器在發(fā)送請(qǐng)求時(shí)會(huì)自動(dòng)請(qǐng)求該壓縮編碼的格式，如下圖的請(qǐng)求頭信息所示：

圖片

瀏覽器會(huì)自動(dòng)在請(qǐng)求頭（Reqeust header s）信息中添加 Accept-Encoding: gzip 向服務(wù)器請(qǐng)求壓縮編碼格式的文件，gzip 壓縮編碼格式就在其中。

啟用GZip

Nginx是否支持 GZip

nginx 中的 gzip 處理模塊是：ngx_http_gzip_module?？梢允褂茫簄ginx -V 命令，查看 nginx 服務(wù)器是否開啟了對(duì) gzip 的支持模塊：

圖片

如果顯示如上圖所示的：–with-http_gzip_ static _module，就說明你的nginx服務(wù)器已經(jīng)支持 gzip 了，可以開始配置 gzip 壓縮了。

未開啟GZIP壓縮

模擬網(wǎng)速慢未開啟壓縮。首先我們對(duì)nginx進(jìn)行限速操作，限制每個(gè)連接的訪問速度為128K來建立一個(gè)比較慢的訪問場(chǎng)景。

修改mall.conf配置文件，進(jìn)行限速操作

server {
    listen       80;
    server_name  mall.tinywan.com;
    
    limit_rate 128k; # 限制網(wǎng)速為128K

    location / {
        root   /usr/share/nginx/html/mall;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

對(duì)mall的前端項(xiàng)目mall.tinywan.com進(jìn)行訪問，我們可以發(fā)現(xiàn)網(wǎng)站中有個(gè)js文件比較大，需要加載12s。

圖片

Nginx 返回請(qǐng)求頭信息如下

圖片

開啟GZIP壓縮

開啟Gzip模塊。在Nginx配置文件中的http塊內(nèi)添加以下內(nèi)容：

http {
    gzip on;
    gzip_types text/plain application/javascript;
}

這里的gzip on表示開啟gzip壓縮，gzip_types指定需要進(jìn)行壓縮的文件類型，例如text/plain表示純文本文件，application/javascript表示JavaScript文件。

完整配置文件

http {

    gzip on; #開啟gzip
    gzip_disable "msie6"; #IE6不使用gzip
    gzip_vary on; #設(shè)置為on會(huì)在Header里增加 "Vary: Accept-Encoding"
    gzip_proxied any; #代理結(jié)果數(shù)據(jù)的壓縮
    gzip_comp_level 6; #gzip壓縮比（1~9），越小壓縮效果越差，但是越大處理越慢，所以一般取中間值
    gzip_buffers 16 8k; #獲取多少內(nèi)存用于緩存壓縮結(jié)果
    gzip_http_version 1.1; #識(shí)別http協(xié)議的版本
    gzip_min_length 1k; #設(shè)置允許壓縮的頁面最小字節(jié)數(shù)，超過1k的文件會(huì)被壓縮
    gzip_types application/javascript text/css; #對(duì)特定的MIME類型生效,js和css文件會(huì)被壓縮

    include /etc/nginx/conf.d/*.conf;
}

再次對(duì)mall的前端項(xiàng)目mall.tinywan.com進(jìn)行訪問，我們可以發(fā)現(xiàn)js文件已經(jīng)被壓縮，加載時(shí)間縮短到3.88s，提速3倍左右：

圖片

Nginx返回請(qǐng)求頭中添加了Content-Encoding: gzip的信息

圖片

總結(jié)

在服務(wù)器端 Nginx 啟用 gzip 壓縮，對(duì)于目前流行的單頁面應(yīng)用而言，起到的前端性能優(yōu)化作用的意義就更大了，因?yàn)閱雾撁鎽?yīng)用的界面完全是由 JavaScript 動(dòng)態(tài)繪制出來的，啟用 gzip 壓縮更快速的加載資源文件，特別是 JavaScript 腳本文件，就能盡快地顯示界面，從而提升用戶體驗(yàn)。

啟用 gzip 壓縮除了優(yōu)化了頁面的加載速度外，而對(duì)于公司來講，啟用 gzip 壓縮后，網(wǎng)站對(duì)于網(wǎng)絡(luò)帶寬的需求也降低了，或者說是在現(xiàn)有的帶寬情況下，能夠更加充分的利用帶寬資源，從長期效益來看，也可以間接的降低公司在帶寬上的運(yùn)行成本。