Node.js learning tutorial HTTP/2 server push example sharing

This article mainly introduces you to the relevant information about HTTP/2 server push in the Node.js learning tutorial. The article introduces it in great detail through sample code. It has certain reference learning value for everyone's study or work. Friends who need it Let’s learn together with the editor below. Hope it helps everyone.

Preface

The recent release of Node.js v8.4+ brings an experimental version of HTTP/2, which you can start by setting the parameter --expose-http2.

In this article, I will introduce the most important aspect of HTTP/2, server push, and create a small Node.js program example to use it. Not much to say below, let’s take a look at the detailed introduction.

About HTTP/2

The purpose of HTTP/2 is to reduce latency by supporting complete request and response multiplexing, minimizing protocol overhead by effectively compressing HTTP header fields, and Added support for request prioritization and server push.

Server Push

HTTP/2 Server Push allows the server to send resources to the browser before the browser requests it.

Before we move to HTTP/2, let’s see how it works with HTTP/1:

In HTTP/1, the client sends a request to the server , the server returns an HTML file containing many links to external resources (.js, .css, etc. files). When the browser processes this initial HTML file, it starts parsing these links and loading them individually.

View the image of the demo loading process below. Note the independent requests on the timeline and the initiation of these requests:

HTTP/1 Resource Loading

This is how HTTP/1 works, this That's how we developed the app over the years. Why change it?

The problem with the current approach is that the user must wait for the browser to parse the response, discover the link and obtain the resource. This delays rendering and increases load times. There are some solutions like inlining some resources but that also makes the initial response bigger and bigger.

This is where the HTTP/2 server push feature comes into view, as the server can send resources to the browser before the browser requests it.
Take a look at the image below, a website that provides the same service over HTTP/2. View the timeline and launcher. You can see that HTTP/2 multiplexing reduces the number of requests and the resource is sent immediately with the initial request.

HTTP/2 Server Push

Let’s see how to use HTTP/2 Server Push in Node.js today to speed up client loading times .

A Node.js HTTP/2 server push case

By loading the built-in http2 module, we can create our server just like we use the https module.

The interesting part is pushing the other resources when index.html is requested:

const http2 = require('http2') 
const server = http2.createSecureServer( 
 { cert, key },
 onRequest
)

function push (stream, filePath) { 
 const { file, headers } = getFile(filePath)
 const pushHeaders = { [HTTP2_HEADER_PATH]: filePath }

 stream.pushStream(pushHeaders, (pushStream) => {
 pushStream.respondWithFD(file, headers)
 })
}

function onRequest (req, res) { 
 // Push files with index.html
 if (reqPath === '/index.html') {
 push(res.stream, 'bundle1.js')
 push(res.stream, 'bundle2.js')
 }

 // Serve file
 res.stream.respondWithFD(file.fileDescriptor, file.headers)
}

This way the bundle1.js and bundle2.js resources are sent to the browser even before it asks for them.

You can view the complete case: https://github.com/RisingStack/http2-push-example

HTTP/2 & Node

HTTP/2 can help We optimize communication between our clients and servers in many ways.

With server push, we can send resources to the browser, reducing the user's initial load time.

Related recommendations:

Explanation of HTML5 server push events

Detailed introduction to server push events

PHP Web real-time message background server push technology GoEasy

The above is the detailed content of Node.js learning tutorial HTTP/2 server push example sharing. For more information, please follow other related articles on the PHP Chinese website!