2

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

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

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

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

什么是最好的？

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

4

4 回答 4

2

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

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

于 2012-11-18T09:04:52.433 回答
0

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

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

在此处输入图像描述

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

于 2012-11-18T09:10:28.567 回答
0

当谈到 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 小片段

于 2012-11-18T09:49:19.113 回答
0

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

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

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

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

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

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

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

于 2012-11-18T11:08:57.597 回答