chaihongjun.me

体验nginx端的HTTP2 Server Push

体验nginx端的HTTP2 Server Push

最新的nginx主线版本(1.13.9)终于支持http2 server push了:至于server push是什么,有什么好处,不赘述。

Changes with nginx 1.13.9                                        20 Feb 2018

    *) Feature: HTTP/2 server push support; the "http2_push" and
       "http2_push_preload" directives.

    *) Bugfix: "header already sent" alerts might appear in logs when using
       cache; the bug had appeared in 1.9.13.

    *) Bugfix: a segmentation fault might occur in a worker process if the
       "ssl_verify_client" directive was used and no SSL certificate was
       specified in a virtual server.

    *) Bugfix: in the ngx_http_v2_module.

    *) Bugfix: in the ngx_http_dav_module.

于是将本地服务器的nginx从最新的稳定版(1.12.2)升级到1.13.9。并且根据对应的 

http2_push

http2_push_preload

指令,做相应的配置。

Syntax:http2_push uri | off;
Default:
http2_push off;
Context:httpserverlocation

This directive appeared in version 1.13.9.

Pre-emptively sends (pushes) a request to the specified uri along with the response to the original request. Only relative URIs with absolute path will be processed, for example:

http2_push /static/css/main.css;

The uri value can contain variables.

Several http2_push directives can be specified on the same configuration level. The off parameter cancels the effect of the http2_push directives inherited from the previous configuration level.

Syntax:http2_push_preload on | off;
Default:
http2_push_preload off;
Context:httpserverlocation

This directive appeared in version 1.13.9.

Enables automatic conversion of preload links specified in the “Link” response header fields intopush requests.

默认情况下都是off,关闭的,需要手动去打开,这两个指令都支持在http,server或者location段内配置。一般在server段内配置好全站需要的资源引用即可。而在location端内,则可以针对具体类似页面做配置。

针对http2_push指令这里需要注意的几点:

  1. http2_push 后面必须跟的是资源的绝对路径

  2. 该资源路径可以包含变量

  3. 同一个配置级别(比如,server段内)可以配置多个http2_push

针对http2_push_preload这个指令,用于设置是否让在页面内<link>标记的资源是否主动推送。

这里贴上部分配置:

# the whole www.hzshuangmei.com site
http2_push /alidata1/web/static.hzshuangmei.com/img/pc/favicon.ico ;
http2_push /alidata1/web/static.hzshuangmei.com/img/pc/kst/default.png ;
http2_push /alidata1/web/static.hzshuangmei.com/css/pc/common.css ;
http2_push /alidata1/web/static.hzshuangmei.com/js/pc/layer/theme/default/layer.css ;
http2_push /alidata1/web/static.hzshuangmei.com/js/pc/common.js ;
http2_push /alidata1/web/static.hzshuangmei.com/js/pc/layer/layer.js ;
http2_push /alidata1/web/static.hzshuangmei.com/js/pc/kst_popup.js ;

# the index page
location =/{

  http2_push /alidata1/web/static.hzshuangmei.com/css/pc/index.css ;
  http2_push /alidata1/web/static.hzshuangmei.com/js/pc/js ;

}

# the brand page
location ^~/brand/ {

  http2_push /alidata1/web/static.hzshuangmei.com/css/pc/brandzt/theme.css;
  http2_push /alidata1/web/static.hzshuangmei.com/js/pc/brandzt/theme.js ;

}

# the list of  the projects pages
location ^~/projects/*$
{
  http2_push /alidata1/web/static.hzshuangmei.com/css/pc/list_project.css ;
  http2_push /alidata1/web/static.hzshuangmei.com/js/pc/list_project.js ;
}

# the project landing page
location  ^~/projects/*/*.html$ {
  http2_push /alidata1/web/static.hzshuangmei.com/css/pc/tjb.css ;
  http2_push /alidata1/web/static.hzshuangmei.com/img/pc/tjb_bg.jpg ;
}

# the list of the doctors pages
location ^~/doctors/*$
{
  http2_push /alidata1/web/static.hzshuangmei.com/css/pc/list_doctors.css ;
  http2_push /alidata1/web/static.hzshuangmei.com/js/pc/list_doctors.js ;
}
# the doctor landing page
location  ^~/doctors/*/*.html$
{
  http2_push /alidata1/web/static.hzshuangmei.com/css/pc/tjb.css ;
  http2_push /alidata1/web/static.hzshuangmei.com/img/pc/tjb_bg.jpg ;
}

# the list of the cases pages
 location ^~/cases/*$
{
   http2_push /alidata1/web/static.hzshuangmei.com/css/pc/list_case.css ;
   http2_push /alidata1/web/static.hzshuangmei.com/js/pc/list_case.js ;
}

# the case landing page
location  ^~/cases/*/*.html$
{
  http2_push /alidata1/web/static.hzshuangmei.com/css/pc/article_case.css ;
  http2_push /alidata1/web/static.hzshuangmei.com/css/pc/article_common.css ;
   http2_push /alidata1/web/static.hzshuangmei.com/js/pc/article_common.js ;
}

# the list of the news pages
 location ^~/news/*$
{
   http2_push /alidata1/web/static.hzshuangmei.com/css/pc/list_news.css ;
   http2_push /alidata1/web/static.hzshuangmei.com/js/pc/list_news.js ;
}

# the news landing page
location  ^~/news/*/*.html$
{
  http2_push /alidata1/web/static.hzshuangmei.com/css/pc/article_common.css ;
  http2_push /alidata1/web/static.hzshuangmei.com/js/pc/article_common.js;
}

将上面的文件引入到主机配置文件中。另外在http段内设置:

http2_push_preload on;

体验效果:

QQ截图20180223152855.png

检测验证http/2 server push

可以使用以下两种方法之一轻松验证服务器推送是否有效:

1.Web浏览器中的开发人员工具

2.一个命令行的HTTP / 2客户端如 nghttp

使用开发人员工具进行验证(Google Chrome)

以下以Google Chrome为例,说明如何使用Web浏览器中的开发人员工具来验证服务器推送是否有效。在该图中,Chrome开发人员工具的“ 网络”标签上的“ 启动器”列指出,作为/demo.html请求的一部分,有多个资源被推送到客户端。

http2-server-push-chrome-dev-tools.png

使用命令行客户端进行验证(nghttp)

除了Web浏览器工具,您还可以使用nghttp2.org项目中的nghttp命令行客户端来验证服务器推送是否有效。您可以从GitHub下载命令行客户端,或在可用的位置安装相应的操作系统软件包。对于Ubuntu,请使用该软件包。nghttpnghttp2-client


在输出中,星号(*)表示服务器推送的资源。

$ nghttp -ans https://example.com/demo.htmlid  responseEnd requestStart  process code size request path
 13    +84.25ms       +136us  84.11ms  200  492 /demo.html
  2    +84.33ms *   +84.09ms    246us  200  266 /style.css
  4   +261.94ms *   +84.12ms 177.83ms  200  40K /image2.jpg
  6   +685.95ms *   +84.12ms 601.82ms  200 173K /image1.jpg

参考资料:

https://www.nginx.com/blog/nginx-1-13-9-http2-server-push/

知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者:柴宏俊»