찾다
웹 프론트엔드JS 튜토리얼gzip 압축을 위해 Node에 내장된 모듈 zlib를 사용하는 방법에 대해 이야기해 보겠습니다.

Node에서 gzip 압축을 수행하는 방법은 무엇입니까? 다음 글에서는 Node의 내장 모듈 zlib가 gzip 압축을 수행하는 방법을 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.

gzip 압축을 위해 Node에 내장된 모듈 zlib를 사용하는 방법에 대해 이야기해 보겠습니다.

성능 최적화 작업을 위해서는 서버 측 개발이 필수입니다. 프런트엔드와 백엔드에서 데이터 전송을 위해 HTTP 인터페이스(API)를 사용할 때 전송되는 데이터 양이 너무 많으면 필연적으로 시간 초과 또는 실패를 요청합니다.

nodejszlib 내장 모듈을 제공하며 gzip 메소드를 사용하여 전달된 데이터를 압축하여 데이터를 향상시킬 수 있습니다. 전송 효율성. [관련 튜토리얼 추천: nodejs为我们提供了一个zlib内置模块,我们可以使用它其中的gzip方法来对传递的数据进行压缩,从而提高数据传递效率。【相关教程推荐:nodejs视频教程

什么是gzip?

HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术

这一般是指服务器中安装的一个功能,当有人来访问这个服务器中的网站时,服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来,一般对纯文本内容可压缩到原大小的40%

这样传输就快了,效果就是你点击网址后数据会很快的显示出来,提高用户体验,当然这也会增加服务器的负载.,一般服务器中都安装有这个功能模块

减少文件大小有两个明显的好处:

  • 一是可以减少存储空间
  • 二是通过网络传输文件时,可以减少传输的时间

我们在进行本地数据传递时,如果一个文件太大我们经常会使用到文件压缩技术(zip或rar等),将大文件压缩成小文件进行传递,接收者再进行解压即可,因为压缩的速度一般是比较快的,这样就能减少文件传输过程中的时间,从而提高效率

简单来说,gzip其实就是一种用于服务端(后端)和客户端(前端)之间压缩数据的一种方法

gzip和zlib什么关系?

zlibDEFLATE算法的实现库,它的API同时支持gzip文件格式以及一个简化的数据流格式

DEFLATE是同时使用了LZ77算法哈夫曼编码(Huffman Coding)的一个无损数据压缩算法

gzipHTTP压缩,一种在万维网中加速传输HTML和其他内容的技术

所以可以说zlib是在gzip的基础上增加了一些内容,这也是为什么nodegzip方法是在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搭建服务器或者内置模块fsstream流不太了解的话,可以看我先前的文章:Node.js | 搭建后端服务器(含内置模块 http | url | querystring 的使用)Node.js | 操作本地文件 — 玩转 fs 内置模块

运行server.js文件,使用浏览器访问node服务器:

gzip 압축을 위해 Node에 내장된 모듈 zlib를 사용하는 방법에 대해 이야기해 보겠습니다.

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

gzip压缩数据传输

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

server.jsnodejs 동영상 튜토리얼

]🎜

gzip이란 무엇인가요?

🎜 HTTP 프로토콜의 GZIP 인코딩은 웹 애플리케이션 성능을 향상🎜🎜 위해 사용되는 기술입니다. 이는 일반적으로 서버에 설치된 기능입니다. 누군가가 이 서버의 웹사이트를 방문하면 서버의 이 기능은 웹 콘텐츠를 압축한 다음 이를 방문하는 컴퓨터 브라우저로 전송하여 일반적으로 표시합니다. 텍스트 콘텐츠를 원래 크기의 40%로 압축할 수 있습니다🎜🎜이렇게 하면 전송이 빠르게 효과가 있어 URL을 클릭하면 데이터가 빠르게 표시되므로 사용자 경험이 향상됩니다. . 물론, 이는 서버의 로드를 증가시킵니다. 이 기능 모듈은 일반적으로 서버에 설치되며 파일 크기를 줄이는 데는 두 가지 분명한 이점이 있습니다. 🎜
  • 첫 번째 , 저장 공간을 줄일 수 있습니다 li>
  • 둘째, 네트워크를 통해 파일을 전송할 때 전송 시간을 줄일 수 있습니다
🎜로컬 데이터를 전송할 때 파일 너무 크면 파일 압축 기술(zip 또는 rar 등)을 자주 사용합니다. 대용량 파일을 작은 파일로 압축하여 전송하면 일반적으로 압축 속도가 상대적으로 빠르기 때문에 수신자는 압축을 풀 수 있습니다. , 파일 전송 처리 시간을 줄여 효율성을 높일 수 있습니다🎜
🎜간단히 말하면 gzip은 실제로 서버(백엔드)와 클라이언트(프론트엔드) 간에 데이터를 압축하는 데 사용되는 방법입니다. 방법 🎜

gzip과 zlib의 관계는 무엇입니까?

🎜zlibDEFLATE 알고리즘의 구현 라이브러리이며 해당 API는 gzip파일 형식 및 단순화된 <strong>데이터 흐름</strong> 형식 🎜<blockquote>🎜<code>DEFLATELZ77 알고리즘Huffman A를 모두 사용합니다. 허프만 코딩의 <strong>무손실 데이터 압축 알고리즘</strong>🎜🎜gzipHTTP 압축에서 전송 속도를 높이는 기술 HTML 및 World Wide Web의 기타 콘텐츠🎜🎜따라서 zlibgzip을 기반으로 일부 콘텐츠를 추가한다고 말할 수 있습니다. nodegzip 메소드가 zlib🎜

Common data transfer의 내장 모듈에 있는 이유 > h2>🎜우리는 node를 사용하여 데이터를 전송하는 일반적인 방법을 보여주기 위해 서버를 구축합니다. 🎜🎜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("服务器启动啦!");
});
🎜이것은 간단한 node 서버에 액세스하면 index.html이 반환됩니다. 원하는 대로 이 index.html에 콘텐츠를 작성할 수 있습니다. . 더 많이 쓸수록 더 좋습니다🎜🎜이전 섹션에서 이야기한 내장 모듈 fsstream 스트림도 여기에 사용됩니다. 주의해야 할 점은 node 서버의 res 매개변수는 기본적으로 쓰기 가능한 스트림이므로 res를 직접 사용할 수 있다는 것입니다. code> for pipe파이프라인에서🎜
🎜서버를 구축하는 nodestream 흐름에 대해 잘 모른다면 내장 모듈 fs를 읽어보세요. 이전 글: Node.js | End 서버 구축 후 (내장 모듈 http | url | querystring 사용 포함)🎜Node.js | 로컬 파일 조작 - fs 내장 모듈로 플레이🎜🎜
🎜 실행 server.js 파일을 다운로드하고 브라우저를 사용하여 node 서버에 액세스합니다: 🎜🎜gzip 압축을 위해 Node에 내장된 모듈 zlib를 사용하는 방법에 대해 이야기해 보겠습니다.🎜🎜예 여기서 전달한 데이터 크기는 97.6kb입니다(내용에 따라 다름). index.html) 🎜

gzip 압축 데이터 전송 Strong>

🎜우리는 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服务器:

gzip 압축을 위해 Node에 내장된 모듈 zlib를 사용하는 방법에 대해 이야기해 보겠습니다.

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

结语

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

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

위 내용은 gzip 압축을 위해 Node에 내장된 모듈 zlib를 사용하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 掘金社区에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
JavaScript 엔진 : 구현 비교JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScript브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구