我正在尝试优化具有大量 JS 意大利面条代码的网站的加载时间。其中一些实际上看起来像这样：
<script>var x="foo";</script>
<script>var y="bar";</script>
而不是理智的程序员代码：
<script>
var x="foo";
var y="bar";
</script>
所以我想知道这种事情是否真的有害？除了美观之外，将脚本组合成一个脚本标签会带来任何加载时间优势吗？
【问题讨论】：
当浏览器在解析页面的 HTML 期间遇到 script 元素时，会发生以下情况：
script 元素一样多。因此，拥有多个script 元素会减慢页面的渲染速度。 HTML 中的script 元素越少，页面呈现的速度就越快。
如果您的文档通过src 属性包含脚本（例如<script src="http://example.com/myscript.js">），那么您可以使用async attribute 来延迟脚本处理。这是较新的浏览器（例如自 2010 年 9 月发布的 Firefox 3.6 和 Webkit based 浏览器）支持的功能。但是内联脚本在被解释之前仍然会阻塞解析。
【讨论】：
只要有更多字节要下载，第一个例子就比较慢。
但是，我敢肯定，您将永远能够区分后一个示例和前一个示例的微不足道的微优化。除了组织，没有理由打扰。
也就是说，为了组织，我肯定会打扰！保持代码井井有条将加快开发时间。将所有 JavaScript 保存在一个位置会阻止您四处寻找 sn-p。
我会努力首先将尽可能多的代码移动到外部文件中，然后将其他任何内容移动到文档的底部。
<script> 标记移动到页面的页脚，您将允许浏览器在下载或执行JavaScript 之前呈现您的标记。这会造成下载速度更快的错觉。顺便说一句，（同样微不足道）脚本的最优化版本（除了使用外部文件）将是：
<script>
var x='foo', y='bar';
</script>
【讨论】：
感知加载时间和实际加载时间之间存在差异。
前者对最终用户来说是最重要的。有些网站永远不会完全加载，因为它们的广告总是不断刷新和加载新内容 - 这就是为什么您会看到状态栏仍在工作，即使页面看起来已经完成。
你的问题似乎是理论上的，所以我会尝试一个理论上的回答。
当您的第一个案例可能更快时
最佳感知加载时间取决于这两个脚本的作用以及您的网站需要什么。如果您的网站是面向 JS 的，这意味着布局、样式和 HTML 元素主要由 JavaScript 创建/控制，那么第一种方式可能更快。您希望在第一个脚本中完成所有视觉处理和元素创建。确实，您可以有一个空白的 HTML 页面和一个纯 JS 创建的站点（非常不建议），但有可能。几乎从来没有这种情况，但在这种情况下，所有的视觉效果和元素都应该放在那里。第二个脚本应包含用户不会在一瞬间注意到的所有其他代码（幻灯片动画、悬停效果、点击方法）。
不要引用我的话，但我认为这是因为每个脚本（在 HTML 头中）在加载后都会被解释，打破必要和不必要的脚本可以加快一些预处理。
网络/口译速度 |大多数人的第二种情况
不过，大多数网站并不依赖于 JavaScript，因此第二种情况是做事的一般方式。拆分自定义代码有大小/缓存的原因，但对于非自定义代码，例如各种框架，对于同时使用两者的人来说，没有一个组合的 jQuery/Prototype 框架是有原因的。在某些情况下（在正文中）放置内联代码可能更有益。
在大多数情况下，首选第二种方法或类似于 Stephen 列出的方法。这只是因为您正在减少通过网络传输的字节开销；此外，您正在最大限度地减少浏览器必须翻译的字符数量。真正的过度优化方法是<script type="text/javascript">x='foo',y='bar';</script>（不需要var）。
【讨论】：
当您在页面上键入 更多 内容（在您的情况下为 js）时，页面大小会增加，这最终会降低性能。
您应该将您的代码组合在单个 <script> 标记以及 js 文件中。
您可以使用Google's Page Speed（Firebug 插件），它会建议您如何提高网站的性能:)
【讨论】：
实际上最好采用第二种方式。它使代码更容易以这种形式维护和阅读。另一种方法是使用外部脚本。
您有时会以第一种方式看到它的原因是该站点在不同时间包含不同的文件。
【讨论】：
您绝对应该尝试使用这个很酷的工具cuzillion。它将帮助您找到细粒度的细微速度效果，就像您提到的那样。
在您的情况下，似乎说打开多次标签的效果非常小但存在。
【讨论】：