在 HTML 中引入外部 JS 时默认写法是script src./app.js/script浏览器解析到这里时会先暂停 HTML 解析下载并执行 JS执行完后再继续解析页面。所以普通script可能阻塞页面。1.defer写法script defer src./app.js/scriptdefer的特点JS 和 HTML 可以同时加载但 JS 会等 HTML 解析完成后再执行。流程解析 HTML ↓ 遇到 defer ↓ 同时下载 JS ↓ HTML 继续解析 ↓ HTML 解析完成 ↓ 执行 JS多个deferscript defer src./a.js/script script defer src./b.js/script会按照 HTML 中的顺序执行a.js ↓ b.js即使b.js先下载完成也不会先执行。所以defer适合业务代码 需要操作 DOM 的代码 脚本之间有依赖关系2.async写法script async src./app.js/scriptasync的特点JS 下载时不会阻塞 HTML但下载完成后会马上执行。流程解析 HTML ↓ 遇到 async ↓ 同时下载 JS ↓ HTML 继续解析 ↓ JS 下载完成 ↓ 暂停 HTML ↓ 马上执行 JS ↓ 继续解析 HTML多个asyncscript async src./a.js/script script async src./b.js/script谁先下载完谁先执行。可能b.js ↓ a.js所以async不保证执行顺序。更适合彼此独立的脚本比如统计脚本 分析脚本 广告脚本 第三方独立 SDK3.defer和async的区别特点deferasyncJS 下载是否与 HTML 并行是是下载时阻塞 HTML否否什么时候执行HTML 解析完成后下载完成马上执行多个脚本顺序保证顺序不保证适合脚本之间有依赖是否4. 和DOMContentLoaded的关系defer脚本会在 HTML 解析完成后执行并且通常会在DOMContentLoaded触发之前执行完。顺序可以理解成HTML 解析完成 ↓ 执行 defer 脚本 ↓ DOMContentLoaded而async没有这么固定。它可能在 HTML 解析过程中执行也可能在DOMContentLoaded之后才执行。5. 最后记忆defer 一边下载一边解析 HTML HTML 解析完后按顺序执行async 一边下载一边解析 HTML 谁先下载完谁马上执行总结defer更稳适合普通业务脚本async更自由适合互不依赖的独立脚本。