文章目录
- 1. 内联导入（Inline Scripting）
- 2. 外联导入（External Scripting）
- 3. HTML5 中的“高级形态”：模块导入（type="module"）
- 外联模块
- 内联模块（这在 HTML5 中是允许的！）
1. 内联导入（Inline Scripting）
定义：将 JavaScript 代码直接作为
<script>console.log('这是内联代码');var config={api:'/api/user'};</script>HTML5 执行机制：
1、阻塞式解析：浏览器遇到内联脚本时，会立即暂停 HTML 文档的解析，执行完脚本内容后，再继续向下渲染。这意味着如果脚本耗时过长，用户会看到页面“白屏”。
2、作用域：默认运行在全局作用域（window）下，多个内联脚本之间可以互相访问变量（容易造成全局污染）。
核心优劣势：
✅ 零延迟：无需网络请求，即刻执行。
✅ 后端数据注入：非常适合服务端渲染（SSR）时，将后端数据直接塞给前端
（window.INITIAL_STATE= {…}）。
❌ 无法缓存：代码随 HTML 一同下载，每次页面刷新都会重新下载，不会存入浏览器缓存。
❌ 无法复用：代码无法被其他页面共享。
HTML5 中的限制：内联脚本不支持 async 和 defer 属性（浏览器会忽略它们），因为代码就在当前文档流中，没有“异步下载”的概念。
2. 外联导入（External Scripting）
定义：将 JavaScript 代码保存在独立的 .js 文件中，通过 <script> 标签的 src 属性引入外部文件路径。
标准语法：
<!-- 基础外联（默认行为） --><scriptsrc="/js/app.js"></script>HTML5 的执行机制（这里是重点）：
外联脚本默认行为与内联一致（阻塞解析），但 HTML5 提供了两个关键属性来彻底改变加载行为：
<!-- 推荐用于现代业务逻辑：不阻塞渲染，按顺序执行 --><script defersrc="/js/main.js"></script><!-- 推荐用于第三方统计：不阻塞渲染，独立无依赖 --><script asyncsrc="https://www.google-analytics.com/analytics.js"></script>核心优劣势：
0
✅ 可利用浏览器缓存：文件单独存储，二次加载时直接从磁盘读取，速度极快。
✅ 结构与行为分离：符合 Web 标准最佳实践，利于团队协作和维护。
❌ 增加 HTTP 请求（现代 HTTP/2 多路复用下影响不大）。
3. HTML5 中的“高级形态”：模块导入（type=“module”）
在 HTML5 中，还有一种特殊的混合形态，它结合了“内联/外联”与 ES Module 语法。既然你提到“导入”，这点必须单独拎出来讲，以防混淆。
外联模块
<scripttype="module"src="/js/app.js"></script>此写法相当于自动开启了 defer（不阻塞渲染，按顺序执行）。
文件内部支持 import 语法，可以引用其他依赖。
内联模块（这在 HTML5 中是允许的！）
<scripttype="module">// 虽然是内联写法，但这里可以使用import远程拉取依赖！import{cloneDeep}from'https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/lodash.min.js';console.log(cloneDeep({a:1}));</script>注意：内联模块默认开启了严格模式，拥有独立作用域（变量不会挂载到 window 上），且支持顶级 await。
