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

标签 ajax performance xmlhttprequest fetch-api http2

感谢 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 的一大优点。
在某些情况下它不会使用单个连接,例如未经认证的连接通过另一个连接,目前网络套接字回退到 HTTP/1.1(通过一种通过 HTTP/2 is just being standardise d 做到这一点的方法)。此外,有些浏览器会重用跨选项卡的连接,有些则不会。但一般来说它应该使用相同的连接。

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 下故意限制了一些请求,因此请注意此类事情。更多详情:Google Chrome does not do multiplexing with http2

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 并测试,测试,测试!

关于ajax - 通过 Ajax 向同一个 HTTP/2 服务器请求许多资源的最快方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51776513/

相关文章:

javascript - 为什么使用 window.variable 访问变量速度较慢?

php - XMLHttpRequest 进度跟踪和 Symfony (CORS)

JavaScript 不适用于高于 Chrome mobile 45 的版本

javascript - jsp全日历选择: not working

jquery - 使用ajax在asp.net中隐藏代码背后的表行

javascript - Ajax.BeginForm() 无法异步工作

android - 蓝牙是否足够快以在两部 Android 手机之间以原始字节数组的形式传输音频数据流?

mysql - 第一个查询行为不稳定

android - 在 Android axios (XMLHttpRequest) 上使用阿拉伯语和波斯语在 React Native 中损坏的字符

php - 从客户端向服务器发送变量 | JSON 与 POST