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

Step 1

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

A:: 在 HTML 中，script 标签的 defer 和 async 属性用于控制外部脚本文件的加载和执行顺序。

- **defer**: 当 script 标签使用 defer 属性时，浏览器会并行下载脚本文件，但不会立即执行，而是在 DOM 完全构建完成后再执行。defer 脚本的执行顺序与它们在页面中的出现顺序一致。

- **async**: 当 script 标签使用 async 属性时，浏览器会并行下载脚本文件，并在下载完成后立即执行。与 defer 不同的是，async 脚本的执行顺序与它们在页面中的出现顺序无关，取决于下载完成的顺序。

Step 2

Q:: defer 和 async 的区别在实际项目中有什么意义？

A:: 在实际项目中，选择 defer 还是 async 取决于脚本的功能和需求。

- **defer**: 适合依赖于 DOM 结构的脚本，如操作页面内容的脚本。因为 defer 脚本会在 DOM 加载完成后执行，确保脚本可以安全地访问页面元素。

- **async**: 适合独立运行、不依赖于 DOM 结构的脚本，如分析工具（Google Analytics）。由于它们不会干扰页面的加载流程，可以提高页面的加载速度。

Step 3

Q:: 不使用 defer 或 async 时，脚本的执行方式如何？

A:: 当 script 标签不使用 defer 或 async 属性时，浏览器会阻塞页面的解析，先下载并执行脚本文件，之后再继续解析页面。这样做会延长页面的加载时间，特别是对于放在页面 head 中的脚本。