script src必须指向.js文件，HTML/CSS路径会导致静默失败；defer适合依赖DOM的脚本，async适合无DOM操作的统计类脚本；type="module"启用严格模式和ES模块语法，但要求路径带扩展名、跨域需CORS。
script src属性必须指向.js文件，不能是.html
直接写 <script src="utils.html"></script> 会静默失败——浏览器尝试加载该 HTML 文件，但不会执行其中的 <script> 块，也不会报错。只有以 .js 为扩展名、且内容为纯 JavaScript 的文件才能被正确解析执行。
常见错误现象：404 Not Found（路径错）、Failed to load module script（用了 type="module" 却没配对的 export）、控制台空白无报错但功能不生效（实际加载了 HTML 或 CSS 文件）。
- 确保目标文件是纯文本，编码为 UTF-8 无 BOM
- 路径区分大小写：Linux/macOS 服务器上
Utils.js≠utils.js - 相对路径以当前 HTML 文件位置为基准，不是以 JS 文件位置为准
defer 和 async 选哪个？看脚本是否依赖 DOM
如果脚本里写了 document.getElementById("app") 或操作了某个 <div id="list">，那它必须等 DOM 解析完才能运行，否则返回 null。这时用 defer 是安全选择；而 async 可能抢在 DOM 构建前就执行，导致报错。
典型场景：
立即学习“前端免费学习笔记（深入）”；
-
defer：初始化 Vue 实例、绑定事件监听器、读取页面元素渲染数据 -
async：统计脚本（如 GA/Plausible）、广告 SDK、不操作 DOM 的工具函数库 - 都不加：脚本会阻塞 HTML 解析，页面白屏时间变长（尤其在
<head>中）
type="module" 不是“可选开关”，而是行为切换开关
加上 type="module" 后，脚本自动启用严格模式、支持 import/export、默认延迟执行（相当于自带 defer），但同时也带来硬性约束：
- 路径必须带扩展名：
import { foo } from "./utils.js"—— 写成./utils会报错 - 模块内顶层
this是undefined（不是window） - 无法访问全局变量，除非显式挂载到
window - 跨域加载需服务端设置
CORS头，否则触发Access is denied
如果你只是引入一个传统 jQuery 插件或旧版工具库，不要加 type="module"，否则会直接报语法错误。
动态创建 script 标签时，onload 和 onload 顺序不可靠
用 document.createElement("script") + appendChild() 加载多个外部脚本时，即使按顺序插入，也不能保证执行顺序——因为每个请求的网络延迟不同。比如：
const s1 = document.createElement("script"); s1.src = "a.js"; s1.onload = () => console.log("a done"); document.head.appendChild(s1);
const s2 = document.createElement("script"); s2.src = "b.js"; s2.onload = () => console.log("b done"); document.head.appendChild(s2);
输出可能是 b done 先于 a done。真正需要顺序执行时，得链式调用或用 Promise.all 包装。
容易被忽略的点：动态插入的脚本默认没有 defer 行为，也不受 async 属性影响（除非手动设 s1.async = true），它的加载和执行时机完全由浏览器调度决定。
