如何在webapp中使用HTTP / 2服务器推送？

Question

我从高级角度理解HTTP / 2服务器推送是什么。有没有人有一个具体的例子，你必须要做什么才能在网站上使用这个功能？

Answer 1

Jetty Project（免责声明，我是提交者）在Jetty 9.3.x中实现HTTP/2。

它还率先推出了SPDY Push，然后是HTTP/2 Push，通过向您的Web应用程序添加Jetty提供的Servlet过滤器，enable HTTP/2 Push实际上非常简单。

至于使用此功能，您可以在线找到许多HTTP / 2推送示例，但our own website确实为现实世界网站启用了HTTP / 2推送（不仅仅是一个磁贴示例）。

其他服务器和站点也提供HTTP / 2推送功能，所以现在是时候转移到HTTP / 2了：）

Answer 2

由大量资源组成的Web应用程序是最受益的，因为在何时以及如何加载这些资源方面有更多的灵活性。

查看HTTP / 2推送操作的最佳方法是在浏览器中打开devtools的网络面板（在大多数浏览器中为F12或Ctrl + Shift-I），并检查网站加载浏览器缓存的方式。 Push的目的是减少延迟，因此您应该看到一些没有任何等待时间的请求。在下图中，那些是第一次进入域名后的所有请求www.zunzun.se：

HTTP / 2推送非常棒，无需创建资源包although some times they are needed anyway。

This article，您应该打开devtools网络面板以查看实际操作中的概念，解释了HTTP / 2如何将RequireJS（一个Javascript模块加载器）与AngularJS（一个依赖大量依赖的Javascript框架）相结合在模块中，无需合并所有Javascript源文件。毋庸置疑，这有助于缓存。

如果您想更详细地查看效果效果，可以通过此other URL打开同一篇文章，该文章使用纯HTTP / 1.1而不是TLS。

Answer 3

服务器推送是HTTP / 2中性能最大的进步。服务器推送正是它听起来的样子。我们可以告诉服务器在浏览器发出请求之前将内容推送到浏览器。因此，例如，当我们请求HTML页面时，在该页面中将调用样式表，JavaScripts或图像或其他内容，我们可以让服务器在发出请求之前将该内容推送到浏览器缓存中，所以一旦浏览器呈现HTML并找到对该文件的引用，它就已经在缓存中等待它了。 例如。在PHP中，您可以实现如下的服务器推送。请将您的折叠内容作为标题的一部分。

    <?php
function push_to_browser($as, $uri) {
    header('Link: ' . $uri . '; rel=preload; as=' . $as, false);
}
$assets = array(
'<//fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,700,900>' => 'style',
    '</style-main.css>' => 'style',
'</images/healthInsurance/desktop/background_image.jpg>'=> 'image'
);
array_walk( $assets, push_to_browser);
?>

Answer 4

首先，您的Web服务器需要支持它。 其次，您需要通过添加http标头告诉服务器要推送哪些文件：

例如，这将告诉服务器推送bg.jpg和analytics.js：

link:</images/bg.jpg>; rel=preload; as=image,</analytics.js>; rel=preload; as=script