脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → nodejs中体验http/2

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

 更新时间：2022年12月21日 08:08:10   作者：空山与新雨  
HTTP/2主要利用多路复用传输,头部压缩,服务端推送,可以减少网络延迟对性能带来的影响,优化首次访问速度,提高传输效率,下面这篇文章主要给大家介绍了关于如何在nodejs中体验http/2的相关资料,需要的朋友可以参考下

前言

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张图片同时下载，最后几乎在同时完成下载。

下面是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);

服务端推送

按照如下代码测试

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，

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

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

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

总结

到此这篇关于如何在nodejs中体验http/2的文章就介绍到这了,更多相关nodejs中体验http/2内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Node.js Domain 模块实例详解

    Node.js Domain 模块实例详解

    这篇文章主要介绍了Node.js Domain 模块实例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • node简单实现一个更改头像功能的示例

    node简单实现一个更改头像功能的示例

    本篇文章主要介绍了node简单实现一个更改头像功能的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 阿里云ecs服务器中安装部署node.js的步骤

    阿里云ecs服务器中安装部署node.js的步骤

    这篇文章给大家介绍了在阿里云ecs服务器中安装部署node.js的详细步骤，对大家安装node.js具有一定的参考借鉴价值，有需要的朋友们下面来一起看看吧。
    2016-10-10
  • 什么时候不能在 Node.js 中使用 Lock Files

    什么时候不能在 Node.js 中使用 Lock Files

    这篇文章主要介绍了什么时候不能在 Node.js 中使用 Lock Files，但是当你在开发要发布到 npm 的包时，应避免使用这类 lock file 。下面我们来一起了解一下吧
    2019-06-06
  • 解决node-sass下载不成功的问题

    解决node-sass下载不成功的问题

    这篇文章主要介绍了解决node-sass下载不成功的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • 学习Nodejs之fs模块的使用详解

    学习Nodejs之fs模块的使用详解

    这篇文章主要为大家详细介绍了Nodejs之fs模块的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-02-02
  • NodeJs操作MongoDB教程之分页功能以及常见问题

    NodeJs操作MongoDB教程之分页功能以及常见问题

    这篇文章主要给大家介绍了关于NodeJs操作MongoDB教程之分页功能以及常见问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用NodeJs具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-04-04
  • 使用nodejs实现JSON文件自动转Excel的工具(推荐)

    使用nodejs实现JSON文件自动转Excel的工具(推荐)

    这篇文章主要介绍了使用nodejs实现，JSON文件自动转Excel的工具,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-06-06
  • 解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题

    解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题

    这篇文章主要介绍了解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306报错的相关资料，文中将问题描述的很清楚，解决的方法也介绍的很完整，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-03-03
  • ChatGPT编程秀之最小元素的设计示例详解

    ChatGPT编程秀之最小元素的设计示例详解

    这篇文章主要为大家介绍了ChatGPT编程秀之最小元素的设计示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03

最新评论