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

Question

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

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

Answer 1

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

内联脚本

• 加载在同一页面中,因此不必触发另一个请求.
• 立即执行.
• async和defer属性无效
• 在使用服务器端动态呈现时可能会有所帮助.

外部脚本

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

Answer 2

外部脚本文件

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

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

内联代码

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

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

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