在 JavaScript 中,实现脚本异步加载的方式有哪几种?它们之间的主要区别是什么?
考察说明
考查对 JavaScript 脚本异步加载机制及其差异的理解。
回答思路
- 【回答框架 1】异步加载主要方式包括 async、defer、动态创建 script 标签以及 ES Module 的异步加载。async 属性使脚本下载时异步,执行顺序不保证,适合独立模块。
- 【回答框架 2】defer 属性使脚本在文档解析完成后按顺序执行,DOM 已就绪,适合依赖 DOM 或执行顺序要求的脚本。
- 【回答框架 3】动态创建 script 元素并在加载完成后执行回调,可精确控制加载时机,但需处理事件监听和缓存。
- 【回答框架 4】ES Module 默认异步加载,且自动启用严格模式,支持按需导入,执行顺序按照依赖关系确定。
- 【回答框架 5】async 与 defer 区别在于执行时机与顺序:async 下载完立即执行,可能阻塞渲染;defer 延迟到解析后按序执行,通常不阻塞 DOM 解析。
- 【关键点 1】async 不保证执行顺序,适合独立脚本;defer 保证按顺序执行,适合依赖脚本。
- 【关键点 2】动态加载可以控制加载时机,但需考虑错误处理和重复加载问题。
- 【关键点 3】ES Module 天然支持异步加载和依赖管理,是现代浏览器的推荐方案。
- 【易错点 1】误认为 async 和 defer 都保证执行顺序,实际 async 顺序不保证。
- 【易错点 2】忽略动态加载脚本的缓存问题,可能导致重复请求或执行多次。
- 【易错点 3】在未考虑模块依赖时使用 async,可能因执行顺序导致引用错误。