多个与单个脚本标记

Question

使用带有嵌入代码的单个脚本标记，或者使用遍布HTML的相同代码的多个脚本标记之间是否存在任何差异（性能，最佳实践等）？

例如：

<script>
    foo();
</script>
...
<script>
    bar();
</script>

与

<script>
    foo();
    bar();
</script>

由于

Answer 1

使用内联脚本，就像你引用的那样，不太可能存在很多的差异;但是，每次浏览器的HTML解析器遇到script标记时，它都会：

• 嘎然而止
• 在标记中构建文本的字符串，直到它第一次看到字符串"</script>"
• 将文本传递给JavaScript解释器，在执行document.write
时听取解释器发送的输出
• 等待口译员完成
• 将收到的累积输出插入解析流
• 继续解析

因此，增加此序列必须发生的次数，理论上可以增加页面加载时间。它还会影响解析器在令牌流中“向前看”的程度，这可能会降低其效率。

所有这些听起来都非常引人注目，但您必须在您关注的各种浏览器中分析真实页面，以确定它是否会产生真实影响。

总而言之，尽可能合理地将它们组合起来。如果你不能合理地结合一对夫妇，除非你看到现实世界的问题，否则不要太担心它。

以上内容适用于内联脚本。当然，如果你有几个script标签引用了一堆外部JavaScript文件，你也会遇到每个文件都必须下载的问题，启动HTTP请求是一件昂贵的事情（相对而言）因此，最好将这些组合成一个文件。

还需要考虑其他一些事项：

• 在您的HTML中散布了大量script个标签可能会让您难以对脚本进行维护
• 将HTML和脚本分隔成单独的文件可以帮助您限制它们的耦合程度，再次帮助维护
• 将脚本放在单独的文件中可以通过minifiers / compressors / packers运行该文件，最大限度地减少代码的大小并删除注释，从而让您可以在源代码中自由评论，因为知道这些注释将是私有的< / LI>
• 将脚本放入外部文件中，您可以将功能分开，然后将它们合并到页面的单个文件中（压缩/缩小/打包），以便有效地传送到浏览器

更多：

• YUI's "Best Practices for Speeding Up your Web Site"
• Google's "Web Performance Best Practices"

Answer 2

在我看来，尽可能地组合脚本更好。某些浏览器在执行脚本块时必须暂停渲染。查看答案：Javascript Performance: Multiple script blocks Vs single bigger block

Answer 3

到目前为止，所有的JavaScript代码都在一个标签中，不一定是这种情况。

您可以在文档中包含任意数量的标记。

标签会在遇到时进行处理。

希望这有帮助。

Answer 4

有些人认为最佳做法是将所有脚本组合在一个脚本块或单个脚本文件中，只加载真正需要的javascript并尽可能晚地加载它，以免减慢html的渲染速度。 / p>

除此之外，我确信使用单个脚本块的加载速度比使用多个脚本块的速度快，因为它们必须单独进行评估。然而，这种差异可能无法识别。

Answer 5

我使用多个标签。一个用于图像幻灯片，另一个用于文本幻灯片，因此我可以在同一网页上同时使用图像幻灯片和文本幻灯片。