html模板本身不执行按需加载逻辑，所有资源加载、脚本执行、懒加载控制均由js侧决定；真正实现按需加载的是import()动态导入与框架异步组件机制。
HTML模板本身不执行任何按需加载逻辑
HTML 模板（如 <script type="text/x-template"></script> 或 <template></template>）只是浏览器忽略解析的容器，它不触发网络请求、不执行脚本、不加载图片——直到你用 JS 主动取出内容并注入 DOM。这意味着“按需”与否，完全取决于 JS 侧怎么调用，而不是模板写了什么。
常见误区是以为把 <img src="logo.jpg"> 塞进 <template></template> 就自动懒加载了；实际上，只要没被插入到 document 中，它连解析都不会发生；一旦你执行 el.innerHTML = template.innerHTML，所有 src 会立刻开始加载（除非你提前替换成 data-src）。
-
<template></template>和<script type="text/x-template"></script>都不会触发任何资源加载，连 DNS 预解析都不会 - 模板内写
loading="lazy"完全无效——属性只在元素挂载后由浏览器解析 - 若模板含内联
<script></script>，注入后也不会自动执行；必须手动提取并eval()或createElement('script')（仅限可信源） - Vite/Webpack 等构建工具对
<template></template>内容不做预处理，它就是纯字符串，无法参与代码分割
组件级按需加载靠 import()，不是 HTML 模板
真正实现“组件按需加载”的，是 JS 层的 import() 动态导入，配合框架（Vue/React）或构建工具做 chunk 拆分。HTML 模板在这里只起占位或结构描述作用，比如 Vue 的 <template></template> 标签用于定义组件视图，但它本身不决定何时加载——defineAsyncComponent 或 React.lazy 才是开关。
- 写
component: () => import('./Modal.vue')是让构建工具生成独立 JS chunk，并在路由跳转时才 fetch 执行 - 直接在 HTML 里写
<div id="modal-root"></div>，再用 JSimport()加载组件并挂载，才是可行路径 - 如果硬要在纯 HTML 中模拟，得自己写 fetch + DOMParser + 脚本执行逻辑，但 XSS 风险高、样式无隔离、事件需重绑
- Vue 3 推荐用
defineAsyncComponent包一层，否则 SSR 场景下可能提前执行import()，失去懒加载意义
懒执行的关键在于延迟触发，而非延迟渲染
“懒执行”指逻辑（校验、API 调用、图表渲染）不在页面加载时跑，而是在用户交互（点击、输入、滚动）后才运行。HTML 模板对此毫无控制力；它只能提供静态结构，JS 才决定哪段逻辑绑定在哪件事上。
- 表单提交前不拉取配置接口，而是把
fetch('/api/config')放进onSubmit处理函数里 - 长列表中折叠面板的内容区块，用
IntersectionObserver监听进入视口后再import()对应模块 - 按钮点击后才初始化地图 SDK，而不是在
useEffect(() => { loadMapSDK() }, [])里提前加载 - 防抖
submit按钮必须配useState控制禁用状态，否则多次点击会并发触发多份异步逻辑
容易被忽略的边界：模板注入后的脚本与样式处理
从模板取出 HTML 字符串并 innerHTML 注入后，最常被忽略的是后续处理：脚本不执行、样式未隔离、事件未绑定、图片加载失控。这不是“功能没做”，而是“做了但没做完”。
- 注入后若有
<img>，必须手动遍历并赋值src，否则永远不加载 - 含
<script>console.log('hi')</script>的模板，注入后不会打印；需用DOMParser解析，再对每个script标签创建新节点并 append 到 body - 内联样式（
style="color:red"）会生效，但<style></style>标签不会自动注入 document.head，得手动提取并追加 - 如果模板来自服务端，返回内容必须不含
/外壳，否则innerHTML会破坏现有 DOM 结构
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
