快捷導(dǎo)航

如何在nodejs中體驗(yàn)http/2詳解

更新時(shí)間：2022年12月21日 08:08:10 作者：空山與新雨

HTTP/2主要利用多路復(fù)用傳輸,頭部壓縮,服務(wù)端推送,可以減少網(wǎng)絡(luò)延遲對(duì)性能帶來的影響,優(yōu)化首次訪問速度,提高傳輸效率,下面這篇文章主要給大家介紹了關(guān)于如何在nodejs中體驗(yàn)http/2的相關(guān)資料,需要的朋友可以參考下

前言

2015年，HTTP/2 發(fā)布，直到2021年公司的項(xiàng)目才開始在實(shí)踐中應(yīng)用；自己對(duì)http2諸多特點(diǎn)的理解只存在于字面上，于是嘗試在nodejs中實(shí)踐一下，加深自己的理解。

多路復(fù)用

同域名下所有通信都在單個(gè)連接上完成，消除了因多個(gè) TCP 連接而帶來的延時(shí)和內(nèi)存消耗，這在大量請(qǐng)求同時(shí)發(fā)出的情況下能夠減少加載時(shí)間。

使用如下代碼查看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);

可以看到當(dāng)資源開始同時(shí)請(qǐng)求，所有的請(qǐng)求形成一個(gè)隊(duì)列，請(qǐng)求之間開始時(shí)間相差大概1ms, 因?yàn)橄螺d的是同一個(gè)圖片，50張圖片同時(shí)下載，最后幾乎在同時(shí)完成下載。

下面是http1.1的例子，通過對(duì)比發(fā)現(xiàn)瀏覽器按照自己的最大并發(fā)量同時(shí)發(fā)出請(qǐng)求，只有當(dāng)請(qǐng)求返回后才發(fā)出新的請(qǐng)求(瀏覽器開啟限流和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);

服務(wù)端推送

按照如下代碼測(cè)試

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，同時(shí)首頁加載的大小是207 B，