根据需要加载多个 javascript 与一次加载一个大文件答案

【问题标题】：Load multiple javascripts as needed vs loading one big file once根据需要加载多个 javascript 与一次加载一个大文件
【发布时间】：2012-11-18 08:55:11
【问题描述】：

一次编写一个包含网站所有页面行为的大型 javascript 文件会更好吗？还是只加载特定于该页面的 javascript？

我知道一个大文件更适合缓存。但是我认为浏览器可能会在不需要它们的页面上运行所有类型的不必要的代码（jQuery on "ready" 的东西和附加事件）。

我也明白，HTTP 请求越少越好。所以我看到了 3 个场景：

整个网站的一个大文件
根据需要加载模块
一个特定于每个页面的组合文件，作为所需模块的组合动态生成。

什么是最好的？

如果有帮助，我有 Yii 框架。

【问题讨论】：

您始终可以使用特定于页面的条件来防止您的 JS/jQuery 执行不需要的功能。最终，这取决于您正在部署的 webapp 的类型以及它需要在页面加载时为表格带来多少功能，但标准约定是 HTTP 请求越少越好。因此，如果页面需要某个“类”，只需检查页面特定元素的存在并使用它来确定是否需要包含更多脚本/调用某些方法。

标签： javascript performance yii loading client-side

【解决方案1】：

您的想法是对的 - 通常首选大文件，但这可能会导致执行不需要的 Javascript 部分。您的目标必须是将通常需要的 Javascript 文件与仅一页需要的部分分开。然后，您可以决定是否要将其包含在您的大文件中，或者是否要继续单独加载它。尝试确定大多数用户访问的主要页面 - 那里需要的文件应该放在主文件中。

作为旁注，您可以查看Require.js 在 Javascript 中构建模块关系和按需加载。

【讨论】：

【解决方案2】：

根据您指定的选项，我将制作一个大的 Javascript 文件。一开始可能需要稍长一些的时间，但它会使应用程序的使用更加快捷。当然，这取决于每个特定情况。

我也推荐你use Head.JSloader，很简单。基本上，他们声明在第一次加载时并行加载多个文件实际上比加载单个大文件更快（至少使用 head.js）。这是因为它们是以非阻塞并行方式加载的。尤其是老一代浏览器会一个接一个地下载脚本（如下图取自 head.js 网站）：

编辑：忘了提及，加载单个文件还有一个额外的警告 - 某些设备对缓存有限制，例如，在 iPhone 4 中，限制为 25kb（非常低）。

【讨论】：

【解决方案3】：

说到 Yii 框架，他们肯定希望你只在需要时加载 js 文件（在需要 js 文件的页面上），例如：

 Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/js/myfile.js', CClientScript::POS_HEAD);
 Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/js/myfile.js', CClientScript::POS_READY);

此方法也仅在需要时加载 jQuery。但我并不完全同意，不是专门从效率的角度来看，也是从易用性的角度来看。如果你使用大量的 javascript，我建议强制 Yii 立即加载 jQuery：

Yii::app()->clientScript->registerCoreScript('jquery');

然后我有一个 js 文件，其中包含常用功能（我在网站上不止一个地方使用的功能），我也会立即加载该文件。然后，我将内联 javascript 用于特定于页面的小型 javascript sn-ps

【讨论】：

我目前充分利用“ClientScript”配置来根据需要加载脚本。我在层次结构中一直有 jQuery，所以它工作得很好（它几乎在每个页面上都加载了，而不必担心它）。现在这会加载多个文件。问题是 Yii 是否可以动态优化它...

【解决方案4】：

嗯，我们有两个相互竞争的力量。 A) 最初加载太多数据。 B) 加载数据太多次。

在这里找到平衡是一门微妙的艺术，需要了解使用模式以获得一些有根据的猜测，然后进行测试和测量，直到达到可接受的响应时间。

与其问什么是“最好的”，不如问问自己在您的网站上什么是可接受的。在典型的宽带连接上可以在不到一秒的时间内加载首页吗？慢速连接十秒钟可以吗？然后进行测量和调整，直到获得可以接受的速度。

如果您想优先考虑首页加载速度或子页面的加载速度，则需要考虑使用模式？如果你将所有的 javascript 分块到一个大文件中，你会在第一页加载时受到惩罚，但其他页面会加载得更快。反之亦然。

如果您有许多不同的页面，并且预计用户不会访问多个页面，您应该考虑为每个页面保留一个 js 文件。但是不要为每个页面创建很多脚本，尽量减少文件的数量。

一个和多个js文件的区别主要在于第一次加载。一旦缓存了一个或多个文件，就不会产生太大的影响。多个文件的坏处是当您通过网络加载时每个文件都有延迟。

最后的提醒。确保您缩小文件，如果可能添加 gzipping，并确保您的缓存标头允许浏览器正确缓存 js 文件和其他资源。

【讨论】：