使用带有嵌入式代码的单个脚本标签，或使用遍布整个 HTML 的相同代码的多个脚本标签，有什么区别(性能、最佳实践等)吗？
例如:
<script>
foo();
</script>
...
<script>
bar();
</script>
对比:
<script>
foo();
bar();
</script>
谢谢
最佳答案
使用像您引用的那样的内联 脚本，不太可能很多 差异；然而，每次浏览器的 HTML 解析器遇到 script标签，它:
- 突然停下来
- 构建标签中文本的字符串，直到它第一次看到字符串
"</script>" - 将该文本交给 JavaScript 解释器，监听解释器在您执行
document.write时发送的输出 - 等待解释器完成
- 将接收到的累积输出插入解析流
- 继续解析
因此，从理论上讲，增加此序列必须发生的次数会增加页面加载时间。它还会影响解析器在 token 流中“向前看”的程度，这可能会降低其效率。
所有这些听起来都非常戏剧化，但您必须在您关心的各种浏览器中分析真实页面，以确定它是否对现实世界产生影响。
总而言之，尽可能多地将它们结合起来。如果您不能合理地组合一对夫妇，请不要担心太多，直到/除非您看到现实世界的问题。
以上是内联脚本。当然，如果你有多个 script引用一堆外部 JavaScript 文件的标签，您还会遇到每个文件都必须下载的问题，并且发起 HTTP 请求是一件昂贵的事情(相对而言)，因此最好在很大程度上将它们合并到一个文件中。
其他一些需要考虑的事情:
- 有很多
script分散在整个 HTML 中的标记可能会使脚本难以维护 - 将 HTML 和脚本分离到单独的文件中有助于限制它们的耦合程度，再次有助于维护
- 将脚本放在一个单独的文件中可以通过压缩器/压缩器/加壳器运行该文件，最大限度地减少代码的大小并删除注释，从而让您可以自由地在源代码中注释，因为知道这些注释是私有(private)的
- 将脚本放入外部文件使您有机会按功能将事物分开，然后将它们组合到页面的单个文件中(压缩/缩小/打包)以便高效地传送到浏览器
更多:
关于javascript - 多个与单个脚本标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6451156/