JavaScript异步加载优化方法

大家好，今天本人给大家带来文章《JavaScript异步加载优化技巧》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

async 和 defer 不能混用，因语义冲突导致 defer 被忽略；async 立即执行，defer 等 DOM 解析完按序执行；混用引发 DOM 访问错误、执行顺序混乱等问题。

为什么 async 和 defer 不能混用

浏览器只认一个脚本加载策略：同时写 async 和 defer，async 会生效，defer 被忽略。这不是 bug，是规范行为——async 表示“下载完立刻执行”，defer 表示“等 DOM 解析完再按顺序执行”，二者语义冲突。

常见错误现象：
– 页面 JS 执行时机不稳定，尤其依赖 DOM 的代码报 document.getElementById(...) is null
– 多个 defer 脚本执行顺序和 HTML 中声明顺序不一致（实际是顺序的，但有人误以为乱序）

• 第三方统计、埋点类脚本优先用 async：不阻塞、不依赖 DOM、彼此无顺序要求
• 业务主逻辑（如初始化 Vue/React 应用）必须用 defer：确保 DOM 已就绪，且多个入口脚本能按需串行执行
• 避免在 async 脚本里调用 document.write()：会清空整个页面，现代浏览器已禁用该行为并抛错

动态 import() 不只是“懒加载”，更是作用域隔离手段

import() 返回 Promise，它真正价值不在“延迟加载”，而在于：每次调用都创建独立模块作用域，避免变量污染和执行时机耦合。比如表单校验规则模块，只在用户点击提交后加载，既省首屏体积，又防止规则函数提前执行或被其他模块意外覆盖。

使用场景：
– 条件性加载（如仅在 Safari 下加载 WebKit 特定 API 封装）
– 路由级代码分割（React Router 的 lazy() 底层就是它）
– 避免初始模块因未满足依赖而报 ReferenceError

• 不要在循环中无节制调用 import()：每个调用触发一次 HTTP 请求，可能触发浏览器并发连接限制（通常 6 个）
• 错误捕获必须显式写：

  import('./module.js').catch(err => console.error('模块加载失败', err))

• Webpack/Vite 会自动将 import() 调用转为 chunk，但若路径含变量（如 import(`./${name}.js`)），会打包出所有匹配文件，体积暴增

内联关键 JS 时，type="module" 会悄悄改变执行时机

把少量初始化代码写进