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

Question

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

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

Answer 1

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

内联脚本

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

外部脚本

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