想要让你的网页“活”起来吗？本文详细介绍了HTML引入JavaScript的几种方式，重点讲解了如何使用`

推荐将JavaScript脚本放在body末尾或使用defer属性，因为能避免阻塞页面渲染，提升加载速度和用户体验。

将JavaScript引入HTML主要通过

2. 外部脚本（External Scripting） 将JavaScript代码写入一个独立的.js文件，然后在HTML中使用标签引用它。

index.html:

    


    
外部脚本加载
    

my-script.js:

// 这是 my-script.js 文件的内容
console.log("Hello from external script!");
document.querySelector('h1').style.backgroundColor = 'lightgray';

通常，

特点：

• 非阻塞HTML解析：脚本下载与HTML解析并行。
• 立即执行：脚本下载完后立即执行，不管HTML解析是否完成。
• 执行顺序不保证：如果有多个async脚本，它们的执行顺序是不确定的，哪个先下载完哪个先执行。

适用场景：async特别适合那些独立性强、不依赖于其他脚本或DOM结构的脚本，比如第三方统计代码（Google Analytics）、广告脚本等。它们不需要严格的执行顺序，也不应该阻塞页面的核心内容加载。

defer属性： 当你在

特点：

• 非阻塞HTML解析：脚本下载与HTML解析并行。
• 延迟执行：脚本下载完后，会等待HTML解析完成后才执行。
• 保证执行顺序：多个defer脚本会按照它们在文档中出现的顺序执行。

适用场景：defer非常适合那些依赖于DOM内容或者需要特定执行顺序的脚本，比如页面交互逻辑、组件初始化脚本等。它既能避免阻塞页面渲染，又能确保脚本在DOM准备就绪后，并按照预期顺序执行。我个人在项目中，如果不是特别需要async的即时性，通常都会首选defer，因为它提供了更好的可控性。

简单来说，async是“下载完就跑，不管别人”，defer是“下载完等等，等大家都准备好了，按顺序跑”。理解并合理运用这两个属性，能让你的网页加载速度和用户体验得到质的飞跃。

为什么推荐使用外部JavaScript文件而不是内联脚本？

在前端开发中，虽然内联脚本（直接写在HTML中的