标签不支持真正按需加载，其内容随主文档一并下载解析，仅惰性不渲染；所谓“按需”实为js控制克隆插入时机，需结合intersectionobserver、用户操作或异步数据获取实现。
<template></template> 标签本身不支持按需加载——它只定义静态片段，内容在 HTML 解析阶段就已载入 DOM，根本不存在“加载时机”可调控。所谓“按需”，实际是 JS 控制克隆与插入的时机，而非资源延迟加载。
为什么<template></template>不能真正按需加载资源
浏览器解析到 <template></template> 时，会跳过其内容的渲染、脚本执行和资源加载（如 <img src="..."> 不发起请求），但整个模板 HTML 字符串仍随主文档一并下载、解析、构建为 DOM 节点。它只是“惰性”，不是“懒加载”。
- 模板内含的
<img>、<iframe></iframe>、<script></script>在未克隆前完全静默，但 HTML 文本已存在内存中 - 无法用
loading="lazy"或fetchpriority等属性控制模板本身的加载优先级 - 若模板体积大（比如含 SVG 图标集或长列表结构），会增加初始 HTML 大小，拖慢首字节（TTFB）和解析时间
如何模拟“按需加载”效果
真正可控的“按需”，发生在 JS 实例化阶段：你决定什么时候克隆、填充、插入。关键不在模板本身，而在触发逻辑的设计。
- 监听滚动：用
IntersectionObserver检测容器进入视口后再克隆模板，避免首屏外内容提前占用内存 - 响应用户操作：仅在点击按钮、展开折叠面板、切换 Tab 后才调用
document.importNode(template.content, true) - 配合
async数据获取：先发 API 请求，待fetch().then()返回数据后，再克隆 + 填充 + 插入，确保 DOM 更新与数据就绪同步 - 对多实例场景做批量处理：不要每次循环都单独克隆，改用
DocumentFragment批量拼接后一次性appendChild，减少重排
template.content.cloneNode(true) 和 document.importNode() 的区别与选型
两者都能深克隆模板内容，但行为细节影响稳定性：
-
template.content.cloneNode(true)：直接克隆DocumentFragment，快，但若模板内含<slot></slot>或需跨 Shadow DOM 使用，可能丢失上下文 -
document.importNode(template.content, true)：语义更明确，显式表示“导入到当前文档”，兼容性更好，尤其在 Web Components 场景下推荐 - 注意：
cloneNode(true)对含id的元素会复制出重复 ID，后续getElementById行为不可靠；务必在克隆后手动重置id或改用data-id
模板过大时的实际瓶颈与绕过方案
当一个 <template></template> 包含数百行 HTML（例如完整仪表盘卡片、富文本编辑器工具栏），它会显著拖慢 HTML 解析速度，并让 DevTools 的 Elements 面板变卡——这不是运行时性能问题，而是构建时负担。
- 拆分策略：把大模板按功能切为多个小
<template id="header"></template>、<template id="sidebar"></template>，按需取用 - 服务端动态注入：用构建工具（如 html-webpack-plugin + html-webpack-template）在打包时按路由/模块条件注入对应模板，HTML 文件本身不包含未使用模板
- 极端情况弃用：若模板需频繁更新、结构复杂且含大量交互逻辑，直接改用
custom element+shadowRoot.innerHTML或轻量框架（如 Lit）更可控
真正容易被忽略的是：模板的“按需”错觉常让人忽视 HTML 体积膨胀问题。一个 50KB 的 <template></template> 块，不会提升首屏速度，只会让所有用户多下载一次——它不是资源，是代码，得像对待 JS 模块一样做拆分和条件加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
