HTTP/2 服务器推送（Server Push）教程

时间 2019-11-30

标签 http 服务器推送 server push 教程栏目 HTTP/TCP 繁體版

原文原文链接

HTTP/2 协议的主要目的是提升网页性能。css

头信息（header）原来是直接传输文本，如今是压缩后传输。原来是同一个 TCP 链接里面，上一个回应（response）发送完了，服务器才能发送下一个，如今能够多个回应一块儿发送。html

服务器推送（server push）是 HTTP/2 协议里面，惟一一个须要开发者本身配置的功能。其余功能都是服务器和浏览器自动实现，不须要开发者关心。nginx

本文详细介绍服务器推送的原理和配置方法。程序员

1、传统的网页请求方式

下面是一个很是简单的 HTML 网页文件index.html。面试

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>hello world</h1>
  <img src="example.png">
</body>
</html>
复制代码

这个网页包含一张样式表style.css和一个图片文件example.png。为了渲染这个网页，浏览器会发出三个请求。第一个请求是index.html。docker

GET /index.html HTTP/1.1
复制代码

服务器收到这个请求，就把index.html发送给浏览器。浏览器发现里面包含了样式表和图片，因而再发出两个请求。后端

GET /style.css HTTP/1.1
复制代码

GET /example.png HTTP/1.1
复制代码

这就是传统的网页请求方式。它有两个问题，一是至少须要两轮 HTTP 通讯，二是收到样式文件以前，网页都会显示一片空白，这个阶段一旦超过2秒，用户体验就会很是很差。浏览器

粉丝福利：

程序员/产品/运营/测试等互联网专业资料、笔面试题获取：缓存
微信扫码关注公众号【非典型互联网】，将本文转发至朋友圈，保留10分钟以上，截图发至本公众号，便可获取干货资源连接；安全
各大互联网公司简历内推：关注公众号【非典型互联网】，在后台回复“内推”；
入群：关注公众号【非典型互联网】，在后台回复“入群”，人脉共享，一块儿交流；

微信扫码备注“入群”，可进全部互联网交流群；

2、传统方式的改进

一种解决办法就是把外部资源合并在网页文件里面，减小 HTTP 请求。好比，把样式表的内容写在<style>标签之中，把图片改为 Base64 编码的 Data URL。

另外一种方法就是资源的预加载（preload）。网页预先告诉浏览器，当即下载某些资源。好比，上例能够写成下面这样。

<link rel="preload" href="/styles.css" as="style">
<link rel="preload" href="/example.png" as="image">
复制代码

对于上例来讲，preload命令并无什么帮助。可是，若是前一个网页就使用这个命令，预加载后一个网页须要的资源，那么用户打开后一个网页时，就会感受速度飞快。

这两种方法都有缺点。第一种方法虽然减小了 HTTP 请求，可是把不一样类型的代码合并在一个文件里，违反了分工原则。第二种方法只是提早了下载时间，并无减小 HTTP 请求。

3、服务器推送的概念

服务器推送（server push）指的是，尚未收到浏览器的请求，服务器就把各类资源推送给浏览器。

好比，浏览器只请求了index.html，可是服务器把index.html、style.css、example.png所有发送给浏览器。这样的话，只须要一轮 HTTP 通讯，浏览器就获得了所有资源，提升了性能。

微信扫码备注“入群”，可进全部互联网交流群；

4、Nginx 实现

Nginx 从 1.13.9 版开始，支持服务器推送。前一篇教程已经作好了 Nginx 容器，接着就来体验一下。

首先，进入工做目录，把原来的首页删除。

$ cd nginx-docker-demo
$ rm html/index.html
复制代码

而后，新建html/index.html文件，写入本文第一节的网页源码。

另外，html子目录下面，还要新建两个文件example.png和style.css。前者能够随便找一张 PNG 图片，后者要在里面写一些样式。

h1 {
  color: red;
}
复制代码

最后，打开配置文件conf/conf.d/default.conf，将 443 端口的部分改为下面的样子。

server {
    listen 443 ssl http2;
    server_name  localhost;

    ssl                      on;
    ssl_certificate          /etc/nginx/certs/example.crt;
    ssl_certificate_key      /etc/nginx/certs/example.key;

    ssl_session_timeout  5m;

    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers   on;

    location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      http2_push /style.css;
      http2_push /example.png;
    }
}
复制代码

其实就是最后多了两行http2_push命令。它的意思是，若是用户请求根路径/，就推送style.css和example.png。

如今能够启动容器了。

$ docker container run \
  --rm \
  --name mynginx \
  --volume "$PWD/html":/usr/share/nginx/html \
  --volume "$PWD/conf":/etc/nginx \
  -p 127.0.0.2:8080:80 \
  -p 127.0.0.2:8081:443 \
  -d \
  nginx
复制代码

打开浏览器，访问 https://127.0.0.2:8081 。浏览器会提示证书不安全，不去管它，继续访问，就能看到网页了。

网页上看不出来服务器推送，必须打开"开发者工具"，切换到 Network 面板，就能够看到其实只发出了一次请求，style.css和example.png都是推送过来的。

查看完毕，关闭容器。

$ docker container stop mynginx
复制代码

微信扫码备注“入群”，可进全部互联网交流群；

5、Apache 实现实现

Apache 也相似，能够在配置文件httpd.conf或者.htaccess里面打开服务器推送。

<FilesMatch "\index.html$">
    Header add Link "</styles.css>; rel=preload; as=style"
    Header add Link "</example.png>; rel=preload; as=image"
</FilesMatch>
复制代码

6、后端实现

上面的服务器推送，须要写在服务器的配置文件里面。这显然很不方便，每次修改都要重启服务，并且应用与服务器的配置不该该混在一块儿。

服务器推送还有另外一个实现方法，就是后端应用产生 HTTP 回应的头信息Link命令。服务器发现有这个头信息，就会进行服务器推送。

Link: </styles.css>; rel=preload; as=style
复制代码

若是要推送多个资源，就写成下面这样。

Link: </styles.css>; rel=preload; as=style, </example.png>; rel=preload; as=image
复制代码

能够参考 Go、Node、PHP 的实现范例。

这时，Nginx 的配置改为下面这样。

server {
    listen 443 ssl http2;

    # ...

    root /var/www/html;

    location = / {
        proxy_pass http://upstream;
        http2_push_preload on;
    }
}
复制代码

若是服务器或者浏览器不支持 HTTP/2，那么浏览器就会按照 preload 来处理这个头信息，预加载指定的资源文件。

事实上，这个头信息就是 preload 标准提出的，它的语法和as属性的值都写在了标准里面。

7、缓存问题

服务器推送有一个很麻烦的问题。所要推送的资源文件，若是浏览器已经有缓存，推送就是浪费带宽。即便推送的文件版本更新，浏览器也会优先使用本地缓存。

一种解决办法是，只对第一次访问的用户开启服务器推送。下面是 Nginx 官方给出的示例，根据 Cookie 判断是否为第一次访问。

server {
    listen 443 ssl http2 default_server;

    ssl_certificate ssl/certificate.pem;
    ssl_certificate_key ssl/key.pem;

    root /var/www/html;
    http2_push_preload on;

    location = /demo.html {
        add_header Set-Cookie "session=1";
        add_header Link $resources;
    }
}


map $http_cookie $resources {
    "~*session=1" "";
    default "</style.css>; as=style; rel=preload";
}
复制代码

微信扫码备注“入群”，可进全部互联网交流群；

8、性能提高

服务器推送能够提升性能。网上测评的结果是，打开这项功能，比不打开时的 HTTP/2 快了8%，比将资源都嵌入网页的 HTTP/1 快了5%。

能够看到，提高程度也不是特别多，大概是几百毫秒。并且，也不建议一次推送太多资源，这样反而会拖累性能，由于浏览器不得不处理全部推送过来的资源。只推送 CSS 样式表多是一个比较好的选择。

9、参考连接

A Comprehensive Guide To HTTP/2 Server Push，by Jeremy Wagner
Introducing HTTP/2 Server Push with NGINX 1.13.9, by Nginx

（完）

做者：阮一峰，博客地址：http://www.ruanyifeng.com/blog/2018/03/http2_server_push.html

粉丝福利：

程序员/产品/运营/测试等互联网专业资料、笔面试题获取：
微信扫码关注公众号【非典型互联网】，将本文转发至朋友圈，保留10分钟以上，截图发至本公众号，便可获取干货资源连接；
各大互联网公司简历内推：关注公众号【非典型互联网】，在后台回复“内推”；
入群：关注公众号【非典型互联网】，在后台回复“入群”，人脉共享，一块儿交流；