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

Question

我的网页上散布着一些javascript片段 - 很多都包含在我自己的.js文件中，但是我在网上找到的一些东西直接放在页面上。

我不太熟悉javascript与页面的交互方式 - 添加内联脚本或添加对外部文件的引用有区别吗？

Answer 1

使用其中一种方式几乎没有什么区别。真正的区别来自每个人的优势/劣势。

内联脚本

• 加载在同一页面中，因此无需触发其他请求。
• 立即执行。
• async和defer属性无效
• 使用服务器端动态渲染时可以提供帮助。

外部脚本

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

Answer 2

外部脚本文件

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

外部文件会降低页面呈现速度，因为浏览器必须停止解析并下载外部文件。这增加了一个网络往返，这将减慢一切。此外，因为外部文件被缓存，如果已经更新

，则很难删除它们

内嵌代码

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

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

希望这有助于您了解更多信息：）

Answer 3

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

Answer 4

一般来说，评论中没有区别。但是，如果片段嵌入在页面中的HTML中间并且它不是函数，则立即执行。当不采取足够的谨慎措施时，这些脚本段在移动到单独的JS文件时可能会有不同的行为。