Javascript 多个内联JS脚本是否会减慢页面的加载时间？

我试图优化一个有很多JS意大利面代码的站点的加载时间。其中一些实际上是这样的：

<script>var x="foo";</script>
<script>var y="bar";</script>

var x=“foo”；
var y=“bar”；

与sane程序员代码不同：

<script>
    var x="foo";
    var y="bar";
</script>

var x=“foo”；
var y=“bar”；

---

所以我想知道这种事情是否真的有害？除了美观之外，将脚本组合到单个脚本标记中会带来加载时间方面的好处吗？

由于要下载的字节较多，第一个示例的速度较慢

然而，我确信你永远无法区分后一个例子和前一个例子中微不足道的微观优化。除了组织，没有理由麻烦

也就是说，为了组织，我一定会费心的！保持代码的条理化将加快开发时间。将所有JavaScript保存在一个位置将防止您四处搜索代码片段

我会努力将尽可能多的代码首先移动到一个外部文件中，并将其他任何内容移动到文档的底部

通过使用外部文件（由于浏览器缓存），您将获得最快的速度优势

如果将

标记移动到页面的页脚，则允许浏览器在下载或执行JavaScript之前呈现标记。这将产生更快下载的错觉

顺便说一句，（同样简单）脚本的最优化版本（除了使用外部文件外）是：

<script>
    var x='foo', y='bar';
</script>

变量x='foo'，y='bar'；

当你在一个页面上键入更多的东西（在你的例子中是js）时，页面大小会增加，这会明显降低性能

您应该将您的代码组合在单个的

标记以及js文件中

---

您可以使用（Firebug插件），它将建议您如何提高站点的性能：）

实际上，最好使用第二种方法。它使代码更容易以这种形式维护和阅读。另一种方法是使用外部脚本

---

您有时会以第一种方式看到它的原因是，该站点在不同的时间包含不同的文件。

您肯定应该尝试使用这个很酷的工具。它将帮助您定位细粒度的细微速度效果，就像您提到的那样

---

在您的例子中，似乎有一种非常小但存在的效果，就是多次打开标记。

当浏览器在解析页面HTML时遇到

脚本

元素时，会发生以下情况：

浏览器暂停HTML的处理

浏览器启动其JavaScript解释器的实例

JavaScript解释器编译JavaScript并将其添加到当前页面的全局JavaScript池中

浏览器继续解析HTML，重复2。三,。HTML中有

script

元素的次数

因此，拥有多个

脚本
元素将减慢页面的呈现速度。HTML中的
脚本
元素越少，页面呈现的速度就越快

如果您的文档通过
src
attrbute（例如
）包含脚本，则可以使用延迟脚本处理。这是较新浏览器（如Firefox 3.6和2010年9月发布的浏览器）支持的功能。但内联脚本仍将阻止解析，直到它们被解释。
感知加载时间和实际加载时间之间存在差异

前者对最终用户来说是最重要的。有些网站从未完全加载，因为它们的广告总是在不断刷新和加载新内容——这就是为什么你会看到状态栏仍在工作，即使看起来页面已经完成


你的问题似乎是理论性的，所以我将尝试一个理论性的回答


当您的第一个案例可能会更快

最佳感知加载时间取决于这两个脚本的功能以及站点的要求。如果您的站点是面向JS的，这意味着布局、样式和HTML元素主要由JavaScript创建/控制，那么第一种方法可能会更快。您希望在第一个脚本中完成所有视觉处理和元素创建。实际上，你可以有一个空白的HTML页面和一个纯JS创建的站点（非常不明智），但这是可能的。这种情况很少发生，但在这种情况下，所有的视觉效果和元素都应该放在那里。第二个脚本应该包括用户在瞬间不会注意到的所有其他代码（幻灯片放映动画、悬停效果、单击方法）

请不要引用我的话，但我认为这是因为每个脚本（在HTML头部）在加载后都会进行解释，分解必要和不必要的脚本可能会加快一些预处理

网络/解释速度| most的第二种情况

不过，大多数网站并不依赖JavaScript，因此第二种情况是一般的做法。分解自定义代码有大小/缓存限制的原因，但对于非自定义代码，如各种框架，有一个原因是对于同时使用这两种框架的人来说，没有组合的jQuery/原型框架。还有一些情况下，将内联代码（放在正文中）可能更有益

在大多数情况下，首选第二种方法，或类似于Stephen列出的方法。这只是因为减少了通过网络传输的字节开销；此外，您还最小化了浏览器必须翻译的字符数量。真正的过度优化方法是
x='foo'，y='bar'（不需要
var
）

我实际上只有一页，有几页