怎么通过HTML模块化标签导入脚本减少性能负担-html教程-PHP中文网

使用可实现按需加载与模块化，但需注意路径必须带扩展名、避免滥用 async、HTTP/2 支持必要性及低版本浏览器兼容问题。

怎么通过html模块化标签导入脚本减少性能负担

用 `<script type="module"></script>` 替代传统 `<script></script>` 能自动实现按需加载

浏览器对 <script type="module"></script> 的处理是异步且 defer 的——它不会阻塞 HTML 解析，也不依赖执行顺序，天然适合模块化组织。更重要的是，模块脚本默认启用 ES 模块作用域，支持 import 语法做静态分析，让构建工具或浏览器能识别真正用到的代码路径。

常见错误现象：直接把旧版 <script src="utils.js"></script> 改成 <script type="module" src="utils.js"></script> 后发现报错 Failed to resolve module specifier ——这是因为模块内 import 的路径必须带扩展名（如 .js）且不能省略协议或斜杠前缀。

相对路径必须写全：import { helper } from './lib/helper.js'（.js 不可省）
不能写：import { helper } from './lib/helper' 或 import { helper } from 'helper'
顶层 await 在模块中合法，可用于动态条件加载，但不建议在首屏关键路径滥用

`import()` 动态导入比静态 `import` 更适合延迟加载非首屏逻辑

静态 import 在解析阶段就发起所有依赖请求，哪怕某些模块只在用户点击后才用。而 import() 是 Promise-based 的运行时调用，配合事件监听可精准控制资源拉取时机。

使用场景举例：轮播图组件、表单校验规则、暗色模式切换器——这些功能不需要页面一打开就加载 JS。

错误写法：import { initCarousel } from './carousel.js'; initCarousel();（立即执行，白屏期多载入 80KB）
正确做法：button.addEventListener('click', () => import('./carousel.js').then(m => m.initCarousel()));
注意：import() 返回 Promise，不能用在 if 外部作条件判断；也不能在模块顶层 await（除非用顶层 await，但兼容性需查）

HTML 中直接用 `<script type="module"></script>` + `async` 会破坏模块执行顺序

给模块脚本加 async 属性看似能“更快加载”，实则会让多个模块失去执行顺序保证。ES 模块规范要求同域下模块按 import 图谱拓扑排序执行，而 async 会把它降级为无序并发加载，可能引发 ReferenceError。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

性能影响：虽然网络请求可能早几毫秒完成，但 JS 引擎要反复解析、编译、丢弃、重试，实际首屏可交互时间（TTI）反而更长。