前端 HTML 面试题, HTML 的 script 标签中 defer 和 async 有什么区别?

Step 1

Q:: HTML 的 script 标签中 defer 和 async 有什么区别？

A:: defer 和 async 是两个用于控制外部 JavaScript 脚本加载和执行顺序的属性。它们的主要区别如下：

1. defer 属性： - defer 会将脚本的执行推迟到 HTML 文档完全解析和显示后再执行。 - 多个 defer 脚本会按照它们在页面中出现的顺序依次执行。 - 适用于那些依赖于 DOM 完成解析后才执行的脚本。

2. async 属性： - async 允许脚本在后台下载，并且一旦下载完成，立即执行。 - 多个 async 脚本的执行顺序不可预测，因为它们是异步加载的，先加载完成的先执行。 - 适用于独立、不依赖其他脚本或 DOM 完整解析的脚本。

Step 2

Q:: 为什么选择使用 defer 而不是 async？

A:: defer 适用于需要等待 DOM 结构完全生成后再执行的脚本，这样可以避免脚本过早执行导致的错误。比如，某些操作 DOM 的脚本，如果 DOM 尚未生成，执行时会导致错误。使用 defer 可以确保脚本按顺序执行并且是在 DOM 完全加载后执行。

Step 3

Q:: 在什么情况下适合使用 async？

A:: async 适用于那些不依赖于其他脚本或 DOM 的加载顺序，并且希望尽早执行的脚本。典型的例子包括独立的分析工具、广告脚本等，这些脚本通常不依赖于页面的其他内容，并且越早加载越好。