具有许多异步 HTTP 调用的 JavaScript 事件处理性能

Question

TL，DR;

完整的故事可以总结为以下问题：

1. 如何在网页中进行大量动态异步 HTTP 调用时保持良好的性能？
2. GraphQL 或 WebWorker 是一个好方法吗？

完整故事

我有一个SPA CMS项目，其中动态数据来自许多不同的来源。因此，要显示包含大量数据的表，页面需要生成大量的 HTTP 调用。

我尝试的是使所有 HTTP 调用异步，一旦其中一个 HTTP 调用返回，表中的相应单元格将相应地更新。而且我敢肯定，由于错误或粗心大意，没有一个HTTP调用是以同步方式进行的。

但是，仍然存在性能问题。当大量 HTTP 调用在短时间内解析时，页面呈现就会出现问题。一旦用户尝试在两个用户输入事件之间执行交互，例如鼠标滚动等，就会有很多已解决的 HTTP 调用事件。尽管每次重新渲染回调不会花费太多时间，但如果汇总所有小时间片，它们仍然会导致性能问题。

我目前正在考虑两种可能的解决方案：

1. 在网关服务中实现 GraphQL，以减少查询总数，或者
2. 实现 WebWorker 以批量解析的 HTTP 调用，从而减少主线程中的渲染回调数量。

GraphQL 解决方案需要大量的返工，这正是我试图避免的。但是我对 Webworker 没有太多经验，它会按预期工作吗？还有其他解决方案吗？

顺便说一句，对于渲染表，我正在使用元素 UI 表组件。浏览器兼容性对我来说不是问题。

Answer 1

尽量减少离散HTTP调用的数量是一个好主意，所以#1或类似的是你应该在中长期内考虑的事情。

但是，对于#2，您可能不需要为此使用Web工作者。处理完成可能不是瓶颈，更有可能是所有导致大量回流和类似操作的小 DOM 操作。因此，如果您将它们批处理并一次应用一批，您应该能够显着减少这些更改的影响，而无需使用 Web worker 来执行此操作。