对于 JavaScript 加载时间来说，哪一个更好：将所有内容压缩在一个大文件中还是异步加载所有内容？
一个简单的问题，我不确定它是否有一个简短的答案！
描述
我有一个要在网站中加载的 JavaScript 文件，这里有一些关于它们的注释：
- 它们都来自同一个域（不需要跨域加载）
- 它们在网站上是相同的。
- 有几个文件，例如 jQuery，以及 5 个其他插件以及我自己的基于它们的应用程序脚本。
- 它们的大小全部压缩= 224KB，（我将所有文件合并在一个文件中，然后使用 YUI Compressor 2 立即压缩它们
问题
我听说 224KB 放在一个文件中并不理想！它应该被分割成几个文件，每个文件最大44KB..我不记得我什么时候听到过这个，我不确定将它分割成更多文件是否有效，但是224KB确实需要很长时间第一次加载时，请考虑网站加载了图像和 CSS。
我已经最大限度地减少了早期加载 JavaScript 文件的需要，并将其放在底部，到目前为止，这是一个很好的进步，但我需要与 HTML 同步加载它以获得时间 来源 做出的决定是：
<强>是还是否？
将其保存在一个压缩的大文件中？或者将它们分成许多压缩文件并异步加载（我知道处理依赖关系相关的问题）？
A simple question that I'm not sure if it has a short answer!
Description
I have a files of JavaScript that to be loaded in a website here are some notes about them:
- They are all comes from the same domain (no cross domain loading needed)
- They are identical around the website.
- There are several files, like jQuery, and 5 other plugins plus my own application script that is based on them.
- Their size all compressed = 224KB, ( I combine all the files in one file then I compress them at once using YUI Compressor 2
Problem
I've heard that 224KB is not ideal to be in one file! and it should be split into several files with maximum of 44KB each .. I can't recall when I've heard this and I'm not sure if it's effective to split it into more files, but It's true that 224KB takes long time to load for the first time, consider that the website is loaded with images and css of course.
I've minimized the need for the early loading of JavaScript file and put it on the bottom, so far this is a good progress but I need to load it assynchounosly with the HTML to gain time Source and the decission to make is:
Yes or No?
Keep it in one compressed big file? or to split them into many compressed file and loaded a asynchronously (I'm aware of handling the dependency related problems)?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
这取决于网站是什么以及首次加载时间对其的重要性。
不管怎样，我可能会从公共 CDN 加载 JQuery 和类似的东西。一大好处是，即使他们从未访问过您的网站，它也可能已经被缓存。
http: //encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/
Cappuccino 团队是单一文件的大力支持者 --他们制作了一个 JavaScript 框架。使用他们的工具制作的应用程序预计会有一些加载时间。
http://cappuccino.org/讨论/2009/11/11/just-one-file-with-cappuccino-0-8/
It depends on what the site is and how important first load time is for it.
Regardless of that though, I'd probably load JQuery and stuff like that from a public CDN. One big benefit is that it might already be cached even if they have never been to your site.
http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/
The Cappuccino team is a big proponent of one file -- they make a javascript framework. Apps made with their tool are expected to have some load time.
http://cappuccino.org/discuss/2009/11/11/just-one-file-with-cappuccino-0-8/
从公共 CDN 加载 JQuery 和相关内容的另一个好处是按目的地增加请求。我相信客户端限制为每个域 2 个请求，因此通过加载来自 google 的 jquery、来自 jquery 的插件以及来自您自己域的自定义应用程序代码，浏览器可以同时执行这些请求，而不是等待前两个请求，然后发出第三个请求。
我想这也比一个大文件增加了另一项性能改进。即使您只是将该 1 个文件拆分为 2 个，也可以通过来自浏览器的 2 个并发请求来检索该文件，从而可能缩短加载时间。
Another benefit of loading JQuery and related from a public CDN would the increased requests by destination. I believe the client is restricted to 2 requests per domain, so by loading jquery from google, and a plugin from jquery, and your custom app code from your own domain, the browser can execute these concurrently rather than waiting for the first two and then issuing a third request.
I guess this adds another performance improvement over one large file as well. Even if you just split that 1 file into 2, it could be retrieved with 2 concurrent requests from the browser potentially improving load time.
以下是我们为提高网络应用程序速度所做的工作。
主要的 JS 和 CSS 文件被压缩并与 HTML 标记内联。
HTML 的空白将被删除，图像将通过 shell 脚本转换为
data:image/png。大小约为 400kb，但经过缓存和 gzip 压缩。
Web 应用程序的移动版本相同，但大小约为 250kb。
这意味着整个应用程序已准备好在单个 http 调用中运行，就像可执行文件一样。
然后第二个 http 调用获取数据（JSON），我们使用 PURE 使用页面中现有的标记作为模板以 HTML 形式呈现它。
该应用程序分为模块，只有常用模块以这种方式预加载。
其他模块将在用户请求时加载。
Here's what we did to make our web app fast.
The main JS and CSS files are compressed and put inline with the HTML markup.
The white spaces of the HTML are removed and the images are converted to
data:image/pngby a shell script.The size is ~400kb but cached and gzipped.
The mobile version of the web app is the same but at ~250kb.
It means the whole app is ready to run, like an executable, in a single http call.
Then a second http call get the data(JSON), and we use PURE to render it in HTML using the existing markups in the page as templates.
The app is divided in modules, only the common modules are preloaded this way.
The others are coming when requested by the user.
这个问题没有确切的答案。这很大程度上取决于您使用这些文件的方式和时间。
通常，您只想在页面加载时下载 Web 应用程序普遍需要的 JS 文件。特定于模块或特定于页面的 JS 文件不应在主 JS 下载中进行压缩，最好按需加载。
此外，只有当您关心首次用户的用户体验时，这个问题才有效。无论如何，每次其他访问都会缓存 JS 文件。
There is no exact answer to this question. It pretty much depends on how and when you are making use of those files.
Typically, you only want to download JS files on pageload which are universally required by the web app. Module specific or page specific JS files shouldn't be compressed in the main JS download and would ideally be loaded on demand.
Also, this question is valid only if you are concerned about user experience for first time users. The JS files would be cached anyways for every other visit.