通过Ajax向同一HTTP / 2服务器请求许多资源的最快方法

Question

得益于HTTP / 2的“ 每个来源一个连接”的原理，浏览器可以在加载网页时（脚本，图像等）并行加载许多资源，但是脚本应如何动态地执行相同的操作？

例如，如果脚本创建5个XHR对象并并行调用同一服务器，它们是否都将重用同一TCP连接？如果脚本需要通过Ajax从同一服务器请求100个资源怎么办？它应该创建100个单独的XHR对象还是应该创建少量并在每次请求完成时重用它们？如果是这样，那么在HTTP / 2时代有多少个最优选择？

通常，很难找到有关XHR（以及较新的Fetch API）浏览器正在使用HTTP / 2进行操作的低层详细信息，以及查找浏览器在页面加载时执行操作的最佳方法的确切信息，即尽快加载数十个小资源。

Answer 1

例如，如果脚本创建5个XHR对象并并行调用同一服务器，它们是否都将重用同一TCP连接？

如果浏览器和服务器均支持HTTP / 2，则可以，它们将自动执行此操作，而无需您对JavaScript进行任何更改。这是有关如何实现HTTP / 2的伟大事情之一。

在某些情况下，它不会使用单个连接，例如，非凭据连接会通过另一个连接，并且当前Web套接字会回退到HTTP / 1.1（通过标准化在HTTP / 2 上进行连接的方式）。另外，有些浏览器会跨选项卡重用连接，有些则不会。但通常应使用相同的连接。

如果脚本需要通过Ajax从同一服务器请求100个资源怎么办？它应该创建100个单独的XHR对象还是应该创建少量并在每次请求完成时重用它们？

您可以发送100个请求。服务器通常有限制（常见的限制是100到120），并且您可以在发送大量请求时创建下载争用，因此最好减少处理。Chrome在发送大量请求时也发现了性能问题，因此故意限制了HTTP / 2下的某些请求，因此请注意此类情况。此处有更多详细信息：Google Chrome浏览器不与http2进行多路复用

如果是这样，那么在HTTP / 2时代有多少个最优选择？

一个非常有趣的问题-没有快速的答案！

通常，很难找到有关XHR（以及较新的Fetch API）浏览器正在使用HTTP / 2进行操作的低层详细信息，以及执行浏览器在页面加载时执行操作的最佳方法的确切信息，即尽快加载数十个小资源。

同意 而且，由于HTTP / 2仍然是相对较新的，因此它也仍在改变很多。最好是尽可能地熟悉HTTP / 2并进行测试，测试，测试！