Javascript - 结合还是不结合，这就是问题

Question

好的，所以我知道为了提高效率，将所有页面 Javascript 合并到一个外部文件中是显而易见的，但这并不是这里的问题。

假设我有一个带有搜索字段的 Default.htm，其中附加了一些 Javascript 魔法。然后我有一个带有联系表单的 Contact.htm，其中附加了一些 Javascript 魔法。最后，我有一个 FAQ.htm，其中有一些 jQuery 面板显示答案...您明白了。

基本上我有三个页面，它们都需要“一些”JavaScript，但任何其他页面上都没有使用任何 JavaScript。

是否最好将所有 Javascript 合并到一个大的缩小文件中，加载一次，然后存储在缓存中，或者最好在默认页面上使用单独的 Javascript 文件，但不在联系页面上使用它...... ETC？

在这种情况下什么最有效？

选项：1

默认.htm
jquery.js
默认.js

联系方式.htm
jquery.js
联系.js

常见问题解答.htm
jquery.js
常见问题解答.js

选项：2

默认.htm
jquery-default-contact-faq-min.js

联系方式.htm
jquery-default-contact-faq-min.js

常见问题解答.htm
jquery-default-contact-faq-min.js

PS：对于所有 ASP.NET 人员，我正在使用 Combres 来合并、缩小和版本化我的 Javascript 文件

Answer 1

我肯定会投票将它们结合起来。如果您担心“未使用”Javascript 的解析或设置时间，那么我建议您使用闭包中的每个文件来构建 Javascript，然后在您需要的页面上运行您需要的闭包。例如：

// File 1
window.closures = window.closures || {}
window.closures["page1"] = (function() {
  // Javascript for Page 1
});

// File 2
window.closures = window.closures || {}
window.closures["page2"] = (function() {
  // Javascript for Page 2
});    

// File 3
window.closures = window.closures || {}
window.closures["page2"] = (function() {
  // Javascript for Page 2
});

然后，在您的页面中：

<!-- This one combined.js file will be downloaded once and cached //-->
<script type="text/javascript" src="combined.js"></script>
<script>
  // Run the Javascript in your combined.js intended for page2
  window.closures["page2"]()
</script>

Answer 2

合并为 1 个文件。让它被缓存。它在任何页面上加载一次，并且对于任何后续页面，它可以使用缓存的副本。

Answer 3

因为听起来不像有很多 javascript，所以将其合并到一个文件中会更好。仅当用户不访问页面时不需要加载大量 JavaScript 时，您才会考虑将文件分开。

Answer 4

它始终是平衡 HTTP 请求数量并限制尚未真正需要的传输字节的行为。

有三种可能性：

1. 将所有内容合并在一个文件中
2. 具有三个单独的文件，并根据需要加载它们
3. 具有三个单独的文件，立即加载该页面所需的文件并预加载其他文件（当时间合适时）

您只会知道什么通过进行一些 AB 负载测试最适合您的情况。

一切都取决于传输数据的大小、所需功能的重叠以及需要某些功能的概率。

Answer 5

如果合并后的文件小于 25kb，那么就继续使用吧。但如果不止于此，我会说，找出其中最大的一个，并将该 js 文件分开。结合其余部分。 25kb 限制也不是一个硬性规则，这取决于你。

如果您的单个文件的大小约为 30kb，我建议不要将它们组合起来，并让单个 js 文件缓存为单个 js 文件。

希望有帮助。