Home > Web Front-end > JS Tutorial > body text

Let's talk about how to use Node's built-in module zlib for gzip compression

青灯夜游
Release: 2022-09-26 20:30:06
forward
2052 people have browsed it

How to perform gzip compression in Node? The following article introduces how the built-in module zlib of Node performs gzip compression. I hope it will be helpful to everyone!

Let's talk about how to use Node's built-in module zlib for gzip compression

Any server-side development is indispensable for performance optimization operations. When using the HTTP interface (API) for data transfer at the front and back ends, if the amount of data transferred is too large, it will inevitably cause The request timed out or failed.

nodejs provides us with a zlib built-in module, we can use its gzip method to compress the passed data, Thereby improving data transmission efficiency. [Related tutorial recommendations: nodejs video tutorial]

What is gzip?

GZIP encoding over the HTTP protocol is a technique used to improve the performance of WEB applications

This generally refers to a function installed in the server. When someone visits the website in this server, this function in the server compresses the web content and transmits it to the visiting computer browser for display. , Generally, plain text content can be compressed to 40% of the original size

This waytransmission is faster. The effect is that the data will be displayed quickly after you click the URL, improving the user experience. Of course, this will also increase the load on the server. Generally, this functional module is installed in the server

Reducing the file size has two obvious benefits:

  • First, it can reduce storage space
  • Secondly, when transferring files through the network, it can reduce the transmission time

When we transfer local data, if a file is too large We often use file compression technology (zip or rar, etc.) to compress large files into small files for delivery, and the recipient can then decompress them, because the compression speed is generally relatively fast, so It can reduce the time during the file transfer process, thereby improving efficiency

Simply put,gzip is actually a method used on the server (back-end) and client (front-end) ) A method of compressing data

What is the relationship between gzip and zlib?

zlib is the implementation library of the DEFLATE algorithm. Its API supports both the gzip file format and A simplified data flow format

DEFLATE uses both the LZ77 algorithm and Huffman coding (Huffman Coding) A lossless data compression algorithm

gzip in HTTP compression, a method of accelerating transmission on the World Wide Web HTML and other content technology

So it can be said that zlib adds some content based on gzip, which is whynodeThe gzip method is in the zlib built-in module because

ordinary data transmission

us Use node to build a server to demonstrate the common way we pass data:

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("服务器启动啦!");
});
Copy after login

This is a simple node server, after the browser accesses it, it will return us an index.html. You can write whatever you want in this index.html, the more you write. The better

The stream stream in the built-in module fs that we talked about in the previous section is also used here. It should be noted that , The res parameter in the node server is essentially a writable stream, so we can directly use res in the pipe pipeline

If you don’t know much about node building a server or the stream stream of the built-in module fs, you can read my previous article :Node.js | Build a back-end server (including the use of the built-in module http | url | querystring)Node.js | Operate local files - play with fs built-in module

Run the server.js file and use the browser to access the node server:

Lets talk about how to use Nodes built-in module zlib for gzip compression

You can see me here The size of the data transferred is 97.6kb (this depends on the contents of your index.html)

gzip compressed data transfer

We use gzip to transform the above example of ordinary data transmission:

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("服务器启动啦!");
});
Copy after login

先引入zlib内置模块,再使用zlib.createGzip()获取gzip方法,这个gzip方法实际也是一种数据流的格式,与node服务器中的res参数一样,这也是pipe管道中能直接使用gzip的原因

我们在将数据传递给res参数(客户端)之前,通过pipe管道的链式调用,将gzip加上

这样readStream(服务端)的数据会先经过gzip压缩,之后才会传递给res参数(客户端)

❗️ 需要注意的是:

http数据压缩的方式不止有gzip,还有其它的压缩方式,只不过gzip是最常见最常用的一种方式

所以我们服务端使用gzip将数据压缩后传递给浏览器时,浏览器并不知道我们是使用哪种方式压缩的数据,于是就不知道该以哪种方式进行解压,所以我们需要手动明确的告诉浏览器我们使用的是gzip,服务端加上以下响应头即可:

"Content-Encoding": "gzip", // 告诉浏览器我们是通过gzip压缩的
Copy after login

这样浏览器就能够正确解压我们传递的数据了,运行上面的server.js,打开浏览器访问我们的node服务器:

Lets talk about how to use Nodes built-in module zlib for gzip compression

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

结语

这篇文章讲了node的一个非常实用的小模块zlibzlib大家可能之前没听过,但gzip应该都曾听过,gzip是请求数据传输性能优化的一种很好的方式,看完本篇文章,相信你会对gzip有了更深的理解

更多node相关知识,请访问:nodejs 教程

The above is the detailed content of Let's talk about how to use Node's built-in module zlib for gzip compression. For more information, please follow other related articles on the PHP Chinese website!

source:juejin.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template