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

【问题标题】：How do you use HTTP/2 server push in a webapp?你如何在 webapp 中使用 HTTP/2 服务器推送？
【发布时间】：2015-12-08 05:53:05
【问题描述】：

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

【问题讨论】：

标签： http2

【解决方案1】：

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

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

至于使用此功能，您可以在网上找到许多 HTTP/2 推送示例，但our own website 确实为真实世界的站点启用了 HTTP/2 推送（不仅仅是图块示例）。

其他服务器和网站也提供 HTTP/2 推送功能，因此是时候迁移到 HTTP/2 了 :)

【讨论】：

【解决方案2】：

由大量资源组成的 Web 应用程序受益最大，因为在加载这些资源的时间和方式方面具有更大的灵活性。

查看 HTTP/2 Push 的最佳方式是在浏览器中打开 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 over TLS。

【讨论】：

我不确定我是否说清楚了，但我了解什么是 HTTP/2 推送。问题是如何在实践中使用它。不过，提到的文章非常有趣，+1 :)
谢谢@MartyIX，我写了那篇文章。老实说，你的问题对我来说很重要。 “如何在实践中使用它”是什么意思;-)？更具体地说，您看到的具体问题是什么？工作流集成？需要在某处写下什么时候推送什么？还有什么？
假设我有一个 Angular webapp，我想通过 HTTP/2 服务器推送来提高应用程序的性能。我可以用 Apache 做到这一点吗？我如何决定推送哪些资源？我应该推送多少资源？
AFAIK，现在你不能使用 Apache。未来某个未知的时间，可能是的。但这里有一点：大多数 Web 服务器，特别是 Apache 和 NginX，都经过调整以处理并发用户的负载和负载。那个目标apparently doesn't play too well with HTTP/2's cool features。因此，我对您的问题是，您更看重什么，以正常的“感知”速度从一台服务器为 10000 个并发用户提供服务，或者少一点，比如 100 个用户，速度提高一倍？

【解决方案3】：

服务器推送是 HTTP/2 在性能方面的最大进步。服务器推送正是它听起来的样子。我们可以告诉服务器在浏览器发出请求之前将内容推送到浏览器。例如，当我们请求一个 HTML 页面时，在该页面中会调用样式表、JavaScript、图像或其他东西，我们可以让服务器在发出请求之前将该内容推送到浏览器缓存中，所以一旦浏览器渲染 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);
?>

【讨论】：

【解决方案4】：

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

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

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

【讨论】：