如何在nodejs中体验http/2详解

作者:空山与新雨 时间:2024-05-05 09:21:48 

前言

2015年,HTTP/2 发布,直到2021年公司的项目才开始在实践中应用;自己对http2诸多特点的理解只存在于字面上,于是尝试在nodejs中实践一下,加深自己的理解。

多路复用

同域名下所有通信都在单个连接上完成,消除了因多个 TCP 连接而带来的延时和内存消耗,这在大量请求同时发出的情况下能够减少加载时间。

使用如下代码查看http2环境下,资源下载的情况(浏览器开启限流和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张图片同时下载,最后几乎在同时完成下载。

如何在nodejs中体验http/2详解

下面是http1.1的例子,通过对比发现浏览器按照自己的最大并发量同时发出请求,只有当请求返回后才发出新的请求(浏览器开启限流和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);

如何在nodejs中体验http/2详解

服务端推送

按照如下代码测试

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,

如何在nodejs中体验http/2详解

注释掉stream.pushStream部分后,不使用推送,资源加载如下,style.css大小是89B, 同时首页加载的大小是182B,

如何在nodejs中体验http/2详解

综上所看,服务端推送可以提前加载资源,优化非首页加载有益。

令人高兴的是,因为使用率低,chrome在105版本后不再支持http2的服务端推送,导致这个特点在前端开发中可以忽略了。并且如果要测试改特点需要使用低版本的chrome,比如本例子使用的是chrome 96 mac版本。

本文所用代码:https://github.com/blank-x/pg/tree/master/http2,nodejs版本是v16.19.0.

来源:https://www.cnblogs.com/walkermag/p/16995319.html

标签:nodejs,http/2,http
0
投稿

猜你喜欢

  • mysql到oracle的移植

    2011-01-29 16:23:00
  • JavaScript之Getters和Setters 平台支持等详细介绍

    2024-04-19 09:45:18
  • Asp无组件上传进度条解决方案

    2010-04-24 16:01:00
  • Security安装 Elastic SIEM 和 EDR的超详细教程

    2022-03-08 19:55:43
  • golang中的单引号转义问题

    2023-07-07 07:20:22
  • 解决Linux下Tomcat向MySQL插入数据中文乱码问题

    2024-01-29 13:06:36
  • Python学习之不同数据类型间的转换总结

    2021-10-04 06:06:57
  • MySQL查看、创建和删除索引的方法

    2024-01-22 01:02:46
  • sql添加数据后返回受影响行数据

    2011-11-03 17:18:18
  • python中实现修改图像分辨率大小

    2021-05-06 06:23:22
  • 如何利用PyQt5制作一个简单的登录界面

    2023-11-18 20:36:31
  • Python同时处理多个异常的方法

    2021-12-24 11:20:56
  • 截字符串 去除HTML标记

    2023-07-29 17:01:08
  • Python+OpenCV六种实时图像处理详细讲解

    2022-06-14 10:47:27
  • Dreamweaver打造多彩文字链接

    2007-11-11 18:59:00
  • python实现在字符串中查找子字符串的方法

    2022-07-03 15:37:50
  • 关于Python Selenium自动化导出新版WOS(web of science)检索结果的问题

    2022-12-15 02:20:56
  • PHP后台实现微信小程序登录

    2024-03-14 22:17:25
  • Python DataFrame设置/更改列表字段/元素类型的方法

    2021-03-24 07:52:48
  • PHP微信支付实例解析

    2024-05-02 17:15:56
  • asp之家 网络编程 m.aspxhome.com