js async和defer的区别

async 和 defer 是 HTML 中用于处理脚本加载和执行的两个属性，主要在

执行顺序：

• async：脚本将异步加载，并在加载完成后立即执行，不会阻塞页面的解析。多个 async 脚本的执行顺序可能与它们在页面中的出现顺序不同，因为它们的加载和执行是并行进行的。
• defer：脚本也会异步加载，但会等到文档解析完成后再执行。这意味着，defer 脚本的执行顺序与它们在页面中的出现顺序相同。

DOMContentLoaded 事件：

• async：脚本可能在 DOMContentLoaded 事件触发之前执行，这意味着在脚本执行时，DOM 可能还没有完全加载。
• defer：脚本会在 DOMContentLoaded 事件触发之后执行，因此可以确保在脚本执行时，DOM 已经完全加载。

用途：

• async：适用于那些不依赖于文档其他部分，并且可以以任意顺序执行的脚本。例如，第三方广告脚本或分析脚本。
• defer：适用于那些需要在文档解析完成后执行，但不需要等待整个页面加载完成的脚本。例如，那些依赖于 DOM 的脚本。

多个脚本的处理：

• async：如果有多个 async 脚本，它们的加载和执行是并行进行的，可能会导致执行顺序的不确定性。
• defer：如果有多个 defer 脚本，它们的加载是并行进行的，但执行会按照它们在页面中的顺序进行。

总结来说，async 和 defer 都是为了优化页面加载速度和提高用户体验而设计的，但它们的行为和适用场景有所不同。选择哪个属性取决于脚本的具体需求。