Javascript - 结合还是不结合,这是个问题

标签 javascript jquery minify

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

假设我有一个带有搜索字段的 Default.htm,它附加了一点 Javascript 魔法。然后我有 Contact.htm 和一个附有一些 Javascript 魔法的联系表。最后,我有一个 FAQ.htm,其中包含一些显示答案的 jQuery 面板……你明白了。

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

是将所有 Javascript 组合成一个加载一次然后存储在缓存中的大缩小文件更好,还是在默认页面上使用单个 Javascript 文件而不是在联系页面上使用它更好……等等?

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

选项:1

Default.htm
jquery.js
default.js

Contact.htm
jquery.js
contact.js

Faq.htm
jquery.js
faq.js

选项:2

Default.htm
jquery-default-contact-faq-min.js

Contact.htm
jquery-default-contact-faq-min.js

Faq.htm
jquery-default-contact-faq-min.js

PS:对于你们所有的 asp.net 人员,我正在使用 Combres 来合并、缩小和控制我的 Javascript 文件

最佳答案

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

关于Javascript - 结合还是不结合,这是个问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3655735/

相关文章:

javascript - 有什么方法可以绕过 Canvas 安全异常(外部图像到数据字符串)

javascript - d3 将鼠标悬停在表格上时为图表制作动画

javascript - 为什么 Safari 中的范围缩减会破坏现有代码?

javascript - 注销计时器 php/javascript

javascript - Bootstrap 工具提示不适用于鼠标悬停

javascript - 在 Angular 执行 JavaScript 缩小后,如何保留特定的变量名称?

javascript - jQuery .flip() 在 2 秒间隔内不起作用

javascript - 使用jquery解析部分html字符串

javascript - PHP minify 函数似乎破坏了内联 JS?

asp.net-mvc-3 - 使用 Razor 在 Asp.Net MVC3 上合并、缩小和 GZIP 样式和脚本的完整解决方案