HTTP2 服务端推送功能实操

服务器推送功能解决了什么痛点？

客户端发送请求给服务器，服务器返回请求的资源，通常是 HTML 文件，HTML 文件包含一些资源链接(比如.js, .css 等)。浏览器解析 HTML 文件，获取资源链接，然后分别请求这些资源。

这一机制的问题在于，它迫使用户等待这样一个过程：直到一个 HTML 文档下载完毕后，浏览器才能发现和获取页面的关键资源。从而延缓了页面渲染，拉长了页面加载时间。

有了 Server Push，就有了解决上述问题的方案。Server Push 能让服务器在用户没有明确询问下，抢先地“推送”一些网站资源给客户端。只要正确地使用，我们可以根据用户正在访问的页面，给用户发送一些即将被使用的资源。

代码实操

HTTP/2 Server Push with Node.js

使用内置的 http2 模块，我们可以创建一个 http2 服务器。有趣的一点在于，当 index.html 被请求时，我们会主动推送其他资源：bundle1.js 和 bundle2.js。这样的话，bundle1.js 和 bundle2.js 可以在浏览器请求它们之前就推送过去了。

bash

├── package.json
├── public
│   ├── bundle1.js
│   ├── bundle2.js
│   └── index.html
├── src
│   ├── helper.js
│   └── server.js
└── ssl
    ├── cert.pem
    └── key.pem

index.html

html

<html>
  <body>
    <h1>HTTP2 Push!</h1>
  </body>
  <script src="bundle1.js"></script>
  <script src="bundle2.js"></script>
</html>

server.js 主要是 pushStream

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

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

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

function requestHandler(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);
}

src

server.js

const fs = require('fs');
const path = require('path');
const http2 = require('http2');
const helper = require('./helper');

const { HTTP2_HEADER_PATH } = http2.constants;
const PORT = process.env.PORT || 3000;
const PUBLIC_PATH = path.join(__dirname, '../public');

const publicFiles = helper.getFiles(PUBLIC_PATH);
const server = http2.createSecureServer(
  {
    cert: fs.readFileSync(path.join(__dirname, '../ssl/cert.pem')),
    key: fs.readFileSync(path.join(__dirname, '../ssl/key.pem')),
  },
  requestHandler
);

// Push file
function push(stream, path) {
  const file = publicFiles.get(path);

  if (!file) {
    return;
  }

  stream.pushStream({ [HTTP2_HEADER_PATH]: path }, (pushStream) => {
    pushStream.respondWithFD(file.fileDescriptor, file.headers);
  });
}

// Request handler
function requestHandler(req, res) {
  const reqPath = req.url === '/' ? '/index.html' : req.url;
  const file = publicFiles.get(reqPath);

  // File not found
  if (!file) {
    res.statusCode = 404;
    res.end();
    return;
  }

  // Push 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);
}

server.listen(PORT, (err) => {
  console.log(`Server listening on ${PORT}`);
});

helper

const fs = require('fs');
const path = require('path');
const mime = require('mime');

function getFiles(baseDir) {
  const files = new Map();

  fs.readdirSync(baseDir).forEach((fileName) => {
    const filePath = path.join(baseDir, fileName);
    const fileDescriptor = fs.openSync(filePath, 'r');
    const stat = fs.fstatSync(fileDescriptor);
    const contentType = mime.lookup(filePath);

    files.set(`/${fileName}`, {
      fileDescriptor,
      headers: {
        'content-length': stat.size,
        'last-modified': stat.mtime.toUTCString(),
        'content-type': contentType,
      },
    });
  });

  return files;
}

module.exports = { getFiles };

public

bandle1

console.log('Bundle 1');
document.body.innerHTML += '<p>Bundle 1 loaded</p>';

bandle2

console.log('Bundle 2');
document.body.innerHTML += '<p>Bundle 2 loaded</p>';

ssl

cert.pem

key.pem

Node.js 8.4.0 已经开始支持 HTTP/2，执行 node 命令时，加上 --expose-http2 选项就可以使用了。

服务器推送功能解决了什么痛点？ ​

代码实操 ​

服务器推送功能解决了什么痛点？

代码实操