为什么人们总是鼓励一个网站的单个js？

Question

我在网上阅读了一些网站开发资料，每次有人要求组织一个网站的js，css，html和php文件时，人们都会为整个网站建议单个js。而论点是速度。

我清楚地知道有更少的请求，页面响应得越快。但我从不理解单个js的论点。假设你有10个网页，每个网页都需要一个js函数来操纵dom对象。将10个函数放在一个js中，并让这个js在每个网页上执行，10个函数中有9个是无用的工作。在寻找不存在的dom对象时CPU浪费时间。

我知道单个客户端计算机上的CPU时间与单服务器计算机上的带宽相比非常微不足道。我并不是说你应该在单个网页上有很多js文件。但是，如果每个网页引用1到3个js文件并且这些js文件都缓存在客户端计算机中，我不会看到任何问题。有很多好的方法来做缓存。例如，您可以使用过期日期，或者您可以在您的js文件名中包含版本号。相比于在一个大的js文件中混淆了一个网站的许多网页的所有需求的功能，我更愿意将js代码分割成更小的文件。

对我的论点有任何批评/协议吗？我错了吗？谢谢你的建议。

Answer 1

除非被调用，否则函数不起作用。所以9个空函数都是0的工作，只是一点确切的空间。

客户端只需要下载1个大JS文件的请求，然后缓存在其他页面上。比在每个页面上做一个小的请求的工作少。

Answer 2

该Javascript的设计应该使额外的功能不会执行，除非他们需要。

例如，您可以在脚本中定义一组函数，但只能在页面中自己调用（非常短）<script>块。

Answer 3

我能想到的两个原因：

较少的网络延迟。每个.js都需要对从其下载的服务器的另一个请求/响应。

更多的字节在线和更多的内存。如果它是一个文件，你可以删除不必要的字符并缩小整个事情。

Answer 4

我的思路是你的要求较少。当您在页面的标题中发出请求时，它会停止页面其余部分的输出。在获得javascript文件之前，用户代理无法渲染页面的其余部分。同时javascript文件也会下载，他们排队而不是立即拉（至少这是理论）。

Answer 5

我会给你我总是给的答案：这取决于。

所有的东西结合成一个文件有许多好处，包括：

1. 减少网络流量 - 你可能会检索一个文件，但你发送/接收多个数据包，每笔交易都有一个通过TCP发送的一系列SYN，SYN-ACK和ACK消息。大部分传输时间正在建立会话，并且数据包头中有很多开销。

2. 一个位置/可管理性 - 虽然只有几个文件，但函数（和类对象）在各个版本之间很容易增长。当你使用多文件方法时，有时函数会从一个文件中调用另一个文件中的函数/对象（例如，一个文件中的ajax，然后是另一个文件中的算术函数） - 您的算术函数可能需要调用ajax并具有某种变量类型回）。最终发生的事情是你的文件集需要被看作是一个版本，而不是每个文件都是它自己的版本。如果你没有良好的管理，事情就会变得毛骨悚然，并且很容易与Javascript文件脱节，这些文件总是在变化。拥有一个文件可以轻松管理您的（1到多个）网站中每个网页之间的版本。

其他议题来考虑：

1. 休眠代码 - 你可能会认为多余的功能可能受占用内存空间降低性能和你是对的，但是这表现如此如此如此微不足道，无所谓。函数在内存中索引，而索引表可能会增加，但在处理小型项目时尤其如此，尤其是考虑到今天的硬件。

2. 内存泄漏 - 这可能是为什么你不希望将所有的代码的最大理由，但是这是给内存在今天的系统量这么小的问题，更好的垃圾收集浏览器有。此外，作为程序员，您可以控制这些功能。质量代码导致这样的问题较少。

为什么它取决于？

虽然很容易将所有的代码扔到一个文件中，但这是错误的。这取决于你的代码有多大，有多少函数，维护它等等。当然，你不会将你本地编写的函数打包到JQuery包中，并且你可能有不同的程序员维护不同的代码块 - 这取决于你的建立。

它也取决于大小。一些程序员将编码后的图像作为ASCII嵌入文件中，以减少发送的文件数量。这些可以膨胀文件。当然你不想把所有东西都打包成1个50MB的文件。特别是如果有页面加载所需的核心功能。因此，为了使我的反应结束，我们需要更多关于您的设置的信息，因为它取决于。当然3个文件是可以接受的，无论大小，结合你认为合适的地方。它可能不会真的伤害网络流量，但50个文件更不合理。我使用手工规则（不超过5个），但您肯定会看到将这5个1KB文件合并到1个5KB文件中的好处。