javascript - 绕过并发 ajax 调用限制的最佳实践

Question

冒着因不发布代码而被吐槽的风险，绕过 ajax 请求的 6 个并发调用限制的最佳方法是什么？

所以目前我正在使用一个应用程序，该应用程序在页面加载时最多可以有 40 个左右的 ajax 请求。对于背景，这些请求中的大多数都是针对隐藏在选项卡后面的各种图形。有一些请求可以由用户触发(例如在不刷新页面的情况下更新实体的名称)。这意味着由于并发请求的限制，用户将无法更改任何内容，直到只有 5 个其他请求在运行，这是一种 Not Acceptable 用户体验。

这可能意味着该应用的结构很糟糕，但大部分内容都不需要立即加载。

无论如何，我已经对 fetch() 和 webworkers 进行了一些研究，但找不到任何关于这些是否有助于绕过限制的信息。

一种解决方案是将资源放在不同的子域上，但这会使后端 API 不必要地复杂化(这是浏览器问题，而不是服务器问题)。

我考虑过这些方法:

• 延迟请求，直到用户主动需要它们(在我看来，这是一种糟糕的用户体验，因为他们将不得不等待很多时间，这很烦人)
• 创建一个排队系统，为用户发起的请求留出一个位置(我不确定如何实现，但它应该是可行的)
• 重组 API 以便每个请求返回更多数据(这又主要是一个感觉有点肮脏和不符合 REST 风格的后端解决方案。而且它不一定会改善加载时间)
• 链接调用，例如 Multiple Async AJAX Calls Best Practice (但是考虑到不相关端点上的调用数量不可预测，所以我认为这在这里并不实用)
• 网络 worker ？ (同样，不确定这是否有帮助，因为它用于多线程 js)
• 获取()？ (我找不到关于这是否受相同限制的信息)

Answer 1

这是非常基于意见的。

40 个请求并非不合理，但取决于您的服务器和站点设置，它可能需要相当长的时间。

对于那么多的调用，我会将其中的一些调用捆绑在一个 initializePage=X 调用中。这确实涉及一些服务器端工作。

延迟请求 不一定是坏事，具体取决于您预计的交付时间。如果可能，您可以呈现某种动画或“预期结果”，直到出现响应为止，以保持用户的愉悦。这同样适用于排队您的请求。

如果您在服务器上运行大量初始化(如安全检查)，重组您的代码以返回 bundle 中的所有内容也可以大大加快您的网站速度。

如果性能仍然是一个问题，您可以查看提供更快结果的连接，例如 EventSource或 WebSocket .这种更快的连接还允许更灵活的链接方法。例如，EventSource 支持事件，因此您可以在单个捆绑请求上设置多个事件，并在服务器返回数据时触发它们。

Webworkers 不是答案，因为这里的问题是连接速度和并发连接限制。