Node中实现gzip压缩的方法和操作是什么
Admin 2022-10-12 群英技术资讯 698 次浏览
这篇文章主要介绍“Node中实现gzip压缩的方法和操作是什么”的相关知识,下面会通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Node中实现gzip压缩的方法和操作是什么”文章能帮助大家解决问题。
任何服务端开发都少不了性能优化的操作,在前后端使用HTTP接口(API)进行数据传递时,如果传递数据量太大,势必会造成请求超时或失败。
nodejs为我们提供了一个zlib内置模块,我们可以使用它其中的gzip方法来对传递的数据进行压缩,从而提高数据传递效率。【相关教程推荐:nodejs视频教程】什么是gzip?
HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术这一般是指服务器中安装的一个功能,当有人来访问这个服务器中的网站时,服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来,一般对纯文本内容可压缩到原大小的40%
这样传输就快了,效果就是你点击网址后数据会很快的显示出来,提高用户体验,当然这也会增加服务器的负载.,一般服务器中都安装有这个功能模块
减少文件大小有两个明显的好处:
- 一是可以减少存储空间
- 二是通过网络传输文件时,可以减少传输的时间
我们在进行本地数据传递时,如果一个文件太大我们经常会使用到文件压缩技术(zip或rar等),将大文件压缩成小文件进行传递,接收者再进行解压即可,因为压缩的速度一般是比较快的,这样就能减少文件传输过程中的时间,从而提高效率
简单来说,
gzip其实就是一种用于服务端(后端)和客户端(前端)之间压缩数据的一种方法gzip和zlib什么关系?
zlib是DEFLATE算法的实现库,它的API同时支持gzip文件格式以及一个简化的数据流格式
DEFLATE是同时使用了LZ77算法与哈夫曼编码(Huffman Coding)的一个无损数据压缩算法
gzip在HTTP压缩,一种在万维网中加速传输HTML和其他内容的技术所以可以说
zlib是在gzip的基础上增加了一些内容,这也是为什么node中gzip方法是在zlib内置模块中的原因普通数据传输
我们使用
node搭建一个服务器,来演示我们传递数据的普通方式:
server.jsconst http = require("http"); const fs = require("fs"); http.createServer((req, res) => { res.writeHead(200, { "Content-Type": "text/html;charset=utf-8", }); const readStream = fs.createReadStream("./index.html"); // res本质就是一个可写流 readStream.pipe(res); }).listen(3000, () => { console.log("服务器启动啦!"); });登录后复制这是一个简单的
node服务器,浏览器访问它后,它会向我们返回一个index.html,这个index.html里的内容大家随便写,写的越多越好这里也使用到了上一节我们讲过的内置模块
fs中的stream流,需要注意的是,在node服务器中的res参数本质是一个可写流,所以我们才能直接将res用于pipe管道中如果你对
node搭建服务器或者内置模块fs的stream流不太了解的话,可以看我先前的文章:Node.js | 搭建后端服务器(含内置模块 http | url | querystring 的使用)Node.js | 操作本地文件 — 玩转 fs 内置模块运行
server.js文件,使用浏览器访问node服务器:
可以看到我这里传递的数据大小是97.6kb(这取决于你的
index.html的内容)gzip压缩数据传输
我们使用
gzip来改造一下上面普通数据传输的例子:
server.jsconst http = require("http"); const fs = require("fs"); // 导入内置模块zlib const zlib = require("zlib"); // 获取gzip方法 const gzip = zlib.createGzip(); http.createServer((req, res) => { res.writeHead(200, { "Content-Type": "text/html;charset=utf-8", "Content-Encoding": "gzip", // 告诉浏览器我们是通过gzip压缩的 }); const readStream = fs.createReadStream("./index.html"); // res本质就是一个可写流 // 在数据返回之前使用gzip压缩数据 readStream.pipe(gzip).pipe(res); }).listen(3000, () => { console.log("服务器启动啦!"); });登录后复制先引入
zlib内置模块,再使用zlib.createGzip()获取gzip方法,这个gzip方法实际也是一种数据流的格式,与node服务器中的res参数一样,这也是pipe管道中能直接使用gzip的原因我们在将数据传递给
res参数(客户端)之前,通过pipe管道的链式调用,将gzip加上这样
readStream(服务端)的数据会先经过gzip压缩,之后才会传递给res参数(客户端)️ 需要注意的是:
http数据压缩的方式不止有gzip,还有其它的压缩方式,只不过gzip是最常见最常用的一种方式所以我们服务端使用
gzip将数据压缩后传递给浏览器时,浏览器并不知道我们是使用哪种方式压缩的数据,于是就不知道该以哪种方式进行解压,所以我们需要手动明确的告诉浏览器我们使用的是gzip,服务端加上以下响应头即可:"Content-Encoding": "gzip", // 告诉浏览器我们是通过gzip压缩的登录后复制这样浏览器就能够正确解压我们传递的数据了,运行上面的
server.js,打开浏览器访问我们的node服务器:
可以看到使用
gzip压缩后我这里传递的数据大小只有27.5kb(这取决于你的index.html的内容),这与之前的97.6kb相比,数据传输速率大幅提升,这就是我们使用gzip的意义!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
HTML+JavaScript实现筋斗云导航栏,下文有实例供大家参考,对大家了解操作过程或相关知识有一定的帮助,而且实用性强,希望这篇文章能帮助大家,下面我们一起来了解看看吧。
下拉框菜单相信大家都比较熟悉,那么鼠标经过显示下拉框效果是怎么做的呢?这篇文章就给大家分享一下用JavaScript实现鼠标经过显示下拉框代码,感兴趣的朋友可以参考,实现效果和代码如下。
Vuex是专门为Vuejs应用程序设计的状态管理工具,这篇文章主要给大家介绍了关于Vuex状态机快速了解与实例应用的相关资料,需要的朋友可以参考下
这篇文章主要为大家详细介绍了用vue实现注册页,短信验证码登录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这篇文章主要为大家详细介绍了使用JS实现简单的图片切换功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008