HTML中插入JavaScript的三种方式

本文深入解析了在HTML中插入JavaScript的几种关键方式，着重讲解了`

在HTML中插入JavaScript的核心方法是使用

这种方式直观，但如果JS代码很多，就会让HTML文件显得臃肿，难以维护。

另一种更推荐的方式是外部脚本，把JavaScript代码单独写在一个.js文件里，然后在HTML中通过

这样做的好处显而易见：代码分离，结构清晰，而且浏览器可以缓存外部JS文件，提高加载速度。

还有一种不太常用的，或者说不推荐用于复杂逻辑的方式是行内脚本，直接把JS代码作为HTML元素的属性值。

点击我

这种方式虽然能快速实现一些简单的交互，但它严重违反了结构、样式、行为分离的原则，代码复用性差，维护起来简直是噩梦。我个人在实际项目中几乎不会用它来处理任何有意义的逻辑，除非是极简的、一次性的事件绑定。

为什么要把JavaScript代码放在HTML的不同位置？

这确实是个老生常谈但又至关重要的问题。我们常常看到

当浏览器遇到这样的脚本标签时，它会暂停HTML的解析，去下载my-script.js文件，下载完成后立即执行它，执行完毕后才继续解析HTML。这就像你在看一本小说，突然看到一个脚注，你必须停下来去翻阅参考资料，看完才能继续读小说。这种阻塞行为，尤其当脚本文件很大或者网络状况不佳时，会导致用户看到长时间的白屏或者不完整的页面，体验很差。

现在，我们引入async：

加上async属性后，浏览器在下载my-script.js文件的同时，会继续解析HTML。也就是说，下载和HTML解析是并行进行的，不会互相阻塞。一旦my-script.js下载完成，HTML解析就会暂停，脚本立即执行。执行完毕后，HTML解析继续。 这就像你边看小说边听音乐，音乐下载完了就播放，但如果音乐播放器突然弹出一个广告，你还是得停下来处理一下。async的特点是，脚本的执行顺序是不确定的，哪个脚本先下载完哪个就先执行。所以，它适用于那些不依赖于其他脚本或者DOM结构的独立脚本，比如谷歌分析（Google Analytics）的代码，或者一些广告脚本。如果你的脚本之间有依赖关系，或者需要操作完整的DOM，那么async可能会导致问题。

再来看看defer：

defer和async一样，都会让脚本的下载与HTML解析并行进行，不阻塞页面渲染。但它们最大的不同在于脚本的执行时机。带有defer属性的脚本，会等到整个HTML文档解析完毕后，并且在DOMContentLoaded事件触发之前，按照它们在HTML中出现的顺序依次执行。 这就像你边看小说边听音乐，但你告诉音乐播放器，等我把这章小说看完，你再开始播放音乐。而且，如果有多首音乐，你会按照我给你的列表顺序一首一首放。 defer非常适合那些需要操作DOM，并且

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。