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

八股文一网打尽，更多面试题请看程序员面试刷题神器 - 面试鸭

defer 和 async 属性用于控制脚本的加载和执行 ，都是异步加载外部的 JS 脚本文件，两者都不会阻塞 HTML 的解析。

下图可以直观的看出三者之间的区别:

其中蓝色代表 JS 脚本网络加载时间，红色代表 JS 脚本执行时间，绿色代表 HTML 解析。

主要区别

1）执行顺序：defer 保证脚本按照在 HTML 中出现的顺序执行，一般是在 HTML 解析完成后才执行。 而 async 则是谁先下载完成谁先执行， async 可能会阻断解析以执行脚本。 2）适用场景：async 适合不依赖于其他脚本且不被其他脚本依赖的独立模块，例如：计数器或广告加载。
而 defer 适用于需要在 HTML 完全解析后才能运行的 JS 脚本，尤其是依赖于 DOM 的 JS 脚本。它保证了脚本执行的顺序性和依赖关系，适合用于包含多个脚本的页面。

扩展知识点

1） 页面性能影响

• 性能优化：使用 defer 和 async 可以显著改善页面的加载时间。特别是在加载大型脚本或依赖多个脚本的页面时，合理使用这两个属性能减少页面渲染的阻塞时间，提升用户体验。
• 减少首屏加载时间：由于 async 和 defer 脚本不阻塞HTML解析，可以帮助减少首次内容绘制（FCP）和首次有意义绘制（FMP）的时间，在做 SEO 的时候可以运用上这两个属性。

2）脚本管理技巧：可以通过现代的模块打包工具如 Webpack 、Vite 管理脚本依赖，并自动为不同的脚本分配最合适的加载策略（例如动态导入）。
3）历史兼容性：老旧的浏览器中可能不完全支持或表现不一致。开发时需要考虑到目标用户群体可能使用的浏览器类型。

八股文一网打尽，更多面试题请看程序员面试刷题神器 - 面试鸭