通过 Ajax 向同一个 HTTP/2 服务器请求许多资源的最快方法
Fastest way to request many resources via Ajax to the same HTTP/2 server
感谢HTTP/2的one connection per origin principle,浏览器可以在加载网页时并行加载许多资源(脚本、图像等),但是脚本应该如何做同样的事情动态的东西?
例如,如果一个脚本创建了 5 个 XHR 对象并并行调用同一台服务器,它们是否都会重用同一个 TCP 连接?如果脚本需要通过 Ajax 从同一台服务器请求 100 个资源怎么办?它应该创建 100 个单独的 XHR 对象还是应该创建少量并在每次请求完成时重用它们?如果是的话,在HTTP/2时代有多少是最优的?
一般来说,很难找到有关 XHR(和较新的 Fetch API)的浏览器在 HTTP/2 上究竟做了什么的底层细节,以及什么是最好的做浏览器在页面加载时所做的事情的方法,即尽可能快地加载几十个小资源。
For example, if a script creates 5 XHR objects and makes parallel calls to the same server, will they all reuse the same TCP connection?
如果浏览器和服务器都支持 HTTP/2 那么是的,它们会自动执行此操作,您无需对 JavaScript 进行任何更改。这是 HTTP/2 实施方式的一大优点。
有些情况下它不会使用单个连接,例如未经授权的连接通过另一个连接进行,目前 Web 套接字回落到 HTTP/1.1(通过一种方式在 HTTP/2 is just being standardised 上实现)。此外,有些浏览器会重用跨选项卡的连接,有些则不会。但一般来说应该使用相同的连接。
What if the script needs to request 100 resources from the same server via Ajax? Should it create 100 separate XHR objects or should it create a small amount and reuse them each time a request completes?
您可以发送 100 个请求。服务器通常有限制(100 到 120 是常见的),您可以在发送如此多的请求时创建下载争用,因此最好少做一些。 Chrome 在发送如此多的请求时也发现了性能问题,因此故意将一些请求限制在 HTTP/2 以下,因此请注意此类问题。此处有更多详细信息:
If so, how many is optimal in the era of HTTP/2?
一个非常有趣的问题 - 没有快速的答案!
In general, it's hard to find the low-level details about exactly what browsers are doing with HTTP/2 when it comes to XHR (and the newer Fetch API) and exactly what is the best way to do what the browser does on page load, ie load dozens of small resources as quickly as possible.
同意。而且,由于 HTTP/2 仍然相对较新,因此它的变化也很大。最好是尽可能熟悉 HTTP/2 并测试、测试、测试!
感谢HTTP/2的one connection per origin principle,浏览器可以在加载网页时并行加载许多资源(脚本、图像等),但是脚本应该如何做同样的事情动态的东西?
例如,如果一个脚本创建了 5 个 XHR 对象并并行调用同一台服务器,它们是否都会重用同一个 TCP 连接?如果脚本需要通过 Ajax 从同一台服务器请求 100 个资源怎么办?它应该创建 100 个单独的 XHR 对象还是应该创建少量并在每次请求完成时重用它们?如果是的话,在HTTP/2时代有多少是最优的?
一般来说,很难找到有关 XHR(和较新的 Fetch API)的浏览器在 HTTP/2 上究竟做了什么的底层细节,以及什么是最好的做浏览器在页面加载时所做的事情的方法,即尽可能快地加载几十个小资源。
For example, if a script creates 5 XHR objects and makes parallel calls to the same server, will they all reuse the same TCP connection?
如果浏览器和服务器都支持 HTTP/2 那么是的,它们会自动执行此操作,您无需对 JavaScript 进行任何更改。这是 HTTP/2 实施方式的一大优点。
有些情况下它不会使用单个连接,例如未经授权的连接通过另一个连接进行,目前 Web 套接字回落到 HTTP/1.1(通过一种方式在 HTTP/2 is just being standardised 上实现)。此外,有些浏览器会重用跨选项卡的连接,有些则不会。但一般来说应该使用相同的连接。
What if the script needs to request 100 resources from the same server via Ajax? Should it create 100 separate XHR objects or should it create a small amount and reuse them each time a request completes?
您可以发送 100 个请求。服务器通常有限制(100 到 120 是常见的),您可以在发送如此多的请求时创建下载争用,因此最好少做一些。 Chrome 在发送如此多的请求时也发现了性能问题,因此故意将一些请求限制在 HTTP/2 以下,因此请注意此类问题。此处有更多详细信息:
If so, how many is optimal in the era of HTTP/2?
一个非常有趣的问题 - 没有快速的答案!
In general, it's hard to find the low-level details about exactly what browsers are doing with HTTP/2 when it comes to XHR (and the newer Fetch API) and exactly what is the best way to do what the browser does on page load, ie load dozens of small resources as quickly as possible.
同意。而且,由于 HTTP/2 仍然相对较新,因此它的变化也很大。最好是尽可能熟悉 HTTP/2 并测试、测试、测试!