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

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

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

查看，您可以看到，您只能对外部脚本使用

异步

和

延迟

属性，这可能会对不使用事件侦听器作为入口点的脚本产生影响。
除此之外，内联使浏览器无法单独缓存它，因此如果在不同的页面上使用相同的脚本，浏览器缓存将无法启动。因此，它可能会对性能和/或带宽使用产生影响。

---

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

一般来说，注释中指出的没有区别。但是，如果代码段嵌入页面中HTML的中间，而不是一个函数，则立即执行。当移动到单独的JS文件时，如果没有足够的注意，这些脚本段的行为可能会有所不同

使用一种或另一种方法几乎没有区别。真正的区别来自于每种方法的优缺点

内联脚本

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

外部脚本

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

---

外部脚本文件

• 更容易分析，因此您可以更高效地调试和阅读它。这使我们作为程序员的生活更加轻松
• 由于缓存了外部文件，下载时间缩短，因此可以随网站一起下载
• 与多次编写相同的脚本不同，可以在代码中的任何位置调用和执行外部文件

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

内联代码

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

尽管内联代码更难阅读和分析，因为它看起来就像是一堆乱扔在一起的代码。在调试时发现问题是一项艰巨的工作，这使得程序员的生活变得艰难

---

希望这有助于您进一步理解：）

这都是关于关注点和可维护性的分离。没有区别，这只是一个方便和惯例的问题。在一个在线示例中，更容易将javascript与HTML内联显示。正如在大型项目中一样，在文件中使用javascript的惯例有助于维护和扩展。About

defer

，摘自：“由于此功能尚未由所有其他主要浏览器实现，作者不应假设脚本的执行将实际延迟。”CanIUse声称只有Opera Mini和IE