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老是感受很枯燥，看不下去，但经过与项目中的实践相结合仍是蛮有意思的，好比此次虽然是一个比较小的优化点，可是仍是有点成就感的。

若是本文对你有些许帮助，就请你点个赞鼓励下！