哪个更好的JavaScript加载时间：压缩所有在一个大文件或加载所有异步？

Question

一个简单的问题，我不确定它是否有简短的答案！

描述
我有一个JavaScript文件，要在网站上加载，这里有一些关于它们的注释：

• 它们都来自同一个域（不需要跨域加载）
• 它们在网站上是相同的。
• 有几个文件，比如jQuery，还有5个其他插件以及我自己的基于它们的应用程序脚本。
• 它们的大小全部压缩= 224KB，（我将所有文件合并到一个文件中，然后使用YUI Compressor 2立即压缩它们

问题
我听说224KB并不适合放在一个文件中！它应该分成几个文件，每个文件最多44KB。我不记得我什么时候听到这个并且我不确定将它分成更多文件是否有效，但确实224KB需要很长时间首次加载，考虑网站当然加载了图像和CSS。

我已经尽量减少了早期加载JavaScript文件的需要并把它放在了最底层，到目前为止，这是一个很好的进展，但是我需要用HTML来加载它以获得时间Source和要做的决定是：

是或否？
将它保存在一个压缩的大文件中？或者将它们拆分成许多压缩文件并异步加载（我知道处理依赖相关的问题）？

Answer 1

这取决于网站的内容以及首次加载时间的重要性。

尽管如此，我可能会从公共CDN加载JQuery和类似的东西。一个很大的好处是它可能已经被缓存，即使它们从未到过您的网站。

http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

卡布奇诺团队是一个文件的重要支持者 - 他们制作了一个javascript框架。使用他们的工具制作的应用程序预计会有一些加载时间。

http://cappuccino.org/discuss/2009/11/11/just-one-file-with-cappuccino-0-8/

Answer 2

从公共CDN加载JQuery和相关的另一个好处是目标增加的请求。我相信客户端每个域限制为2个请求，所以通过从谷歌加载jquery，从jquery加载插件，从你自己的域加载自定义应用程序代码，浏览器可以同时执行这些，而不是等待前两个，然后发出第三个请求。

我想这也增加了一个大文件的性能改进。即使你只将1个文件拆分为2个，也可以通过浏览器的2个并发请求来检索它，这可能会增加加载时间。

Answer 3

以下是我们为快速制作网络应用所做的工作。

主要的JS和CSS文件被压缩并与HTML标记内联 将删除HTML的空格，并通过shell脚本将图像转换为data:image/png。

大小约为400kb但缓存和压缩 Web应用程序的移动版本是相同的，但大约250kb。 这意味着整个应用程序已准备好在单个http调用中运行，如可执行文件。

然后第二次http调用获取数据（JSON），我们使用PURE使用页面中的现有标记作为模板在HTML中呈现它。

应用程序分为模块，只有通用模块以这种方式预加载。
其他模块在用户请求时即将到来。

Answer 4

这个问题没有确切的答案。它几乎取决于你如何以及何时使用这些文件。

通常，您只想在页面加载上下载JS文件，这是Web应用程序普遍要求的。模块特定或页面特定的JS文件不应在主JS下载中压缩，理想情况下应按需加载。

此外，只有当您担心首次使用者的用户体验时，此问题才有效。无论如何，每次访问都会缓存JS文件。