前端性能优化一直是一个值得讨论的话题,而节省每次HTTP请求的流量,则是优化的一个重要的点,比如javascript文件、图片、样式表等进行压缩传输,不仅使访问速度更快,也可以有效的节省站点的流量。
HTTP的请求中带有一个头Content-Encoding
来处理压缩。
常见的压缩模式:
- GZIP
- Deflate
GZIP
GZIP最早由Jean-loup Gailly和Mark Adler创建,用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz的文件,它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式,或者说一种文件格式。
Deflate
DEFLATE是同时使用了LZ77算法与哈夫曼编码(Huffman Coding)的一个无损数据压缩算法。 它最初是由Phil Katz为他的PKZIP归档工具第二版所定义的,后来定义在RFC 1951规范中。
在node.js中使用压缩流
node.js中已经为我们提供了压缩的功能,它的核心功能在zlib包里。
zlib模块提供通过 Gzip 和 Deflate/Inflate 实现的压缩功能。
使用方法
const zlib = require('zlib');
const fs = require('fs');
const path = require('path');
let file = path.join(__dirname, './1.txt');
zip(file);
function zip(file) {
let gzip = zlib.createGzip(); //gzip是一个转换流
fs.createReadStream(file).pipe(gzip).pipe(fs.createWriteStream(file + '.gz'));
}
复制代码
可以看到用法非常简单,使用createGzip可以创建一个gzip压缩流,它是一个Transform转换流。首先使用待压缩的目标文件创建一个可读流,将它pipe到gzip压缩流中,再pipe到一个可写流中,即可完成压缩。运行这段代码可以看到在模块目录下已经多了一个1.txt.gz的压缩包。
unzip(path.join(__dirname, './1.txt.gz'));
function unzip(file) {
let gunzip = zlib.createGunzip(file);
fs.createReadStream(file).pipe(gunzip).pipe(fs.createWriteStream(path.basename(file, '.gz')));
}
复制代码
解压缩同样如此,使用解压缩流即可。
使用压缩优化http请求
了解了压缩流的使用,怎么样才能配合http来优化用户的请求呢?
http有一个字段,它描述了浏览器支持哪种压缩格式:
Accept-Encoding: gzip, deflate, br
复制代码
响应头
Content-Encoding: gzip
复制代码
处理流程:
- 首先查看http请求头
Accept-Encoding
都支持哪些压缩格式 - 根据不同的压缩格式将资源压缩并输出到浏览器
- 对不同的压缩格式发送响应头
Content-Encoding
实例代码:
const http = require('http');
const url = require('url');
const path = require('path');
const fs = require('fs');
const zlib = require('zlib');
let server = http.createServer((req, res) => {
let {pathname} = url.parse(req.url, true);
if (pathname === '/') {
res.end('请访问一个服务器上的文件 如http://localhost:3000/1.txt');
}
let file = path.join(__dirname, pathname);
fs.stat(file, (err, stat) => {
if (err) {
res.end('访问的文件不存在');
} else {
let acceptEncoding = req.headers['accept-encoding']; //取得浏览器的accept-encoding头,询问支持哪种压缩
if (acceptEncoding.match(/\bgzip\b/)) { //浏览器支持gzip格式
res.setHeader('Content-Encoding', 'gzip'); //告知浏览器发送的数据是gzip压缩格式
let gzip = zlib.createGzip();
fs.createReadStream(file).pipe(gzip).pipe(res); //压缩后输出
} else if (acceptEncoding.match(/\bdeflate\b/)) { //浏览器支持deflate格式
let deflate = zlib.createDeflate();
res.setHeader('Content-Encoding','deflate');
fs.createReadStream(file).pipe(deflate).pipe(res); 压缩后输出
} else {
fs.createReadStream(file).pipe(res);
}
}
});
});
server.listen(3000, () => {
console.log('服务器已启动在3000端口...')
});
复制代码
重要代码说明:
let acceptEncoding = req.headers['accept-encoding'];
复制代码
取得浏览器的请求头,查看支持哪些压缩格式,因为某些老旧浏览器是不支持压缩的,因此要针对不同的压缩格式分别处理。
if (acceptEncoding.match(/\bgzip\b/)) {
复制代码
使用正则来进行判断,看看是否支持gzip压缩
res.setHeader('Content-Encoding', 'gzip'); //告知浏览器发送的数据是gzip压缩格式
复制代码
使用setHeader来设置响应头,告知浏览器此数据是经gzip压缩的,这样浏览器才会正确处理,否则浏览器并不识别gzip数据。
deflate格式的逻辑完全一样,这样就可以做到http压缩以节省流量的目的。