在瀏覽器向服務器請求靜態資源時,服務器爲了減少在網絡傳輸過程當中消耗的流量和時間,都是將靜態資源通過壓縮後返回給服務器的,實現壓縮的算法有 deflate
和 gzip
等,最經常使用的是 gzip
壓縮。html
在瀏覽器和服務器之間經過 gzip
壓縮流實現傳輸的過程能夠用下圖表示。算法
當瀏覽器向服務器請求靜態資源,服務器會將靜態資源通過處理轉換爲壓縮流,大大減少文件體積,而後將壓縮流返回給瀏覽器,瀏覽器經過壓縮的類型從新將壓縮流解析成靜態文件。瀏覽器
在 NodeJS 中經過 zlib
模塊幫助咱們實現不一樣類型的壓縮,其實壓縮的過程就是建立流的過程,建立的壓縮流是 Transform 類型(轉化流),讀取文件的內容通過轉化流建立一個新類型的文件。服務器
// 文件:gzip.js const zlib = require("zlib"); const fs = require("fs"); const path = require("path"); // 壓縮 function gzip(source) { // 處理輸入和輸出的文件路徑 let sourcePath = path.join(__dirname, source); let gzipPath = `${sourcePath}.gz`; // 建立轉化流 let gzip = zlib.createGzip(); // 建立可讀流 let rs = fs.createReadStream(sourcePath); // 建立可寫流 let ws = fs.createWriteStream(gzipPath); // 實現轉化 rs.pipe(gzip).pipe(ws); } gzip("index.html");
執行上面代碼查看根目路是否出現 index.gz
壓縮包。網絡
壓縮的過程是可逆的,能夠壓縮就能夠解壓,不管是在瀏覽器仍是在服務器,咱們下面實現解壓的方法。工具
// 文件:gunzip.js const zlib = require("zlib"); const fs = require("fs"); const path = require("path"); // 解壓 function gunzip(source) { // 處理輸入和輸出的文件路徑 let sourcePath = path.join(__dirname, source); let filePath = path.join(__dirname, path.basename(source, ".gz")); // 建立轉化流 let unzip = zlib.createGunzip(); // 建立可讀流 let rs = createReadStream(sourcePath); // 建立可寫流 let ws = createWriteStream(filePath); // 實現轉化 rs.pipe(unzip).pipe(ws); } gunzip("index.html.gz");
刪除原來 index.html
,執行解壓代碼,查看文件根目錄是否生成 index.html
。測試
在瀏覽器與服務器的交互中,瀏覽器其實會經過請求頭 Accept-Encoding
告訴服務器當前支持解壓的壓縮格式,值爲 gzip, deflate, br
,多個壓縮格式用 ,
隔開,服務器在接收到瀏覽器請求後,會按照請求頭的格式壓縮資源,將壓縮後的資源返回,並經過響應頭 Content-Encoding
告訴瀏覽器當前服務器壓縮的格式。優化
// 文件:server.js // 引入依賴 const http = require("http"); const url = require("url"); const path = require("path"); const fs = require("fs"); const zlib = require("zlib"); // 建立服務器 const server = http.createServer((req, res) => { // 處理 pathname,"/" 時默認讀取 "/index.html" let { pathname } = url.parse(req.url, true); pathname = pathname !== "/" ? pathname : "/index.html"; // 獲取讀取文件的絕對路徑 let p = path.join(__dirname, pathname); // 查看路徑是否合法 fs.access(p, err => { // 路徑不合法則直接中斷鏈接 if (err) return res.end("Not Found"); // 獲取瀏覽器支持的壓縮格式 let encoding = req.headers["accept-encoding"]; // 建立可讀流 let rs = fs.createReadStream(p); // 支持 gzip 使用 gzip 壓縮,支持 deflate 使用 deflate 壓縮 if (encoding && encoding.match(/\bgzip\b/)) { let compress = zlib.createGzip(); let compressType = "gzip"; } else if (encoding && encoding.match(/\bdeflate\b/)) { let compress = zlib.createDeflate(); let compressType = "deflate"; } else { // 不然直接返回可讀流 return rs.pipe(res); } // 將壓縮流返回並設置響應頭 res.setHeader("Content-Encoding", compressType); rs.pipe(compress).pipe(res); }); }); server.listen(3000, () => { console.log("server start 3000"); });
在上面服務器中若是不經過響應頭通知瀏覽器當前資源的壓縮格式,瀏覽器會不知道該如何解壓,默認會當成文件下載,如 Chrome,因此在返回壓縮流時必須經過 Content-Encoding
響應頭通知瀏覽器當前的壓縮格式。ui
咱們在文件根目錄建立一個 index.html
文件,代碼以下。url
<!-- 文件:index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>gzip</title> </head> <body> <div>Hello GZIP!</div> </body> </html>
啓動服務器 server.js
,而後經過瀏覽器訪問 localhost:3000,查看頁面可否正確返回,並查看開發者工具 Network 中的響應頭 Content-Encoding
的值是否正確。
服務器壓縮實際上是客戶端與服務器在網絡傳輸時的一種優化手段,能夠大大減少流量的消耗和響應時間,而 gzip
只是目前最經常使用的一種壓縮格式,即壓縮算法。