JavaScript文件的最佳组织方式

Question

我有一个包含多个JS文件（jQuery，jQuery，我的自己的JS代码等）的Web应用程序。假设我有一个名为index.html的页面。最佳实践是如何包含/预加载我的js文件？我考虑创建一个单独的JS文件来进行预加载（包含所有其他脚本并调用jQuery.noConflict()）。你们有什么建议？这可行吗？你会如何实现它？

谢谢！

- Ron

---

什么是不利于将它们直接包含在“head”部分中？浏览器会处理缓存。 - Pekka

如果你有很多文件，不要把它们放在头部。把它们放在页面的末尾。创建一个看起来漂亮的页面，没有这些文件，然后将它们添加到页面的末尾。你创建的页面将作为闪屏页。一旦jQuery加载完成，你可以隐藏你的闪屏元素。 - Hemlock

@Pekka：如果您在body渲染期间使用它们的功能，则将脚本放在head中是必要的，并会减慢页面的感知加载时间。如果您不需要它们的功能在渲染期间（包括用户在页面仍在构建时单击内容），请将它们放在body底部。更多信息 - T.J. Crowder

Answer 1

一般来说，将脚本文件合并成一个文件（并进行压缩或缩小，甚至编译它们，但请注意，最后一项不是零影响的，存在痛点。在此处查看注释这里和这里。基本上，快速加载页面的首要准则之一是“最小化HTTP请求”。因此，您不希望有六个单独的script标记，而可以只有一个。

然而，对于流行的脚本，您可能会从Google的CDN中使用它们受益。Google很慷慨地为大多数流行的JavaScript库免费托管它们的CDN。这里的优点不仅在于CDN将相当快，而且目标用户的浏览器可能已经缓存了您想要使用的脚本的版本，即使他们以前从未访问过您的站点。

- T.J. Crowder

---

你能解释更多关于“但请注意，最后一项并不是零影响，存在痛点”吗？谢谢。 - vdegenne

@Oddant：使用Closure编译器需要一些源代码级别的实践，这是普通的缩小/压缩工具通常不需要的。但在其简单模式下，它们并不繁琐。（高级模式更麻烦——但是，您也会获得更多的好处。） - T.J. Crowder

Answer 2

看看RequireJS，它是一个智能而强大的JavaScript脚本加载器。它专门设计用于与jQuery良好配合，并带有一个优化工具，可以将所有脚本组合成一个。

- Patrick McElhaney

---

+1 这在应用程序开发中非常方便。我真的很喜欢使用模块模式。 - Juho Vepsäläinen

Answer 3

最好的方法是将所有js文件最小化并合并成一个脚本。这样可以减少浏览器的工作量，因为它不必向服务器发出多个请求。

- kemiller2002

Answer 4

如果您要同时加载所有内容，可以将它们全部放入一个压缩文件中。

- stephen776

---

是的，Google Closure Compiler 是一个不错的选择...我相信这也是 jQuery 自身所压缩使用的。 - stephen776

享受支持压缩代码的痛苦。如果您的页面在没有压缩的情况下加载速度足够快，或者您可以在服务器上启用gzip，则不要压缩，只需连接即可。即使是连接也会使调试变得困难。 - Hemlock

就支持压缩代码而言，我认为保留压缩和未压缩版本是可行的方式...只在生产环境中使用压缩版本。 - stephen776

@stephen 我发现现实会干扰我的工作，我最终会努力去重现生产系统报告的错误，而这些错误堆栈跟踪中充满了名为a、b和c的变量，全部在第0行。当然，如果你没有收到所有的js错误邮件，或者你有一个QA团队，你就不会遭受这种痛苦... - Hemlock