问Javascript -内联与外部脚本-有什么区别？

EN

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

内联脚本

• 在同一页中加载，因此不需要触发另一个请求。
• 立即被处决。
• 异步和延迟属性没有任何影响。
• 当您使用服务器端动态呈现时，可能会有所帮助。

外部脚本

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

外部脚本文件

• 分析起来要容易得多，这样您就可以更有效地调试和读取它。这使我们作为程序员的生活变得容易多了。
• 下载时间随着外部文件的缓存而减少，因此可以通过网站下载。
• 在代码中的任何地方都可以调用和执行外部文件，而不是多次编写相同的脚本。

外部文件降低页面呈现速度，因为浏览器必须停止解析和下载外部文件。这增加了一个网络往返，这将减缓一切。此外，由于外部文件是缓存的，因此如果更新了外部文件，就很难删除它们。

内联代码

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

尽管内联代码很难阅读和分析，因为它看起来就像一堆被丢弃在一起的代码。调试时必须找到问题，这是一项艰苦的工作，使程序员的生活变得艰难。

希望这能帮助你更好地理解:)

查看 tag documentation，您可以看到只能在外部脚本中使用async和defer属性，这可能会对不使用事件侦听器作为入口点的脚本产生影响。

除此之外，内联显示浏览器无法单独缓存它，因此如果您在不同的页面上使用相同的脚本，浏览器缓存就无法启动。因此，它可能会对性能和/或带宽使用产生影响。

当然，将代码拆分成文件是组织它的一种方式。