NodeJS服务器实现gzip压缩的示例代码


Posted in NodeJs onOctober 12, 2018

本文介绍了NodeJS服务器实现gzip压缩,分享给大家,具体如下:

NodeJS服务器实现gzip压缩的示例代码

在浏览器向服务器请求静态资源时,服务器为了减小在网络传输过程中消耗的流量和时间,都是将静态资源经过压缩后返回给服务器的,实现压缩的算法有 deflategzip 等,最常用的是 gzip 压缩。

gzip 简介

在浏览器和服务器之间通过 gzip 压缩流实现传输的过程可以用下图表示。

NodeJS服务器实现gzip压缩的示例代码

当浏览器向服务器请求静态资源,服务器会将静态资源经过处理转换为压缩流,大大减小文件体积,然后将压缩流返回给浏览器,浏览器通过压缩的类型重新将压缩流解析成静态文件。

zlib 模块的使用

1、压缩

在 NodeJS 中通过 zlib 模块帮助我们实现不同类型的压缩,其实压缩的过程就是创建流的过程,创建的压缩流是 Transform 类型(转化流),读取文件的内容经过转化流创建一个新类型的文件。

const zlib = require("zlib");
const fs = require("fs");
const path = require("path");

// 压缩
function gzip(source) {
  // 处理输入和输出的文件路径
  let sourcePath = path.join(__dirname, source);
  let gzipPath = `${sourcePath}.gz`;

  // 创建转化流
  let gzip = zlib.createGzip();

  // 创建可读流
  let rs = fs.createReadStream(sourcePath);

  // 创建可写流
  let ws = fs.createWriteStream(gzipPath);

  // 实现转化
  rs.pipe(gzip).pipe(ws);
}

gzip("index.html");

执行上面代码查看根目路是否出现 index.gz 压缩包。

2、解压

压缩的过程是可逆的,可以压缩就可以解压,无论是在浏览器还是在服务器,我们下面实现解压的方法。

const zlib = require("zlib");
const fs = require("fs");
const path = require("path");

// 解压
function gunzip(source) {
  // 处理输入和输出的文件路径
  let sourcePath = path.join(__dirname, source);
  let filePath = path.join(__dirname, path.basename(source, ".gz"));

  // 创建转化流
  let unzip = zlib.createGunzip();

  // 创建可读流
  let rs = createReadStream(sourcePath);

  // 创建可写流
  let ws = createWriteStream(filePath);

  // 实现转化
  rs.pipe(unzip).pipe(ws);
}

gunzip("index.html.gz");

删除原来 index.html,执行解压代码,查看文件根目录是否生成 index.html

服务器的实现

在浏览器与服务器的交互中,浏览器其实会通过请求头 Accept-Encoding 告诉服务器当前支持解压的压缩格式,值为 gzip, deflate, br,多个压缩格式用 , 隔开,服务器在接收到浏览器请求后,会按照请求头的格式压缩资源,将压缩后的资源返回,并通过响应头 Content-Encoding 告诉浏览器当前服务器压缩的格式。

// 引入依赖
const http = require("http");
const url = require("url");
const path = require("path");
const fs = require("fs");
const zlib = require("zlib");

// 创建服务器
const server = http.createServer((req, res) => {
  // 处理 pathname,"/" 时默认读取 "/index.html"
  let { pathname } = url.parse(req.url, true);
  pathname = pathname !== "/" ? pathname : "/index.html";

  // 获取读取文件的绝对路径
  let p = path.join(__dirname, pathname);

  // 查看路径是否合法
  fs.access(p, err => {
    // 路径不合法则直接中断连接
    if (err) return res.end("Not Found");

    // 获取浏览器支持的压缩格式
    let encoding = req.headers["accept-encoding"];

    // 创建可读流
    let rs = fs.createReadStream(p);

    // 支持 gzip 使用 gzip 压缩,支持 deflate 使用 deflate 压缩
    if (encoding && encoding.match(/\bgzip\b/)) {
      let compress = zlib.createGzip();
      let compressType = "gzip";
    } else if (encoding && encoding.match(/\bdeflate\b/)) {
      let compress = zlib.createDeflate();
      let compressType = "deflate";
    } else {
      // 否则直接返回可读流
      return rs.pipe(res);
    }

    // 将压缩流返回并设置响应头
    res.setHeader("Content-Encoding", compressType);
    rs.pipe(compress).pipe(res);
  });
});

server.listen(3000, () => {
  console.log("server start 3000");
});

在上面服务器中如果不通过响应头通知浏览器当前资源的压缩格式,浏览器会不知道该如何解压,默认会当成文件下载,如 Chrome,所以在返回压缩流时必须通过 Content-Encoding 响应头通知浏览器当前的压缩格式。

测试服务器压缩

我们在文件根目录创建一个 index.html 文件,代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>gzip</title>
</head>
<body>
  <div>Hello GZIP!</div>
</body>
</html>

启动服务器 server.js,然后通过浏览器访问 localhost:3000,查看页面能否正确返回,并查看开发者工具 Network 中的响应头 Content-Encoding 的值是否正确。

总结

服务器压缩其实是客户端与服务器在网络传输时的一种优化手段,可以大大减小流量的消耗和响应时间,而 gzip 只是目前最常用的一种压缩格式,即压缩算法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
提高NodeJS中SSL服务的性能
Jul 15 NodeJs
nodejs进阶(6)—连接MySQL数据库示例
Jan 07 NodeJs
nodejs+express实现文件上传下载管理网站
Mar 15 NodeJs
详解Windows下安装Nodejs步骤
May 18 NodeJs
Nodejs之http的表单提交
Jul 07 NodeJs
nodejs中解决异步嵌套循环和循环嵌套异步的问题
Jul 12 NodeJs
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
Sep 29 NodeJs
nodejs 图片预览和上传的示例代码
Sep 30 NodeJs
nodejs实现简单的gulp打包
Dec 21 NodeJs
利用nodeJs anywhere搭建本地服务器环境的方法
May 12 NodeJs
nodejs制作小爬虫功能示例
Feb 24 NodeJs
nodejs aes 加解密实例
Oct 10 #NodeJs
nodejs读取本地中文json文件出现乱码解决方法
Oct 10 #NodeJs
nodejs require js文件入口,在package.json中指定默认入口main方法
Oct 10 #NodeJs
nodejs更新package.json中的dependencies依赖到最新版本的方法
Oct 10 #NodeJs
nodejs中用npm初始化来创建package.json的实例讲解
Oct 10 #NodeJs
nodejs初始化init的示例代码
Oct 10 #NodeJs
webpack打包nodejs项目的方法
Sep 26 #NodeJs
You might like
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
Python抽象类的新写法
2015/06/18 Python
Python创建xml文件示例
2017/03/22 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Python如何将函数值赋给变量
2020/04/28 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
安全生产检查通报
2014/01/29 职场文书
员工安全生产责任书
2014/07/22 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
大学同学聚会感言
2015/07/30 职场文书
团结主题班会
2015/08/13 职场文书
Python学习之异常中的finally使用详解
2022/03/16 Python
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS