天天看點

前端性能優化之gzip

背景

如果你是個前端開發人員,你肯定知道線上環境要把js,css,圖檔等壓縮,盡量減少檔案的大小,提升響應速度,特别是對移動端,這個非常重要。

壓縮

壓縮方式

前端壓縮的方式很多,依賴java的有ant工具,前端自己打包壓縮的有grunt,gulp,webpack,這些壓縮也很重要,基本上能壓縮50%以上,下面我們對壓縮檔案來個對比,如圖所示,這是未壓縮的

前端性能優化之gzip

這是壓縮後的

前端性能優化之gzip

高能預警!!!gzip能在壓縮的基礎上再進行壓縮50%以上!!!

前端性能優化之gzip

gzip壓縮原理

但是不是每個浏覽器都支援gzip的,如果知道用戶端是否支援gzip呢,請求頭中有個Accept-Encoding來辨別對壓縮的支援。用戶端http請求頭聲明浏覽器支援的壓縮方式,服務端配置啟用壓縮,壓縮的檔案類型,壓縮方式。當用戶端請求到服務端的時候,伺服器解析請求頭,如果用戶端支援gzip壓縮,響應時對請求的資源進行壓縮并傳回給用戶端,浏覽器按照自己的方式解析,在http響應頭,我們可以看到content-encoding:gzip,這是指服務端使用了gzip的壓縮方式。

前端性能優化之gzip

那麼怎麼看有沒有用gzip壓縮的檔案呢,打開f12,檢視network,按照下面的方式過濾

前端性能優化之gzip

content-encoding是gzip的話就說明傳回的是gzip

如何啟用gzip

前面說過了,啟用gzip需要用戶端和服務端的支援,如果用戶端支援gzip的解析,那麼隻要服務端能夠傳回gzip的檔案就可以啟用gzip了,現在來說一下幾種不同的環境下的服務端如何配置

node端

node端很簡單,隻要加上compress子產品即可,代碼如下

var compression = require('compression')
var app = express();

//盡量在其他中間件前使用compression
app.use(compression());           

這是基本用法,如果還要對請求進行過濾的話,還要加上

app.use(compression({filter: shouldCompress}))

function shouldCompress (req, res) {
  if (req.headers['x-no-compression']) {
    // 這裡就過濾掉了請求頭包含'x-no-compression'
    return false
  }

  return compression.filter(req, res)
}           

更多用法請移步compression文檔

如果用的是koa,用法和上面的差不多

const compress = require('koa-compress');
const app = module.exports = new Koa();
app.use(compress());           

因為node讀取的是生成目錄中的檔案,是以要先用webpack等其他工具進行壓縮成gzip,webpack的配置如下

const CompressionWebpackPlugin = require('compression-webpack-plugin');
plugins.push(
    new CompressionWebpackPlugin({
        asset: '[path].gz[query]',// 目标檔案名
        algorithm: 'gzip',// 使用gzip壓縮
        test: new RegExp(
            '\\.(js|css)$' // 壓縮 js 與 css
        ),
        threshold: 10240,// 資源檔案大于10240B=10kB時會被壓縮
        minRatio: 0.8 // 最小壓縮比達到0.8時才會被壓縮
    })
);           

plugins是webpack的插件

tomcat

tomcat的配置如下

找到tomcat的server.xml檔案,找到其中Connector節點然後進行配置修改,具體配置如下

<Connectorport="80"protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8" maxPostSize="0" useBodyEncodingForURI="true"compression="on" compressionMinSize="2048"noCompressionUserAgents="gozilla, traviata"compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,image/jpeg,application/json"/>           

參數說明:

  • compression="on" 打開壓縮功能
  • compressionMinSize="2048" 啟用壓縮的輸出内容大小,當被壓縮對象的大小>=該值時才會被壓縮,這裡面預設為2KB
  • noCompressionUserAgents="gozilla, traviata" 對于以下的浏覽器,不啟用壓縮
  • compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" 壓縮類型

注意:tomcat7以後,js檔案的mimetype類型變為了application/javascript,而在tomcat7以下則為text/javascript;具體的tomcat7定義的類型可以在:conf/web.xml檔案中找到。

可以在web.xml下搜尋,如我搜尋javascript會找到如下代碼

<mime-mapping>
    <extension>js</extension>
    <mime-type>application/javascript</mime-type>
</mime-mapping>           

nginx

  • gzip on

    on為啟用,off為關閉

  • gzip_min_length 1k

    設定允許壓縮的頁面最小位元組數,頁面位元組數從header頭中的Content-Length中進行擷取。預設值是0,不管頁面多大都壓縮。建議設定成大于1k的位元組數,小于1k可能會越壓越大。

  • gzip_buffers 4 16k

    擷取多少記憶體用于緩存壓縮結果,‘4 16k’表示以16k*4為機關獲得

  • gzip_comp_level 5

    gzip壓縮比(1~9),越小壓縮效果越差,但是越大處理越慢,是以一般取中間值;

  • gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php

    對特定的MIME類型生效,其中'text/html’被系統強制啟用

  • gzip_http_version 1.1

    識别http協定的版本,早起浏覽器可能不支援gzip自解壓,使用者會看到亂碼

  • gzip_vary on

    啟用應答頭"Vary: Accept-Encoding"

  • gzip_proxied off

    nginx做為反向代理時啟用,off(關閉所有代理結果的資料的壓縮),expired(啟用壓縮,如果header頭中包括"Expires"頭資訊),no-cache(啟用壓縮,header頭中包含"Cache-Control:no-cache"),no-store(啟用壓縮,header頭中包含"Cache-Control:no-store"),private(啟用壓縮,header頭中包含"Cache-Control:private"),no_last_modefied(啟用壓縮,header頭中不包含"Last-Modified"),no_etag(啟用壓縮,如果header頭中不包含"Etag"頭資訊),auth(啟用壓縮,如果header頭中包含"Authorization"頭資訊)

  • gzip_disable msie6

    (IE5.5和IE6 SP1使用msie6參數來禁止gzip壓縮 )指定哪些不需要gzip壓縮的浏覽器(将和User-Agents進行比對),依賴于PCRE庫

繼續閱讀