HTTP系列之Accept-Encoding和Content-Encoding

前端的性能優化是一個永不停歇的路程，優化的方式也不一而足，今天重點不在於介紹性能優化，而是介紹性能優化的其中一種方式，經過壓縮來節省http請求的流量，實現過程當中依賴http中header部分的兩個字段，Accept-Encoding和Content-EnCoding（分別來自request的header和response的header）。

前兩天排查一個問題是注意到項目裏ssr時返回的頁面居然沒有壓縮，頁面體積大小高達182k，因而着手優化這部分。首先咱們先了解下Accept-Encoding和Content-Encoding的做用。

含義與做用

爲何首先要講這兩個字段的含義呢？由於當你打開一個頁面時，請求到了服務端，若是請求上沒有這種編碼的標識的話，服務端是不知道該不應壓縮？使用哪一種方式壓縮的？因此request請求header裏的Accept-Encoding就是用來告訴服務端客戶端是支持哪些編碼方式的，通常的值有gzip/compress/deflate/br等，能夠多個，中間用逗號隔開。如：

Accept-Encoding: gzip, deflate, br
複製代碼

當服務端接收到請求，而且從header裏拿到編碼標識時，就能夠選擇其中一種方式來進行編碼壓縮，而後返給客戶端，可是若是response的header裏沒有編碼標識的話，客戶端就不知道服務端是用的哪一種方式壓縮的，因此須要Content-Encoding來標識服務端壓縮時所用的壓縮方式。

綜上，Accept-Encoding用來標識客戶端可以理解的內容編碼方式。 Content-Encoding用來標識主體進行了何種方式的內容編碼轉換。

node中的使用

項目中使用的node實現的ssr，所以重要討論下在node中實現壓縮來完成性能的優化。實現代碼簡化以下：

const http = require('http');
const zlib = require('zlib');

const server = http.createServer(function(req,res){
	//...其餘邏輯
	const acceptEncoding = req.headers['accpent-encoding'];
	if(!!acceptEncoding.match(/\bgzip\b/)){
		zlib.gzip(body,function(err,data){
			if(err){
				//...錯誤處理邏輯
			}
			res.setHeader('content-encoding','gzip');
			res.setHeader('content-length',body.length);
			res.end(body);
		})
	}
	// ...非gzip處理
});
複製代碼

node中壓縮是經過zlib來實現的，首先判斷accept-Encoding裏是否有gzip，有的話經過zlib壓縮，並在response的header中標識。很簡單吧！

結語

以前看http老是感受很枯燥，看不下去，但經過與項目中的實踐相結合仍是蠻有意思的，好比此次雖然是一個比較小的優化點，可是仍是有點成就感的。

若是本文對你有些許幫助，就請你點個贊鼓勵下！