根据您在屏幕截图中提供的有限信息,我无法解释为什么有时使用 HTTP/1.1 而不是其他时间,因为这不应该发生。
您是否 100% 确定它们的来源相同?资源是否可能是从缓存中提供的,并且是否缓存在 HTTP/1.1 下?
另一方面,您为什么在同一页面加载中两次请求同一来源,因为这似乎是错误的?对于更改的数据(例如 JSON 请求)来说足够公平,但不明白为什么要多次加载 jquery-UI 甚至加载相同的 css 文件?似乎是一个非常奇怪的用例,至少您应该缓存它以再次使用它。
对于您的第二个问题,在 HTTP/2 下,相同的连接被重复用于相同的来源(如果您在具有相同 https 证书的相同 IP 地址上有一个单独的虚拟主机,则在某些用例中这包括相同的效果来源)。这不会导致前端阻塞,因为 HTTP/2 协议专为这种情况而设计,并使用多路复用来混合请求。
但是,这确实会改变请求在开发工具中的显示方式,具体取决于客户端、服务器和带宽。例如,假设您请求两个资源,每个资源都需要 5 秒的时间来下载。在 HTTP/1.1 下,您会看到:
示例
Request 1: start 0 seconds, end 5 seconds.
Request 2: start 5 seconds, end 10 seconds.
Total time to download could be calculated as: 5s + 5s = 10s
Overall Page load time would be 10 seconds
在 HTTP/2 下,您可能会看到这一点(假设第一个请求优先被优先发送完整):
示例 2a
Request 1: start 0 seconds, end 5 seconds.
Request 2: start 0 seconds, end 10 seconds.
Total time **looks** be 5s + 10s = 15s
Overall Page load time would still be 10 seconds
或者,如果您有足够的带宽同时处理飞行中的两个请求并且如果服务器响应第二个请求比第一个请求晚一秒,它可能看起来像这样:
示例 2b
Request 1: start 0 seconds, end 5 seconds.
Request 2: start 0 seconds, end 6 seconds.
Total time **looks** be 5s + 6s = 11s
Overall Page load time would be 6 seconds
如果您尝试对各部分求和,即使示例 2a 下的总时间相同,但实际上在示例 2b 下快 4 秒,这一点在 HTTP/2 下都“看起来”较慢。您无法在 HTTP/1.1 和 HTTP/2 之间的开发者工具中比较基于同类的单个请求。
这与比较多个 HTTP/1.1 请求的方法相同(浏览器通常为每个主机打开 4-8 个连接,而不仅仅是一个),除了在 HTTP/2 下打开和管理多个连接没有开销,因为它已经融入协议。而且HTTP/2下没有4-8个限制,通过浏览器和服务器往往会实现一个Apache defaults to 100 for example)。
说了这么多,我仍然认为在客户端和服务器上仍有许多优化工作要做,以充分利用 HTTP/2。互联网还针对 HTTP/1.1 及其工作方式进行了大量优化,因此可能需要撤消或至少调整其中的一些内容,以充分利用 HTTP/2。例如,页面加载通常会加载 HTML,然后是 CSS,然后是自然导致优先级的图像。在 HTTP/2 下,您可以同时请求所有资源,但实际上应该优先考虑 CSS,例如图像。大多数浏览器都这样做,但它们是否以最优化的方式做到这一点?