Wie erreicht man eine Inhaltskomprimierung mit Nodejs? Der folgende Artikel wird über die Methode zur Implementierung der Inhaltskomprimierung (gzip/br/deflate) auf der Node-Seite in der Praxis sprechen. Ich hoffe, er wird Ihnen hilfreich sein!
Als ich mein Anwendungsprotokoll überprüfte, stellte ich fest, dass das Laden nach dem Aufrufen der Protokollseite immer ein paar Sekunden dauerte (die Benutzeroberfläche war nicht paginiert), also öffnete ich das Netzwerkfenster, um nachzusehen
dies Erst dann stellte ich fest, dass die von der Schnittstelle zurückgegebenen Daten nicht komprimiert waren. Ich dachte, dass die Schnittstelle den Nginx-Reverse-Proxy verwendet und Nginx mir automatisch bei dieser Ebene helfen würde (das werde ich später untersuchen). theoretisch machbar)
Das Backend hier ist Node Service
In diesem Artikel wird das Wissen über HTTP-Datenkomprimierung und die Praxis auf der Node-SeiteHTTP数据压缩相关知识以及在Node侧的实践
下面的客户端均指浏览器
客户端在向服务端发起请求时，会在请求头(request header)中添加accept-encoding字段，其值标明客户端支持的压缩内容编码格式
服务端在对返回内容执行压缩后，通过在响应头（response header）中添加content-encoding，来告诉浏览器内容实际压缩使用的编码算法
deflate是同时使用了LZ77算法与哈夫曼编码（Huffman Coding）的一个无损数据压缩算法。
gzip 是基于 DEFLATE 的算法
br指代Brotli，该数据格式旨在进一步提高压缩比，对文本的压缩相对deflate能增加20%的压缩密度，而其压缩与解压缩速度则大致不变
Node.js包含一个zlib 模块，提供了使用 Gzip、Deflate/Inflate、以及 Brotli 实现的压缩功能
这里以gzip为例分场景列举多种使用方式，Deflate/Inflate与Brotli使用方式一样，只是API不一样
基于stream的操作
基于buffer的操作
引入几个所需的模块
const zlib = require('zlib')
const fs = require('fs')
const stream = require('stream')
const testFile = 'tests/origin.log'
const targetFile = `${testFile}.gz`
const decodeFile = `${testFile}.un.gz`解/压缩结果查看，这里使用du指令直接统计解压缩前后结果
# 执行 du -ah tests # 结果如下 108K tests/origin.log.gz 2.2M tests/origin.log 2.2M tests/origin.log.un.gz 4.6M tests
流(stream)的操作使用createGzip与createUnzip
zlib API，除了那些显式同步的 API，都使用 Node.js 内部线程池，可以看做是异步的方式1： 直接利用实例上的pipe方法传递流
// 压缩 const readStream = fs.createReadStream(testFile) const writeStream = fs.createWriteStream(targetFile) readStream.pipe(zlib.createGzip()).pipe(writeStream) // 解压 const readStream = fs.createReadStream(targetFile) const writeStream = fs.createWriteStream(decodeFile) readStream.pipe(zlib.createUnzip()).pipe(writeStream)
方式2： 利用stream上的pipeline，可在回掉中单独做其它的处理
// 压缩
const readStream = fs.createReadStream(testFile)
const writeStream = fs.createWriteStream(targetFile)
stream.pipeline(readStream, zlib.createGzip(), writeStream, err => {
if (err) {
console.error(err);
}
})
// 解压
const readStream = fs.createReadStream(targetFile)
const writeStream = fs.createWriteStream(decodeFile)
stream.pipeline(readStream, zlib.createUnzip(), writeStream, err => {
if (err) {
console.error(err);
}
})方式3： Promise化pipeline方法
const { promisify } = require('util')
const pipeline = promisify(stream.pipeline)
// 压缩
const readStream = fs.createReadStream(testFile)
const writeStream = fs.createWriteStream(targetFile)
pipeline(readStream, zlib.createGzip(), writeStream)
.catch(err => {
console.error(err);
})
// 解压
const readStream = fs.createReadStream(targetFile)
const writeStream = fs.createWriteStream(decodeFile)
pipeline(readStream, zlib.createUnzip(), writeStream)
.catch(err => {
console.error(err);
})Buffer的操作利用 gzip 与 unzip API，这两个方法包含同步与异步类型
gzipgzipSyncunzipunzipSync方式1： 将readStream转Buffer,然后进行进一步操作
// 压缩
const buff = []
readStream.on('data', (chunk) => {
buff.push(chunk)
})
readStream.on('end', () => {
zlib.gzip(Buffer.concat(buff), targetFile, (err, resBuff) => {
if(err){
console.error(err);
process.exit()
}
fs.writeFileSync(targetFile,resBuff)
})
})// 压缩
const buff = []
readStream.on('data', (chunk) => {
buff.push(chunk)
})
readStream.on('end', () => {
fs.writeFileSync(targetFile,zlib.gzipSync(Buffer.concat(buff)))
})方式2： 直接通过readFileSync
Die folgenden Clients beziehen sich alle auf Browser
accept-encoding im (Anfrage-Header) hinzu, dessen Wert das unterstützte komprimierte Inhaltskodierungsformat des Clients angibt 🎜
🎜🎜Nachdem der Server die Komprimierung des zurückgegebenen Inhalts durchgeführt hat, teilt er dem Browserinhalt den für die tatsächliche Komprimierung verwendeten Codierungsalgorithmus< mit, indem er <code>content hinzufügt -encoding zum Antwortheader. /code>🎜deflate verwendet beide LZ77-Algorithmus und Huffman Coding ist ein verlustfreier Datenkomprimierungsalgorithmus. 🎜🎜gzip ist ein Algorithmus, der auf DEFLATE basiert. 🎜🎜br bezieht sich auf Brotli, ein Datenformat, das entwickelt wurde Um das Komprimierungsverhältnis weiter zu verbessern, kann die Textkomprimierung die Komprimierungsdichte im Vergleich zu deflate um 20 % erhöhen, während die Komprimierungs- und Dekomprimierungsgeschwindigkeit ungefähr gleich bleibt🎜zlib-Modul, das die Verwendung von Gzip, Deflate/Inflate ermöglicht , und Von Brotli implementierte Komprimierungsfunktion🎜🎜Hier nehmen wir gzip als Beispiel, um verschiedene Verwendungsmethoden je nach Szenario aufzulisten, Deflate/Inflate und Brotli</code >Die Verwendung ist die gleiche, aber die API ist anders🎜🎜<strong>Betrieb basierend auf <code>stream🎜🎜
🎜🎜Operationen basierend auf Puffer</ Code></strong>🎜🎜<img src="https://img.php.cn/upload/image/734/331/536/164674055924407Lassen Sie uns darüber sprechen, wie Sie mit Node durch Übung eine Inhaltskomprimierung erreichen können" title="164674055924407Lassen Sie uns darüber sprechen, wie Sie mit Node durch Übung eine Inhaltskomprimierung erreichen können" alt="Lassen Sie uns darüber sprechen, wie Sie mit Node durch Übung eine Inhaltskomprimierung erreichen können "/>🎜🎜Führen Sie mehrere erforderliche Module ein 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 压缩
const readBuffer = fs.readFileSync(testFile)
const decodeBuffer = zlib.gzipSync(readBuffer)
fs.writeFileSync(targetFile,decodeBuffer)
// 解压
const readBuffer = fs.readFileSync(targetFile)
const decodeBuffer = zlib.gzipSync(decodeFile)
fs.writeFileSync(targetFile,decodeBuffer)</pre><div class="contentsignin">Nach dem Login kopieren</div></div><h2 data-id="heading-6">Dateidekomprimierung/-komprimierung🎜🎜Dekomprimierungs-/Komprimierungsergebnisse anzeigen, hier verwenden Sie den Befehl <code>du, um direkt zu zählen die Ergebnisse vor und nach der Dekomprimierung🎜// 测试数据
const testData = fs.readFileSync(testFile, { encoding: 'utf-8' })streamcreateGzip und createUnzip 🎜zlib-APIs, mit Ausnahme derjenigen, die explizit synchron sind, verwenden den internen Thread-Pool von Node.js und können als asynchron betrachtet werdenPipe</code >-Methode auf der Instanz, um den Stream zu übergeben🎜 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const buffer = Buffer.from(testData)</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜<strong>Methode 2:</strong> Mit der <code>Pipeline auf stream können Sie andere Verarbeitungen während des Streams separat durchführen Rollback🎜const transformStream = new stream.PassThrough() transformStream.write(buffer) // or const transformStream = new stream.Duplex() transformStream.push(Buffer.from(testData)) transformStream.push(null)
pipeline-Methode🎜transformStream
.pipe(zlib.createGzip())
.pipe(fs.createWriteStream(targetFile))Puffer< /h3>🎜Verwenden Sie die APIs gzip und unzip. Diese beiden Methoden umfassen die Typen synchron und asynchronous🎜gzipgzipSyncunzipunzipSyncPuffer umwandeln und dann weitere Vorgänge ausführen🎜const buffer = Buffer.from(testData)
const result = zlib.gzipSync(buffer)
fs.writeFileSync(targetFile, result)
readFileSync🎜🎜In Zusätzlich zur Dateikomprimierung, manchmal vielleicht, um den übertragenen Inhalt direkt zu dekomprimieren🎜这里以压缩文本内容为例
// 测试数据
const testData = fs.readFileSync(testFile, { encoding: 'utf-8' })流(stream)操作这块就考虑 string => buffer => stream的转换就行
string => buffer
const buffer = Buffer.from(testData)
buffer => stream
const transformStream = new stream.PassThrough() transformStream.write(buffer) // or const transformStream = new stream.Duplex() transformStream.push(Buffer.from(testData)) transformStream.push(null)
这里以写入到文件示例，当然也可以写到其它的流里，如HTTP的Response（后面会单独介绍）
transformStream
.pipe(zlib.createGzip())
.pipe(fs.createWriteStream(targetFile))Buffer操作同样利用Buffer.from将字符串转buffer
const buffer = Buffer.from(testData)
然后直接使用同步API进行转换，这里result就是压缩后的内容
const result = zlib.gzipSync(buffer)
可以写入文件，在HTTP Server中也可直接对压缩后的内容进行返回
fs.writeFileSync(targetFile, result)
这里直接使用Node中 http 模块创建一个简单的 Server 进行演示
在其他的 Node Web 框架中，处理思路类似，当然一般也有现成的插件，一键接入
const http = require('http')
const { PassThrough, pipeline } = require('stream')
const zlib = require('zlib')
// 测试数据
const testTxt = '测试数据123'.repeat(1000)
const app = http.createServer((req, res) => {
const { url } = req
// 读取支持的压缩算法
const acceptEncoding = req.headers['accept-encoding'].match(/(br|deflate|gzip)/g)
// 默认响应的数据类型
res.setHeader('Content-Type', 'application/json; charset=utf-8')
// 几个示例的路由
const routes = [
['/gzip', () => {
if (acceptEncoding.includes('gzip')) {
res.setHeader('content-encoding', 'gzip')
// 使用同步API直接压缩文本内容
res.end(zlib.gzipSync(Buffer.from(testTxt)))
return
}
res.end(testTxt)
}],
['/deflate', () => {
if (acceptEncoding.includes('deflate')) {
res.setHeader('content-encoding', 'deflate')
// 基于流的单次操作
const originStream = new PassThrough()
originStream.write(Buffer.from(testTxt))
originStream.pipe(zlib.createDeflate()).pipe(res)
originStream.end()
return
}
res.end(testTxt)
}],
['/br', () => {
if (acceptEncoding.includes('br')) {
res.setHeader('content-encoding', 'br')
res.setHeader('Content-Type', 'text/html; charset=utf-8')
// 基于流的多次写操作
const originStream = new PassThrough()
pipeline(originStream, zlib.createBrotliCompress(), res, (err) => {
if (err) {
console.error(err);
}
})
originStream.write(Buffer.from('<h1>BrotliCompress</h1>'))
originStream.write(Buffer.from('<h2>测试数据</h2>'))
originStream.write(Buffer.from(testTxt))
originStream.end()
return
}
res.end(testTxt)
}]
]
const route = routes.find(v => url.startsWith(v[0]))
if (route) {
route[1]()
return
}
// 兜底
res.setHeader('Content-Type', 'text/html; charset=utf-8')
res.end(`<h1>404: ${url}</h1>
<h2>已注册路由</h2>
<ul>
${routes.map(r => `<li><a href="${r[0]}">${r[0]}</a></li>`).join('')}
</ul>
`)
res.end()
})
app.listen(3000)更多node相关知识，请访问：nodejs 教程！
Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie mit Node durch Übung eine Inhaltskomprimierung erreichen können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Linux fügt die Update-Quellenmethode hinzu
Erforderliche Kenntnisse für das Web-Frontend
Wie lautet das Passwort für den Mobilfunkdienst?
So beheben Sie den Bluescreen 0x0000006b
Was ist ein Bitcoin-Futures-ETF?
Empfohlene benutzerfreundliche und formelle Software-Apps für Währungsspekulationen im Jahr 2024
Ripple-Zukunftsprognose
Was soll ich tun, wenn sich mein Computer nicht einschalten lässt?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
