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