将JavaScript放在一个.js文件中，或将它分解成多个.js文件？

我的Web应用程序使用jQuery和一些jQuery插件（例如validation，自动完成）。我想知道是否应该将它们粘贴到一个.js文件中，以便它可以更容易地caching，或者将它们分解成单独的文件，并且只包含给定页面所需的文件。

我还应该提到，我担心的不仅是下载.js文件所需的时间，还有根据加载的.js文件的内容减慢页面的速度。例如，添加自动完成插件往往会使我的基本testing的响应时间减缓100ms左右，即使在caching时也是如此。我的猜测是，它必须扫描DOM中导致延迟的元素。

我认为这取决于他们多久改变一次。我们来看一下这个例子：

如果您的自定义代码仅占总代码的10％，则不希望用户每周下载另外90％的代码。你至less要分成两个j：JQuery +插件和你的自定义代码。现在，如果您的自定义代码占全尺寸的90％，将所有内容放在一个文件中更有意义。

当select如何结合JS文件（和CSS相同），我平衡：

常见但相关的答案：

这取决于项目。

如果你有一个相当有限的网站，其中大部分的function在网站的多个部分被重复使用，那么将所有脚本放到一个文件中是有意义的。

然而，在我所研究的几个大型Web项目中，将常见站点范围的function放入单个文件中，并将更多的特定于部分的function放入其自己的文件中更有意义。（我们正在这里讨论大型脚本文件，这是针对几个截然不同的web应用程序的行为，所有这些都在同一个域中提供。）

把脚本分成单独的文件的好处是，你不必为用户提供他们不使用的不必要的内容和带宽。（例如，如果他们从不访问网站上的“App A”，他们将永远不需要“App A”部分的脚本100K，但是他们需要通用网站的function。）

将脚本保存在一个文件中的好处是简单。服务器上点击更less。用户下载量更less。

像往常一样，虽然，YMMV。没有硬性规定。根据用户的使用情况，根据您的项目结构，做一些最符合您需求的内容。

如果每个页面都需要这些文件，请将它们放在一个文件中。这将减lessHTTP请求的数量，并会改善响应时间（对于大量访问）。

请参阅雅虎最佳做法的其他提示

我几乎同意bigmattyh说，它取决于。

作为一般规则，我尽可能多地聚合脚本文件，但是如果你有一些只在网站的一些区域使用的脚本，尤其是那些在加载时执行大的DOM遍历的脚本，将这些文件留在单独的文件中。
例如，如果您只在联系页面上使用validation，为什么在您的主页上加载？

另外，有时你可以把这些文件偷偷地转换成插页式的页面，在这里没有太多其他的事情发生，所以当用户登陆一个需要的页面时，应该已经被caching – 谨慎使用，但是可以当你有人对你进行基准testing时，这是一个方便的技巧。

所以，尽可能less的脚本文件，在合理的范围内。

如果你发送一个100K的整体，但只有80％的页面使用20K，可以考虑分割它。

如果人们要访问您网站中的多个页面，最好将它们放在一个文件中，以便可以caching。他们会在前面花一点时间，但是这将是他们花在你网站上的时间。

在一天结束时，这取决于你。

但是，每个网页所包含的信息越less，terminal用户下载的信息就会越快。

如果您只包含每个页面所需的js文件，那么您的网站似乎更有可能更高效和更stream畅

如果您喜欢单独的文件中进行开发的代码，您可以在缩小之前编写一个快速脚本将它们连接成单个文件。

其他海报表明，一个大文件可以更好地减lessHTTP请求。

这很大程度上取决于用户与您的网站进行交互的方式。

有些问题需要您考虑：

对用户如何使用您的网站有一个好的想法，以及如果您真的希望提高性能，您想优化的内容是一个好主意。

但是，我的默认方法是只是连接和缩小我的所有JavaScript到一个文件。 jQuery和jQuery.ui很小，开销非常低。如果你使用的插件对页面加载时间有100ms的影响，那么可能是错误的。

几件事情来检查：

正如其他人所build议的，我也认为你应该走一条路。但是，对于你只是被包含在你的大型js文件中的插件吃掉了周期：

在执行昂贵的操作之前，请使用一些检查来确保您甚至在需要操作的页面上。也许你可以在运行自动完成插件之前检测到dom节点的存在（或不存在），并且只在必要时初始化插件。没有必要浪费dom遍历页面或部分的开销，永远不需要某些function。

昂贵的代码块之前的一个简单的条件会给你两种方法的好处，你正在决定。