偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《HTML引入JavaScript的常用方法是使用将JavaScript代码直接写在src属性指定外部JS文件的路径。通常放在或底部，根据需求决定加载时机。3. 异步加载脚本（使用async属性）浏览器会异步加载脚本，不会阻塞页面渲染。适用于不依赖其他脚本的独立JS文件。4. 延迟加载脚本（使用defer属性）脚本会在页面解析完成后执行，但会按照加载顺序执行。适合需要等待DOM加载完成后再执行的脚本。5. **动态加载脚本（通过JS代码添加，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

推荐将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中的