javascript UI组件制作了太多的http请求。知道如何优化这个吗？

Question

这个问题完全基于假设。可能是也可能不是有效问题。无论如何，在这里它

假设我们有一些带有一些数字的重量级javascript客户端应用程序 UI组件/小部件，每个小部件都有 从

查询数据的端点

在页面加载时，这些组件将发出http请求。 多个;到多个不同的端点。

显然我们看到http请求的数量会增加 与传统网站相比，客户端架构较重 UI是从服务器端生成的。

示例案例：

• 小部件A请求资源A
• 小部件B请求资源B

当然，我们可以通过以下方式最小化http请求：

• 父窗口小部件请求返回{资源A，资源B}
的端点
• 父窗口小部件将数据分发到窗口小部件A
• 父窗口小部件将数据分发到窗口小部件B

这可以通过基于业务逻辑对相关小部件进行分组来实现

并非所有人都可以这样构成。即使它可以，如何保持代码模块化？ 对于大型javascript应用程序是否有任何众所周知的设计模式。性能？ 也许我在思考，因为我当然没有数字。 有谁想过？

Answer 1

对于初学者我会考虑创建一个客户端JavaScript库来处理获取/发送数据并使所有小部件都使用此API。

通过这种方式，您可以在一个位置优化/分组数据流到/来自所有小部件。

Answer 2

想到的一个想法（不会减少传输的数据量，但会减少HTTP请求的数量）是通过您控制的一些常见Javascript接口在客户端路由所有AJAX请求。

然后，不是每个UI请求发送一个HTTP请求，而是等待几毫秒并批处理在该时间间隔内发生的所有请求，只发送一个整个批处理的HTTP请求（您必须是小心只对进入服务器的请求执行此操作。）

在服务器上，您可以拥有一个特殊的通用“批处理”端点，该端点在内部为所有批处理请求提供服务（最好是并行处理），并以批处理响应的形式返回结果。

然后客户端将批处理结果分发给原始请求者。

请注意，这仅适用于所有请求所需的服务时间大致相同的情况;当所有其他子请求都已完成时，您不希望批量响应等待30秒以完成一个子请求。您可以用黑名单或其他东西来解决这个问题。

此外，尝试确定需要首先处理哪些请求并为其分配优先级！

Answer 3

听起来你想要的是所有数据请求的中央队列。它自己的每个小部件都可以通过排队特定请求来发出请求。然后，您将拥有一段共同的代码来检查队列中的所有请求，并确定它们是否可以进行一些优化（在同一端点的一个请求中请求多个数据）。

使用这种类型的设计模式仍然保持所有小部件模块化，但有一个小代码库来处理请求的优化。

从技术上讲，这是如何工作的，你将创建一个库函数来向队列添加请求。该函数需要端点，数据就绪时的回调函数以及请求的描述。每个小部件都会调用这个常用函数来进行数据请求。

这个常用函数会将每个请求放入队列，然后执行setTimeout() 0ms（如果尚未设置）。当完成当前执行线程时将调用setTimeout()，这将是当前对此当前初始化线程的所有请求都在队列中时。然后可以检查队列，并且可以发送对可以组合成一个请求和请求的同一端点的任何请求。当数据到达时，分离出单独的数据，并调用相应的小部件回调。

如果缓存数据会有所帮助（如果发生完全相同数据的多次请求），该层也可以实现缓存。