加载许多小的 JavaScript 文件还是加载一个大的 JavaScript 文件更好？答案

【问题标题】：Is it better to load many small JavaScript files or one large JavaScript file?加载许多小的 JavaScript 文件还是加载一个大的 JavaScript 文件更好？
【发布时间】：2013-02-09 04:45:10
【问题描述】：

我在 chrome 中注意到，如果我将图像加载为 base64 字符串，然后滚动浏览页面的该部分，它会变慢。

我还注意到，当我从一个包含我的 Javascript 的选项卡中导航出来然后回到该选项卡时，它会慢几秒钟，好像 V8 正在重新编译 js。

我能想到三个选项，但我不知道哪个最好：

先加载一个微小的加载页面，然后雄辩地处理后续加载
加载一个巨大的 js 或 css 文件，包含所有内容（jquery + 我的代码 + 等）
将某些代码组合在一起（使用 jquery cdn，但将我的代码组合在一起）

让你的 js 尽可能快速和有说服力地加载的最佳方法是什么？

【问题讨论】：

你的第一个场景，如果是这样的话，我会感到惊讶 - 毕竟，图像很可能被转换为一些内部格式，对于 base64 和外部资源来说都是相同的。
答案视情况而定。如果您不需要立即使用所有 java 脚本，那么稍后按需加载它们可能会更好。有像 Require.js 这样的服务器端工具可以帮助你解决这个问题。也就是说，哪些要合并和最小化，哪些要延迟加载。

标签： javascript

【解决方案1】：

嗯，有一个非常流行的概念，叫做串联。这个想法是尽可能少地向您的服务器发出 HTTP 请求。因为每个请求都意味着一个新的连接，为此会发生 DNS 查找，然后协商握手，然后经过几个基于协议的步骤，服务器将请求的文件作为响应发送。

您可以查看http-archive 以获取性能最佳实践列表。

所以是的，你应该把所有的 JS 文件合并为一个（有一些例外，比如头部的 js 和页脚的 js）

这是您的问题标题和第 2 点和第 3 点的答案。

至于另一部分，我不清楚你说的场景。

【讨论】：

【解决方案2】：

通常，在 HTTP 中加载更多文件会比将它们合并到更少文件中产生更多开销。有多种方法可以为各种内容组合文件：

图片请使用CSS sprites。
对于 javascript，compile your client-side code and libraries into one file，然后缩小以减小大小。
对于 css，您可以执行与上述类似的操作。例如，hem compiles stylus 到一个 css 文件中，这对组织也有帮助。
此外，当您连接 Javascript 和 CSS 时，您的网络服务器或反向代理可以send them in compressed form 以加快页面加载速度。这对于较大的文件会更有效，因为压缩可以带来更多好处。

【讨论】：

（顺便说一句，我没有对你投反对票）。我大体上同意你的观点，但是 TCP 层还有一些其他的事情需要考虑。这是有关该主题的好读物：stevesouders.com/blog/2010/07/13/…

【解决方案3】：

要加载的文件数量会影响整个站点的加载速度。我建议将网站正确显示所需的所有功能打包到一个 javascript 文件中。

【讨论】：

【解决方案4】：

有太多的可能性，无法有任何保证的解决方案，但你去吧：

1) 在顶部加载 CSS - 如果您正在创建一个包含多个页面的网站，则将其全部加载到此处。如果您正在构建一个单页应用程序（您在同一页面上运行画廊和推特提要和文章等，并且您可以打开和关闭不同的部分），那么您可以考虑加载特定于小部件的 CSS，在您加载小部件的时间（如果在启动时不需要它）。

不在你的 CSS 中使用@import，如果你想让它快速加载（你这样做）。

2) 在页面底部加载绝大多数 JS。
在 DOM 准备好之后，几乎没有什么不能延迟加载，或者至少不能在页面底部初始化，如果真的有，则将它们作为单独的文件提供在顶部页面，并考虑如何重写以减少对它们的依赖。

3) 小心使用计时器 - 尤其是 setInterval... ...如果计时器管理不善，您的页面性能可能会陷入困境。

4) 在窗口滚动、调整大小、鼠标移动或按键等事件处理程序上要更加小心。这些东西每秒会触发很多很多次，因此如果您编写了依赖于它们的精美程序，则需要重新考虑如何触发程序（即：不要在每次处理程序发生故障时都运行它）。

5) 提供 JS 文件是一种权衡：编译 JS 需要一些时间。因此，如果您在一个文件中加载 40,000 行，您的浏览器会暂停一段时间，因为它会编译所有这些内容。
如果您提供 18 个单独的文件，那么您必须进行 18 个不同的服务器调用。
那也不酷。

因此，一个很好的平衡是将您知道该页面需要的文件连接在一起，然后延迟加载页面上可选的任何内容（例如用于添加评论的小部件或灯箱小部件等）。
并且要么在所有主要产品启动并运行后延迟加载它们，要么在可能的最后一秒加载它们（比如当用户点击“添加评论”按钮时）。

如果您需要在您的应用程序中加载 40,000 行，请在它启动后立即执行，或者决定您可以按什么顺序加载每一行，并提供“加载”指示器（您应该这样做总是延迟加载）每个小部件，直到它准备好（一次加载一个 JS）。

这些是解决一般性能问题的指南。
即使您将网站直接放在您面前，也很难回答具体问题。使用 Chrome 开发控制台来分析信息和网络性能，以及渲染性能等。

【讨论】：

【解决方案5】：

我最近遇到了同样的问题，然后我开发并发布了一个 JS 库（MIT 许可证）来解决这个问题。基本上，您可以将所有内容（js、图像、css ...）放入标准 tar 存档（您可以在服务器端创建），然后库读取它并允许您轻松使用文件。

你会在这里找到它：https://github.com/sebcap26/FileLoader.js

它适用于所有最近的浏览器和 IE >= 10。

【讨论】：