短影片開發app，利用資料壓縮加速大檔案傳輸

短影片開發app，利用資料壓縮加速大檔案傳輸

當使用 HTTP 進行大檔案傳輸時，我們可以考慮對大檔案進行壓縮。通常短影片開發app在傳送請求時，都會攜帶 accept 和 accept-* 請求頭資訊，用於告訴伺服器當前短影片開發app所支援的檔案型別、支援的壓縮格式列表和支援的語言。

accept: */*
accept-encoding: gzip, deflate, br
accept-language: zh-CN,zh;q=0.9

gzip 的壓縮率通常能夠超過 60%，而 br 演算法是專門為 HTML 設計的，壓縮效率和效能比 gzip 還要好，能夠再提高 20% 的壓縮密度。

上述 HTTP 請求頭中的 Accept-Encoding 欄位，用於將客戶端能夠理解的內容編碼方式（通常是某種壓縮演算法）告訴給服務端。透過內容協商的方式，短影片開發app服務端會選擇一個客戶端所支援的方式，並透過響應頭 Content-Encoding 來通知客戶端該選擇。

cache-control: max-age=2592000
content-encoding: gzip
content-type: application/x-javascript

以上的響應頭告訴瀏覽器返回的 JS 指令碼，是經過 gzip 壓縮演算法處理過的。不過需要注意的是，gzip 等壓縮演算法通常只對文字檔案有較好的壓縮率，而圖片、音影片等多媒體檔案資料本身就已經是高度壓縮的，再用 gzip 進行壓縮也不會有好的壓縮效果，甚至還可能會出現變大的情況。
瞭解完 Accept-Encoding 和 Content-Encoding 欄位，我們來驗證一下未開啟 gzip 和開啟 gzip 的效果。

1.1 未開啟 gzip

const fs = require("fs");
const http = require("http");
const util = require("util");
const readFile = util.promisify(fs.readFile);
const server = http.createServer(async (req, res) => {
  res.writeHead(200, {
    "Content-Type": "text/plain;charset=utf-8",
  });
  const buffer = await readFile(__dirname + "/big-file.txt");
  res.write(buffer);
  res.end();
});
server.listen(3000, () => {
  console.log("app starting at port 3000");
});

1.2 開啟 gzip

const fs = require("fs");
const zlib = require("zlib");
const http = require("http");
const util = require("util");
const readFile = util.promisify(fs.readFile);
const gzip = util.promisify(zlib.gzip);
const server = http.createServer(async (req, res) => {
  res.writeHead(200, {
    "Content-Type": "text/plain;charset=utf-8",
    "Content-Encoding": "gzip"
  });
  const buffer = await readFile(__dirname + "/big-file.txt");
  const gzipData = await gzip(buffer);
  res.write(gzipData);
  res.end();
});
server.listen(3000, () => {
  console.log("app starting at port 3000");
});

觀察上面兩張圖，我們可以直觀感受到當傳輸 5.5 MB 的 big-file.txt 檔案時，若開啟 gzip 壓縮後，檔案被壓縮成 256 kB。這樣就大大加快了短影片開發app檔案的傳輸。在實際工作場景中，我們可以使用 nginx 或 koa-static 來開啟 gzip 壓縮功能。

以上就是短影片開發app，利用資料壓縮加速大檔案傳輸， 更多內容歡迎關注之後的文章