提问人：Nathan H 提问时间：11/18/2012 更新时间：7/1/2021 访问量：1931
根据需要加载多个 javascript，而不是一次加载一个大文件
Load multiple javascripts as needed vs loading one big file once
问：
一次为网站的所有页面编写一个具有行为的大型 javascript 文件是否更好？还是只加载特定于该页面的 javascript？
我知道一个大文件更适合缓存。但是，我认为浏览器可能会将所有不必要的代码（jQuery，关于“就绪”的东西和附加事件）运行到不需要它们的页面。
我也明白 HTTP 请求越少越好。因此，我看到有 3 种情况：
- 整个网站的一个大文件
- 根据需要加载模块
- 一个特定于每个页面的组合文件，作为所需模块的组合动态生成。
什么是最好的？
我有 Yii 框架，如果有帮助的话。
答：
2赞
j0nes
11/18/2012
#1
你的想法是对的 - 大文件通常是首选，但这可能会导致不需要的 Javascript 部分被执行。您的目标必须是将通常需要的 Javascript 文件与仅一个页面所需的部分分开。然后，您可以决定是否要将其包含在大文件中，或者是否要继续单独加载它。尝试识别大多数用户访问的主要页面 - 那里所需的文件应该放在主文件中。
顺便说一句，您可以查看在 Javascript 中构建模块关系和按需加载的Require.js。
0赞
alemangui
11/18/2012
#2
从您指定的选项中，我将制作一个大的 Javascript 文件。一开始可能需要稍长的时间，但它会使应用程序的使用更加快速。当然，这取决于每个具体情况。
我还建议您使用Head.JS加载器，它非常简单。基本上，他们指出，在第一次加载时并行加载多个文件实际上比加载单个大文件（至少使用head.js）更快。这是因为它们以非阻塞并行方式加载。特别是对于老一代浏览器，它们一个接一个地下载脚本（如下图取自head.js网站）：
编辑：忘了提一下，加载单个文件还有一个额外的警告 - 某些设备对缓存有限制，例如，在 iPhone 4 中，限制为 25kb（相当低）。
0赞
Brett Gregson
11/18/2012
#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 的小片段
评论
0赞
Nathan H
11/18/2012
我目前充分利用“ClientScript”配置来根据需要加载脚本。我在层次结构中一直有jQuery，所以它工作正常（它几乎在每个页面上都加载，而不必担心它）。现在这会加载多个文件。问题是 Yii 是否可以即时优化它......
0赞
Albin Sunnanbo
11/18/2012
#4
好吧，我们有两股相互竞争的力量。A） 最初加载过多数据。B） 加载数据次数过多。
在这里找到平衡是一门微妙的艺术，既需要了解使用模式以获得一些有根据的猜测，然后进行测试和测量，直到达到可接受的响应时间。
与其问什么是“最好的”，不如问问自己你的网站上什么是可以接受的。在典型的宽带连接上，在不到一秒的时间内加载首页可以吗？慢速连接十秒可以吗？然后测量和调整，直到获得可接受的速度。
关于使用模式，需要考虑的一些事情可能是，如果您想优先考虑首页加载速度还是子页面的加载速度？如果你把所有的javascript分块到一个大文件中，你会在第一次页面加载时受到惩罚，但其他页面的加载速度会更快。反之亦然。
如果您有许多不同的页面，并且预计用户不会访问多个页面，则应考虑为每个页面保留一个 js 文件。但不要为每个页面创建很多脚本，保持文件数量尽可能少。
一个和许多 js 文件之间的区别主要在第一次加载时。一旦缓存，一个或多个文件不会有太大区别。多个文件的坏处是，在通过网络加载时，每个文件都有延迟。
最后的提醒。确保缩小文件，如果可能，添加 gzipping，并确保缓存标头允许浏览器正确缓存 js 文件和其他资源。
评论