将内联 js 剪出保存为。js 文件，用替换；注意路径正确、不加标签；按需使用 defer（dom 就绪后顺序执行）或 async（下载完立即执行，无序）；避免 404、mime 类型错误和 file:// 跨域问题。
怎么把 <script></script> 里的 JS 拆到外部文件
直接把原来写在 HTML 里的 JS 代码剪出来，保存成一个以 .js 结尾的纯文本文件（比如 main.js），然后用 <script src="main.js"></script> 替掉原来的内联 <script></script> 块。注意：外部脚本里 ** 不能 ** 再写 <script></script> 标签，只留 JS 代码本身。
- 路径要写对——
src是相对当前 HTML 文件的位置，比如 HTML 在/pages/index.html，JS 在同级目录就写src="main.js"；如果 JS 在/js/main.js，就得写src="js/main.js" - 浏览器加载外部脚本是异步发起请求的，但默认会阻塞 HTML 解析（除非加
defer或async） - 多个
<script src="……"></script>按出现顺序执行，这点和内联脚本一致
defer 和 async 到底该选哪个
两个都用来控制外部脚本不阻塞页面渲染，但行为完全不同：
-
defer：脚本下载和 HTML 解析并行，但 ** 等整个 HTML 解析完、DOM 构建完成后再按顺序执行 **，适合操作 DOM 的逻辑（比如初始化按钮事件） -
async：下载完立刻执行，** 不保证顺序 **，也不等 DOM 就绪，适合完全独立的脚本（比如统计埋点、广告加载） - 没加任何属性时，脚本会“边下载边阻塞”，HTML 解析暂停，直到脚本下载 + 执行完才继续——这是最容易导致白屏的原因
常见错误：<script async src="utils.js"></script> 后面紧跟着 <script>initApp();</script>，结果 initApp 报错——因为 utils.js 还没加载完，函数未定义。
为什么改完后 JS 不执行了
最常见三个原因：
立即学习 “ 前端免费学习笔记（深入）”；
- 路径 404：
Network面板里看main.js返回状态码是404，说明路径写错或文件没放对位置 - MIME 类型不对：服务器返回的
Content-Type是text/plain而不是application/javascript，Chrome 会直接拒绝执行（报错信息是Failed to load module script或类似提示） - 跨域限制：本地直接双击打开 HTML（
file://协议），浏览器会禁止加载外部 JS，必须通过本地服务器（如python3 -m http.server）访问
调试建议：打开浏览器开发者工具的 Console 和 Network 标签页，先看有没有红色报错，再过滤 JS 类型请求，确认状态码和响应头。
ES6 模块（type="module"）能直接替代普通外部脚本吗
不能直接混用。普通 <script src="a.js"></script> 是全局作用域，变量自动挂到 window 上；而 <script type="module" src="a.js"></script> 是模块作用域，默认不共享变量，且有严格限制：
- 模块内顶层的
var/let/const不会变成全局变量 - 必须显式
export和import，不能靠顺序隐式依赖 - 模块脚本默认启用严格模式，且
this是undefined - 模块路径必须带扩展名（
import './utils.js'），不能省略.js
如果你只是想把代码挪出去，别急着加 type="module"——它带来的是另一套运行规则，不是“更高级的外部脚本”。
路径、加载时机、作用域这三块，漏掉任意一个细节，JS 就可能静默失效。尤其是本地开发时，file:// 协议和服务器环境的行为差异，最容易让人反复怀疑人生。
