Question

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

假设我有一个带有一点Javascript魔法的搜索字段的Default.htm。然后我将Contact.htm与一个附有Javascript魔法的联系表单联系起来。最后我有一个FAQ.htm，其中有一些jQuery面板显示答案......你得到了图片。

基本上我有三个页面都需要“一些”javascript，但没有任何Javascript用于任何其他页面。

将所有Javascript组合成一个加载一次的大型缩小文件然后存储在Cache中是否更好，或者最好在默认页面上使用单个Javascript文件，但不要在“联系”页面上使用它......等等？

在这种情况下哪种方法最有效？

选项：1

的Default.htm
  的jquery.js
  default.js

Contact.htm
  的jquery.js
  contact.js

Faq.htm
  的jquery.js
  faq.js

选项：2

的Default.htm
  jquery的默认接触-FAQ-min.js

Contact.htm
  jquery的默认接触-FAQ-min.js

Faq.htm
  jquery的默认接触-FAQ-min.js

PS：对于你所有的asp.net家伙，我正在使用Combres来合并，缩小和版本我的Javascript文件

Answer 1

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

Answer 2

我肯定会投票将它们结合起来。如果您担心“未使用”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 3

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

有三种可能性：

将所有内容合并到1个文件中
有三个单独的文件，并根据需要加载
有三个单独的文件，立即加载该页面所需的文件并预加载其他文件（当时间正确时）

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

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

Answer 4

因为它听起来不像有很多javascript，将它合并到一个文件会更好。只有当用户没有访问页面时才需要加载大量的javascript，那么你会考虑将这些文件分开。

Answer 5

如果组合文件低于25kb，那么就去做吧。但是，如果它不止于此，我会说，确定最大的那个，并让一个js文件分开。结合其余部分。那25kb的限制也不是一个很难的规则，这取决于你。

如果您的单个文件大小为30kb，我建议不要将它们组合在一起，并将各个js文件作为单独的js文件缓存。

希望有所帮助。

Javascript - 要结合或不结合，这就是问题

5 个答案: