Question

我正在尝试优化具有大量JS意粉代码的网站的加载时间。其中一些实际上是这样的：

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

而不是理智程序员代码：

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

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

Answer 1

当浏览器在解析页面的HTML期间遇到script元素时，会发生以下情况：

浏览器暂停处理HTML。
浏览器启动其JavaScript解释器的实例。
JavaScript解释器编译JavaScript并将其添加到当前页面的全局JavaScript池中。
浏览器继续解析HTML，重复2.和3.与HTML中的script元素一样多次。

因此，拥有多个script元素将减慢页面的呈现速度。 HTML中存在的script元素越少，页面呈现的速度就越快。

如果您的文档包含src attrbute（例如<script src="http://example.com/myscript.js">）的脚本，那么您可以使用async attribute来延迟脚本处理。这是新版浏览器支持的功能（例如自2010年9月发布的Firefox 3.6和Webkit based浏览器）。但是内联脚本仍会阻止解析，直到它们被解释为止。

Answer 2

如果要下载更多字节，第一个例子就更慢了。

但是，我确信你永远不会能够区分后一个例子和前一个例子的微不足道的微优化。除了组织，没有理由打扰。

那说，为了组织起见，我肯定会打扰！保持代码有序将加快开发时间。将所有JavaScript保存在一个位置会阻止您搜索代码段。

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

使用外部文件（由于浏览器缓存），您将获得最快的收益。
如果将<script>标记移动到页面的页脚，您将允许浏览器在下载或执行JavaScript之前呈现标记。这将产生更快下载的错觉。

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

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

Answer 3

感知加载时间与实际加载时间之间存在差异。

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

你的问题似乎是理论上的，所以我会尝试理论上的反应。

当第一个案例可能更快
时
最佳感知加载时间取决于两个脚本的功能以及您的网站所需的内容。如果您的站点是面向JS的，意味着布局，样式和HTML元素主要由JavaScript创建/控制，那么第一种方式可能更快。您希望在第一个脚本中执行所有可视化处理和元素创建。真的，你可能有一个空白的HTML页面和一个纯粹的JS创建的网站（高度未经修改），但可能。这种情况几乎不是这样，但在这种情况下，所有的视觉和元素都应放在那里。第二个脚本应该包括用户在瞬间不会注意到的所有其他代码（幻灯片放映动画，悬停效果，单击方法）。

请不要引用我这个，但我认为这是因为每个脚本（在HTML头中）在加载后被解释，打破必要和不必要的脚本可以加快一些预处理。
网络/解释速度|大多数的第二种情况

大多数网站都不依赖于JavaScript，所以第二种情况是做事的一般方法。打破自定义代码存在大小/缓存原因，但对于非自定义代码（例如各种框架），有一个原因就是没有组合的jQuery / Prototype框架，对于同时使用这两者的人来说。还有一些情况下放置内联代码（在正文中）可能更有益。

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

Answer 4

当您在页面上键入更多内容（在您的情况下为js）时，页面大小会增加，从而最终降低性能。

您应该将代码合并到单个<script>标记以及js文件中。

您可以使用Google's Page Speed（Firebug的插件）来建议您如何改善网站的效果：）

Answer 5

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

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

Answer 6

你一定要尝试使用这个很酷的工具cuzillion。它可以帮助您找到细粒度的微妙速度效果，就像您提到的那样。

在你的情况下，它似乎表明，打开标签的次数有很小的现有效果。

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

6 个答案: