默认 defer、启用严格模式、作用域隔离、支持顶层 await、遵循 CORS 且禁用 document.write;模块按 DOM 顺序执行,路径须为有效 URL,import/export 仅限顶层,动态 import() 返回 Promise。

当 <script type="module"></script> 出现在 HTML 中时,它会以 ES 模块方式加载和执行脚本,行为与普通 <script></script> 有本质区别:默认延迟(defer)、自动启用严格模式、不共享全局作用域、支持顶层 await、必须遵循 CORS 策略等。
模块脚本默认 defer,不阻塞 HTML 解析
带 type="module" 的脚本天然具有 defer 行为:浏览器下载时不阻塞 HTML 解析,且所有模块脚本按出现顺序执行(即使没有显式写 defer 属性)。这与普通脚本的同步加载(<script></script>)或手动 defer(<script defer></script>)逻辑一致,但无需额外声明。
- 多个
<script type="module"></script>按 DOM 顺序执行,彼此等待依赖解析完成 - 即使脚本在
中,也不会阻塞 body 渲染 - 不能通过
document.write()修改文档(模块中该方法被禁用)
模块路径必须是有效 URL,且受 CORS 限制
ES 模块的导入路径(如 import { foo } from './utils.js')必须是相对或绝对 URL,不能是裸导入(如 import 'lodash'),且跨域加载时必须服务端返回 Access-Control-Allow-Origin 响应头。
-
<script type="module" src="https://cdn.example.com/app.js"></script>会触发 CORS 请求 - 同源脚本可直接加载;跨域模块若缺少 CORS 头,控制台报错并中止执行
- Data URL 或 Blob URL 也可作为模块源,但需确保 MIME 类型为
text/javascript
模块作用域隔离,无变量提升,支持顶层 await
每个模块拥有独立作用域,变量不会自动挂载到 window,且 var / function 声明不发生变量提升(仅在模块内按词法顺序求值);同时允许在模块顶层使用 await,使模块加载可等待异步资源。
立即学习“Java免费学习笔记(深入)”;
-
import和export只能在模块顶层,不能在条件语句或函数中 - 模块内自动启用严格模式(无需
"use strict") - 顶层
await会让整个模块变为异步执行单元,其依赖模块也会等待它完成
动态 import() 是表达式,可在任何位置调用
与静态 import 不同,import() 是一个返回 Promise 的函数调用,可用于按需加载、条件加载或错误处理场景,不受模块类型限制(普通脚本也能用)。
-
const mod = await import('./feature.js');返回模块命名空间对象 - 支持字符串模板:
import(`./pages/${page}.js`) - 失败时可捕获异常:
try { ... } catch (e) { ... }


















