使用node.js压缩流优化http请求

前端性能优化一直是一个值得讨论的话题&＃xff0c;而节省每次HTTP请求的流量&＃xff0c;则是优化的一个重要的点&＃xff0c;比如Javascript文件、图片、样式表等进行压缩传输&＃xff0c;不仅使访问速度更快&＃xff0c;也可以有效的节省站点的流量。

HTTP的请求中带有一个头Content-Encoding来处理压缩。

常见的压缩模式&＃xff1a;

• GZIP
• Deflate

GZIP

GZIP最早由Jean-loup Gailly和Mark Adler创建&＃xff0c;用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz的文件&＃xff0c;它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式&＃xff0c;或者说一种文件格式。

Deflate

DEFLATE是同时使用了LZ77算法与哈夫曼编码&＃xff08;Huffman Coding&＃xff09;的一个无损数据压缩算法。 它最初是由Phil Katz为他的PKZIP归档工具第二版所定义的&＃xff0c;后来定义在RFC 1951规范中。

在node.js中使用压缩流

node.js中已经为我们提供了压缩的功能&＃xff0c;它的核心功能在zlib包里。

zlib模块提供通过 Gzip 和 Deflate/Inflate 实现的压缩功能。

使用方法

const zlib &＃61; require(&＃39;zlib&＃39;);
const fs &＃61; require(&＃39;fs&＃39;);
const path &＃61; require(&＃39;path&＃39;);let file &＃61; path.join(__dirname, &＃39;./1.txt&＃39;);
zip(file);function zip(file) {let gzip &＃61; zlib.createGzip(); //gzip是一个转换流fs.createReadStream(file).pipe(gzip).pipe(fs.createWriteStream(file &＃43; &＃39;.gz&＃39;));
}

可以看到用法非常简单&＃xff0c;使用createGzip可以创建一个gzip压缩流&＃xff0c;它是一个Transform转换流。首先使用待压缩的目标文件创建一个可读流&＃xff0c;将它pipe到gzip压缩流中&＃xff0c;再pipe到一个可写流中&＃xff0c;即可完成压缩。运行这段代码可以看到在模块目录下已经多了一个1.txt.gz的压缩包。

unzip(path.join(__dirname, &＃39;./1.txt.gz&＃39;));
function unzip(file) {let gunzip &＃61; zlib.createGunzip(file);fs.createReadStream(file).pipe(gunzip).pipe(fs.createWriteStream(path.basename(file, &＃39;.gz&＃39;)));
}


解压缩同样如此&＃xff0c;使用解压缩流即可。

使用压缩优化http请求

了解了压缩流的使用&＃xff0c;怎么样才能配合http来优化用户的请求呢&＃xff1f;

http有一个字段&＃xff0c;它描述了浏览器支持哪种压缩格式&＃xff1a;

Accept-Encoding: gzip, deflate, br


响应头

Content-Encoding: gzip


处理流程&＃xff1a;

1. 首先查看http请求头Accept-Encoding都支持哪些压缩格式
2. 根据不同的压缩格式将资源压缩并输出到浏览器
3. 对不同的压缩格式发送响应头Content-Encoding

实例代码&＃xff1a;

const http &＃61; require(&＃39;http&＃39;);
const url &＃61; require(&＃39;url&＃39;);
const path &＃61; require(&＃39;path&＃39;);
const fs &＃61; require(&＃39;fs&＃39;);
const zlib &＃61; require(&＃39;zlib&＃39;);let server &＃61; http.createServer((req, res) &＃61;> {let {pathname} &＃61; url.parse(req.url, true);if (pathname &＃61;&＃61;&＃61; &＃39;/&＃39;) {res.end(&＃39;请访问一个服务器上的文件 如http://localhost:3000/1.txt&＃39;);}let file &＃61; path.join(__dirname, pathname);fs.stat(file, (err, stat) &＃61;> {if (err) {res.end(&＃39;访问的文件不存在&＃39;);} else {let acceptEncoding &＃61; req.headers[&＃39;accept-encoding&＃39;]; //取得浏览器的accept-encoding头&＃xff0c;询问支持哪种压缩if (acceptEncoding.match(/\bgzip\b/)) { //浏览器支持gzip格式res.setHeader(&＃39;Content-Encoding&＃39;, &＃39;gzip&＃39;); //告知浏览器发送的数据是gzip压缩格式let gzip &＃61; zlib.createGzip();fs.createReadStream(file).pipe(gzip).pipe(res); //压缩后输出} else if (acceptEncoding.match(/\bdeflate\b/)) { //浏览器支持deflate格式let deflate &＃61; zlib.createDeflate();res.setHeader(&＃39;Content-Encoding&＃39;,&＃39;deflate&＃39;);fs.createReadStream(file).pipe(deflate).pipe(res); 压缩后输出} else {fs.createReadStream(file).pipe(res);}}});
});server.listen(3000, () &＃61;> {console.log(&＃39;服务器已启动在3000端口...&＃39;)
});


重要代码说明&＃xff1a;

let acceptEncoding &＃61; req.headers[&＃39;accept-encoding&＃39;];


取得浏览器的请求头&＃xff0c;查看支持哪些压缩格式&＃xff0c;因为某些老旧浏览器是不支持压缩的&＃xff0c;因此要针对不同的压缩格式分别处理。

if (acceptEncoding.match(/\bgzip\b/)) {


使用正则来进行判断&＃xff0c;看看是否支持gzip压缩

res.setHeader(&＃39;Content-Encoding&＃39;, &＃39;gzip&＃39;); //告知浏览器发送的数据是gzip压缩格式


使用setHeader来设置响应头&＃xff0c;告知浏览器此数据是经gzip压缩的&＃xff0c;这样浏览器才会正确处理&＃xff0c;否则浏览器并不识别gzip数据。

deflate格式的逻辑完全一样&＃xff0c;这样就可以做到http压缩以节省流量的目的。