async 和 defer 是 HTML 中用于处理脚本加载和执行的两个属性,主要在
执行顺序:
- async:脚本将异步加载,并在加载完成后立即执行,不会阻塞页面的解析。多个 async 脚本的执行顺序可能与它们在页面中的出现顺序不同,因为它们的加载和执行是并行进行的。
- defer:脚本也会异步加载,但会等到文档解析完成后再执行。这意味着,defer 脚本的执行顺序与它们在页面中的出现顺序相同。
DOMContentLoaded 事件:
- async:脚本可能在 DOMContentLoaded 事件触发之前执行,这意味着在脚本执行时,DOM 可能还没有完全加载。
- defer:脚本会在 DOMContentLoaded 事件触发之后执行,因此可以确保在脚本执行时,DOM 已经完全加载。
用途:
- async:适用于那些不依赖于文档其他部分,并且可以以任意顺序执行的脚本。例如,第三方广告脚本或分析脚本。
- defer:适用于那些需要在文档解析完成后执行,但不需要等待整个页面加载完成的脚本。例如,那些依赖于 DOM 的脚本。
多个脚本的处理:
- async:如果有多个 async 脚本,它们的加载和执行是并行进行的,可能会导致执行顺序的不确定性。
- defer:如果有多个 defer 脚本,它们的加载是并行进行的,但执行会按照它们在页面中的顺序进行。
总结来说,async 和 defer 都是为了优化页面加载速度和提高用户体验而设计的,但它们的行为和适用场景有所不同。选择哪个属性取决于脚本的具体需求。