应用程序加载时间内分离的javascript文件的开销

Question

我公司正在广泛使用javascript构建单页面应用程序。随着时间的推移，相关html页面中包含的javascript文件数量也越来越大。

我们有一个程序可以在集成过程中对javascript文件进行优化，但它不会合并它们。所以文件数量没有减少。

具体地说，这意味着当页面加载时，浏览器需要逐个启动http请求时逐个启动javascript文件。

是否有人有指标或某种基准来表明逐个请求javascript文件的开销在多大程度上确实是一个需要将文件合并为一个文件的问题？

由于

Answer 1

这实际上取决于服务器允许的用户数和连接数以及客户端的最大连接数。

通常，浏览器可以同时执行多个HTTP请求，因此从理论上讲，使用一个javascript文件或少数几个文件应该没什么区别。

您不仅需要考虑javascript文件，当然也要考虑图像，因此大量文件确实可以减慢速度（如果您达到服务器或客户端同时连接的最大数量）。因此，合并这些文件是明智的。

Answer 2

@Patrick已经解释了合并的好处。然而，有许多小文件也有好处。默认情况下，浏览器会为每个域提供最大并行请求数。它应该是HTTP标准的2，但浏览器不再遵循它。这意味着超出该限制的请求会等待。

您可以使用子域并将请求从它们重定向到您的服务器。然后，您可以以这样的方式对客户端进行编码，即它将为每个文件使用唯一的子域。因此，您将能够同时下载所有文件（请求不会排队），从而有效提高性能（请注意，为了处理流量，您可能需要更多静态文件服务器）。

我还没有看到这在现实生活中被使用，但我认为这是一个值得一提和测试的想法。相关：

Max parallel http connections in a browser?

Answer 3

我认为你应该看看你的应用程序架构，而不是考虑那里的内容。

但是这个网站应该给你一个好主意：http://www.browserscope.org/?category=network

浏览器和服务器可能有不同的规则。如果您搜索http请求限制，您会发现很多帖子。例如，最大http请求限制是每个域。

但是谈一谈软件开发。我喜欢基于组件的方法。

您应该按组件对文件进行分组。根据您的应用程序要求，您可以首先加载必需组件，然后加载所需较少的组件或即时加载。我不认为你应该下载整个应用程序，如果它很庞大，并且有很多不同的功能，可能会或可能不会被用户全部使用。