前言： 如果你是個前端開發人員，你肯定知道線上環境要把js，css，圖片等壓縮，儘量減少文件的大小，提升響應速度，特別是對移動端，這個非常重要。常用的前端性能優化方法有如下幾種 一、減少http請求 二、CSS Sprites 三、使用CDN加速 四 、css,js代碼壓縮 五、將樣式表放在頭部，將 ...
前言：
如果你是個前端開發人員，你肯定知道線上環境要把js，css，圖片等壓縮，儘量減少文件的大小，提升響應速度，特別是對移動端，這個非常重要。常用的前端性能優化方法有如下幾種
一、減少http請求
二、CSS Sprites
三、使用CDN加速
四 、css,js代碼壓縮
五、將樣式表放在頭部，將腳本放在底部
六 精簡JavaScript
七 避免重定向
八 客戶端和服務端開啟gzip
下麵我們來著重講一下gzip
前端壓縮的方式很多，依賴java的有ant工具，前端自己打包壓縮的有grunt，gulp，webpack，這些壓縮也很重要，基本上能壓縮50%以上，下麵我們對壓縮文件來個對比，如圖所示，這是未壓縮的
這是壓縮後的
高能預警！！！gzip能在壓縮的基礎上再進行壓縮50%以上！！！
gzip壓縮原理
但是不是每個瀏覽器都支持gzip的，如果知道客戶端是否支持gzip呢，請求頭中有個Accept-Encoding來標識對壓縮的支持。客戶端http請求頭聲明瀏覽器支持的壓縮方式，服務端配置啟用壓縮，壓縮的文件類型，壓縮方式。當客戶端請求到服務端的時候，伺服器解析請求頭，如果客戶端支持gzip壓縮，響應時對請求的資源進行壓縮並返回給客戶端，瀏覽器按照自己的方式解析，在http響應頭，我們可以看到content-encoding:gzip，這是指服務端使用了gzip的壓縮方式。
那麼怎麼看有沒有用gzip壓縮的文件呢，打開f12，查看network，點擊“use large rows”表情來查看更多信息。包含了壓縮以後的大小和源文件的大小。
奇跡般的，主頁從187kb壓縮到了59kb。
content-encoding是gzip的話就說明返回的是gzip
還有一點 gzip不壓縮圖片，因為壓縮之後會更大- -，所以一般到是壓縮css和js
如何啟用gzip
前面說過了，啟用gzip需要客戶端和服務端的支持，如果客戶端支持gzip的解析，那麼只要服務端能夠返回gzip的文件就可以啟用gzip了，現在來說一下幾種不同的環境下的服務端如何配置
node端
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) }
如果用的是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的插件
nginx
gzip使用環境:http,server,location,if(x),一般把它定義在nginx.conf的http{…..}之間
- 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庫
警告
gzip壓縮的出現如此的令人振奮，但是還有以下三個註意點：
- 低版本瀏覽器：一些瀏覽器接受壓縮文件還是有問題（他們說他們可以但是他們並不行），如果你的站點必須在window95的網景1.0瀏覽器上，你可能不想要壓縮文件。Apache mod_deflate設置了一些忽略規則來專門為舊瀏覽器。
- 已經壓縮過的文件:大多數的圖片，音樂和視頻都已經壓縮過了，不要浪費時間來壓縮他們了。事實上，你可以只壓縮那三巨頭（HTML,CSS AND JAVARSCRIPT)。
- CPU負載：在傳輸過程中壓縮文件耗費CPU但是節省帶寬（用空間換時間）。通常壓縮速率的選擇需要權衡利弊。也存在一些預壓縮靜態文件的方法，但這要求更多的資源。考慮了cpu的耗費，壓縮文件也是利大於弊。通過壓縮實現更好的用戶體驗，更短的留白時間，值！
開啟gzip壓縮是優化網站最快的方法之一。大膽的用吧，讓你的用戶體驗更棒。
