根据需要加载多个javascripts，然后加载一个大文件

Question

最好一次编写一个包含网站所有页面行为的大javascript文件吗？或者只加载特定于该页面的JavaScript？

据我所知，一个大文件更适合缓存。但是我认为浏览器可能会运行所有不必要的代码（jQuery on＆＃34; ready＆＃34; stuff and attachment events）到不需要它们的页面。

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

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

什么是最好的？

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

Answer 1

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

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

Answer 2

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

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

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

Answer 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的小片段

Answer 4

嗯，我们必须竞争。 A）最初加载到大量数据。 B）多次加载数据。

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

不要问什么是“最好的”，你应该问问自己网站上可接受的内容。在典型的宽带连接上在不到一秒的时间内加载首页OK。慢速连接上十秒钟好吗？然后进行测量和调整，直到速度可以接受为止。

如果要优先考虑首页加载速度或加载子页面的速度，可能会考虑使用模式的某些事项？如果你将所有的javascript分成一个大文件，你会在第一页加载时受到惩罚，但其他页面的加载速度会更快。反过来说。

如果您有许多不同的页面，并且不希望用户访问多个页面，则应考虑为每个页面保留一个js文件。但是不要为每个页面创建许多脚本，尽可能少地保留文件数。

一个和多个js文件之间的差异主要是在第一次加载时。缓存后，一个或多个文件不会产生很大的影响。多个文件的坏处是当您通过网络加载时每个文件都有延迟。

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