Example analysis of HTTP/2 server push in Node.js

Preface

The recent release of Node.js v8.4+ has brought a trial version of HTTP/2, you can set it yourself Start with 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 support complete request and responsemultiplexing Reduce latency and minimize protocol overhead by effectively compressing HTTP header fields, while adding support for request priority 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 HTTP/ 1 works, that's how we've developed apps for so many 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 resources are 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 like We use the https module the same.

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.

HTTP/2 & Node

HTTP/2 can help us optimize the communication between our client and server in many ways.

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

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