使用一种或另一种方式几乎没有区别。真正的区别来自每个人的优点/缺点。

内联脚本

• 加载在同一页面中，因此不需要触发另一个请求。
• 被立即执行。
• async 和 defer 属性无效
• 当您使用服务器端动态渲染时会很有帮助。

外部脚本

• 更好地分离关注点和可维护性。
• async 和 defer 属性有效，因此如果存在此属性，脚本将更改默认行为。这对于内联脚本是不可能的。
• 下载外部脚本后，浏览器会将其存储在缓存中，因此如果另一个页面引用它，则不需要额外下载。
• 可用于按需加载客户端代码并减少整体下载时间和大小。

外部脚本文件

• 更容易分析，因此您可以更有效地调试和阅读。这让我们程序员的生活变得更轻松
• 由于外部文件被缓存，下载时间减少，因此可以通过网站下载
• 无需多次编写相同的脚本，可以在代码的任何位置调用和执行外部文件

外部文件会降低页面渲染速度，因为浏览器必须停止解析并下载外部文件。这增加了一个网络往返，这将减慢一切。此外，由于外部文件被缓存，如果已更新，则很难删除它们

内联代码

• 内联代码减少了 HTTP 请求的数量，从而提高了网页的性能。这是因为代码加载在同一页面中，因此不需要请求
• 内联脚本立即执行

尽管内联代码更难阅读和分析，因为它看起来就像是一堆代码拼凑在一起。调试时发现问题很辛苦，程序员的生活很艰难

希望这可以帮助您了解更多:)

查看<script>标记文档，您可以看到您只能将async和defer属性用于外部脚本，这可能会对不使用事件侦听器作为入口点的脚本产生影响。
除此之外，内联使浏览器无法自行缓存它，因此如果您在不同的页面上使用相同的脚本，浏览器缓存将无法启动。因此它可能会对性能和/或带宽使用产生影响。
而且，当然，将代码拆分成文件是组织它的一种方式。

一般来说，评论中指出没有区别。但是，如果该代码段嵌入在页面中 HTML 的中间并且它不是函数，则它会立即执行。如果没有足够小心，这些脚本段在移动到单独的 JS 文件时可能会在行为上有所不同。