如何在nodejs中體驗http/2詳解
前言
2015年，HTTP/2 發(fā)布，直到2021年公司的項目才開始在實踐中應用；自己對http2諸多特點的理解只存在于字面上，于是嘗試在nodejs中實踐一下，加深自己的理解。
多路復用
同域名下所有通信都在單個連接上完成，消除了因多個 TCP 連接而帶來的延時和內(nèi)存消耗，這在大量請求同時發(fā)出的情況下能夠減少加載時間。
使用如下代碼查看http2環(huán)境下，資源下載的情況(瀏覽器開啟限流和disable cache)：
const http2 = require('http2');
const fs = require('fs');
const { HTTP2_HEADER_PATH } = http2.constants;
const server = http2.createSecureServer({
key: fs.readFileSync('localhost-privkey.pem'),
cert: fs.readFileSync('localhost-cert.pem')
});
server.on('error', (err) => console.error(err));
server.on('stream', (stream, headers) => {
// stream is a Duplex
const path = headers[':path'];
if(path === '/img.png' || path === '/favicon.ico'){
const fd = fs.openSync('img.png', 'r');
const stat = fs.fstatSync(fd);
const headers = {
'content-length': stat.size,
'last-modified': stat.mtime.toUTCString(),
'content-type': 'image/png'
};
stream.respondWithFD(fd, headers);
} else if(path === '/') {
stream.respond({
'content-type': 'text/html; charset=utf-8',
':status': 200
});
stream.end(`
<h1>Hello World</h1>
<script>
for(var i=0;i<50;i++){
fetch('/img.png')
}
</script>
`);
}
});
server.listen(8443);
可以看到當資源開始同時請求，所有的請求形成一個隊列，請求之間開始時間相差大概1ms, 因為下載的是同一個圖片，50張圖片同時下載，最后幾乎在同時完成下載。
下面是http1.1的例子，通過對比發(fā)現(xiàn)瀏覽器按照自己的最大并發(fā)量同時發(fā)出請求，只有當請求返回后才發(fā)出新的請求(瀏覽器開啟限流和disable cache)：
const http = require('http');
const fs = require('fs');
const server = http.createServer(function(req,res){
const path = req.url;
if(path === '/img.png' || path === '/favicon.ico'){
res.writeHead(200,{'Content-type':'image/png'})
var stream = fs.createReadStream('img.png')
stream.pipe(res)
} else {
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
res.end(`
<h1>Hello World</h1>
<script>
for(var i=0;i<50;i++){
fetch('/img.png')
}
</script>
`);
}
});
server.listen(8444);
服務端推送
按照如下代碼測試
const http2 = require('http2');
const fs = require('fs');
const { HTTP2_HEADER_PATH } = http2.constants;
const server = http2.createSecureServer({
key: fs.readFileSync('localhost-privkey.pem'),
cert: fs.readFileSync('localhost-cert.pem')
});
server.on('error', (err) => console.error(err));
server.on('stream', (stream, headers) => {
const path = headers[':path'];
if(path === '/') {
stream.respond({
'content-type': 'text/html; charset=utf-8',
':status': 200
});
stream.pushStream({ [HTTP2_HEADER_PATH]: '/style.css' }, (err, pushStream, headers) => {
if (err) throw err;
const fd = fs.openSync('style.css', 'r');
const stat = fs.fstatSync(fd);
const header = {
'content-length': stat.size,
'last-modified': stat.mtime.toUTCString(),
'content-type': 'text/css'
};
pushStream.respondWithFD(fd, header)
});
stream.end(`
<h1>Hello World</h1>
<script>
setTimeout(()=>{
fetch('/style.css')
},2000)
</script>
`);
} else if(path === '/style.css'){
const fd = fs.openSync('style.css', 'r');
const stat = fs.fstatSync(fd);
const headers = {
'content-length': stat.size,
'last-modified': stat.mtime.toUTCString(),
'content-type': 'text/css'
};
stream.respondWithFD(fd, headers);
}
});
server.listen(8442);
資源加載情況如下，style.css的Initiator是Push，大小是66 B， 同時首頁加載的大小是207 B，
注釋掉stream.pushStream部分后，不使用推送，資源加載如下，style.css大小是89B， 同時首頁加載的大小是182B，
綜上所看，服務端推送可以提前加載資源，優(yōu)化非首頁加載有益。
令人高興的是，因為使用率低，chrome在105版本后不再支持http2的服務端推送，導致這個特點在前端開發(fā)中可以忽略了。并且如果要測試改特點需要使用低版本的chrome，比如本例子使用的是chrome 96 mac版本。
本文所用代碼：https://github.com/blank-x/pg/tree/master/http2，nodejs版本是v16.19.0.
總結(jié)
到此這篇關于如何在nodejs中體驗http/2的文章就介紹到這了,更多相關nodejs中體驗http/2內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Node.js Domain 模塊實例代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
本篇文章主要介紹了node簡單實現(xiàn)一個更改頭像功能的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章給大家介紹了在阿里云ecs服務器中安裝部署node.js的詳細步驟，對大家安裝node.js具有一定的參考借鑒價值，有需要的朋友們下面來一起看看吧。2016-10-10
什么時候不能在 Node.js 中使用 Lock Files
這篇文章主要介紹了什么時候不能在 Node.js 中使用 Lock Files，但是當你在開發(fā)要發(fā)布到 npm 的包時，應避免使用這類 lock file 。下面我們來一起了解一下吧2019-06-06
這篇文章主要介紹了解決node-sass下載不成功的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細介紹了Nodejs之fs模塊的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要給大家介紹了關于NodeJs操作MongoDB教程之分頁功能以及常見問題的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用NodeJs具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-04-04
使用nodejs實現(xiàn)JSON文件自動轉(zhuǎn)Excel的工具(推薦)
這篇文章主要介紹了使用nodejs實現(xiàn)，JSON文件自動轉(zhuǎn)Excel的工具,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
解決Node.js使用MySQL出現(xiàn)connect ECONNREFUSED 127.0.0.1:3306的問題
這篇文章主要介紹了解決Node.js使用MySQL出現(xiàn)connect ECONNREFUSED 127.0.0.1:3306報錯的相關資料，文中將問題描述的很清楚，解決的方法也介紹的很完整，需要的朋友可以參考借鑒，下面來一起看看吧。2017-03-03
這篇文章主要為大家介紹了ChatGPT編程秀之最小元素的設計示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03