您的位置: 翼速应用 > 业内知识 > web前端 > 正文

在node中怎样使用内置模块zlib进行gzip压缩?

在node中怎样使用内置模块zlib进行gzip压缩?详细教程来了!本文就和大家详细聊聊具体如何操作,希望能够帮助到大家!下面一起来看一下。


在node中怎样使用内置模块zlib进行gzip压缩?


在node中怎样使用内置模块zlib进行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.js


const 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服务器:


使用浏览器访问node服务器


可以看到我这里传递的数据大小是97.6kb(这取决于你的index.html的内容)


gzip压缩数据传输


我们使用gzip来改造一下上面普通数据传输的例子:


server.js


const 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服务器:


打开浏览器访问node服务器


可以看到使用gzip压缩后我这里传递的数据大小只有27.5kb(这取决于你的index.html的内容),这与之前的97.6kb相比,数据传输速率大幅提升,这就是我们使用gzip的意义!


以上就是关于在node中怎样使用内置模块zlib进行gzip压缩的全部讲解,翼速应用平台内有更多相关资讯,欢迎查阅!

我来说两句

0 条评论

推荐阅读

  • 响应式布局CSS媒体查询设备像素比介绍

    构建响应式网站布局最常见的是流体网格,灵活调整大小的站点布局技术,确保用户在使用的幕上获得完整的体验。响应式设计如何展示富媒体图像,可以通过以下几种方法。

    admin
  • 提升网站的性能快速加载的实用技巧

    网站速度很重要,快速加载的网站会带来更好的用户体验、更高的转化率、更多的参与度,而且在搜索引擎排名中也扮演重要角色,做SEO,网站硬件是起跑线,如果输在了起跑线,又怎么跟同行竞争。有许多方法可提升网站的性能,有一些技巧可以避免踩坑。

    admin
  • 织梦CMS TAG页找不到标签和实现彩色标签解决方法

    织梦cms是我们常见的网站程序系统的一款,在TAG标签中常常遇到的问题也很多。当我们点击 tags.php 页的某个标签的时候,有时会提示:“系统无此标签,可 能已经移除!” 但是我们检查程序后台,以及前台显示页面。这个标签确实存在,如果解决这个问题那?

    admin
  • HTML关于fieldset标签主要的作用

    在前端开发html页面中常用的标签很多,今天为大家带来的是关于HTML中fieldset标签主要的作用说明,根据技术分析HTML

    admin

精选专题