type="module"脚本能安全操作dom，因其默认defer：下载不阻塞html解析，执行严格在dom构建完成、domcontentloaded前一刻，确保dom就绪；且按模块依赖拓扑顺序串行执行，作用域隔离、自动严格模式、强制cors、支持顶层await。
type="module" 脚本为什么能安全操作 DOM？
因为 type="module" 默认具有 defer 行为，脚本不会阻塞 HTML 解析，且总在 DOM 构建完成、DOMContentLoaded 触发前执行 —— 即使它写在 里，也能直接访问 document.getElementById 等 API，无需包裹在事件监听中。
这和传统 <script></script> 的行为本质不同：传统脚本遇到就下载+同步执行；模块脚本则被浏览器识别为“需延迟执行的依赖性资源”，自动进入异步加载队列，并按声明顺序串行执行。
- 模块脚本必须是外部文件（
src属性必需），内联<script type="module">...</script>仅限简单调试，无法 import 其他模块 - 模块作用域默认严格模式，且变量不挂载到
window，避免全局污染 - 模块路径必须是相对或绝对 URL，不支持 protocol-relative（如
//cdn.example.com/a.js） - 若模块中含
import，所有依赖会提前预加载，但执行仍按入口顺序排队
async/defer 与 type="module" 混用会怎样？
async 和 defer 在 type="module" 脚本上会被忽略 —— 浏览器直接按模块规范处理，不响应这两个属性。强行写上只是冗余，无副作用，但易引发误解。
真正需要区分的是：你是否希望脚本具备模块语义（如 export/import）、是否需跨域 crossorigin、是否要降级兼容旧浏览器。
- 想用
async场景（如统计脚本）？改用普通脚本：<script async src="analytics.js"></script> - 想确保执行顺序又用模块？只靠
import链即可，无需defer；多个type="module"脚本按 HTML 中出现顺序执行 - 需要兼容不支持模块的浏览器？配对使用
<script nomodule src="fallback.js"></script>
动态创建 module 脚本时执行顺序还受控吗？
不受控。通过 document.createElement('script') 创建并插入的 type="module" 脚本，其加载与执行时机脱离 HTML 文档流，也不参与原生模块执行队列 —— 它会立即开始下载，但执行时间取决于当前宏任务队列状态，且无法保证与其他静态模块的顺序一致。
常见错误是以为 appendChild() 后脚本就会“接续”前面的模块执行，实际它属于独立的模块加载上下文，甚至可能在 DOMContentLoaded 之后才执行。
- 动态模块的
import()返回 Promise，适合按需加载，但应避免用它模拟静态依赖顺序 - 若需强顺序控制，优先用静态
import声明，而非靠 DOM 操作拼凑执行链 - 动态插入的模块无法被
nomodule降级机制捕获，旧浏览器会直接忽略它
模块加载失败时怎么定位问题？
模块加载失败通常静默失败（不抛异常），但会在控制台输出明确错误，如：
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.
这不是代码语法错，而是服务端未返回 Content-Type: application/javascript 或路径 404。模块加载还严格校验 CORS，跨域模块必须带 crossorigin 属性，否则报 Access to script at '...' from origin '...' has been blocked。
- 检查服务器是否对
.js文件返回正确的 MIME 类型 - 跨域模块必须加
crossorigin，哪怕只是crossorigin="" - 本地文件协议（
file://）下模块加载被多数浏览器禁止，必须走 HTTP 服务 - ES 模块不支持
document.write()，调用即报错中断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
