html模板本身不支持按需加载，因其仅为静态结构；所谓按需加载实为控制脚本、图片等资源的下载与执行时机，loading="lazy"仅对初始html中非首屏的img/iframe生效，对fetch注入或v-html渲染的动态内容无效，须改用intersectionobserver或import()组件化方案。
HTML 模板本身不支持“按需加载”这个动作——它只是静态结构，没有执行能力。所谓按需加载，实际是控制模板中引用的资源（脚本、样式、图片、组件片段）何时下载、何时执行、是否参与首屏渲染。
为什么直接写 loading="lazy" 对 HTML 模板无效
浏览器只对初始 HTML 中已存在的 <img> 或 <iframe></iframe> 应用 loading="lazy"；而整个 HTML 模板（比如通过 fetch 加载的片段、<script type="text/x-template"></script> 缓存的内容、或 Vue/React 动态挂载的组件）都不属于“初始 HTML”。这些内容被插入 DOM 后，其中的 <img> 才算“动态渲染”，loading="lazy" 会静默失效。
- 常见错误：在
v-html渲染的 HTML 字符串里写<img src="x.jpg" loading="lazy">—— 浏览器根本不会触发懒加载 - 真正生效的前提：标签必须在 HTML 文档首次解析时就存在，且不在首屏视口内
- 替代方案：对动态插入的图片，必须用
IntersectionObserver手动监听并赋值src或data-src
用 import() 加载组件模板比拼接 HTML 字符串更安全
直接 fetch + innerHTML 注入 HTML 片段，看似简单，但脚本不执行、样式无隔离、XSS 风险高；而 import() 加载的是封装好的组件（如 .vue 或 .tsx），构建工具会自动拆包、处理依赖、注入样式作用域，并支持 try/catch 错误兜底。
-
import()路径必须是静态字符串，不能是变量拼接，否则 Webpack/Vite 无法分析依赖生成 chunk - Vue 中：
const AsyncModal = () => import('./Privacy.vue')，配合<component :is="AsyncModal"></component> - React 中：
const Chart = React.lazy(() => import('./BarChart'))，必须包裹在<suspense></suspense>内 - 失败时若不
catch，Promise reject 会导致白屏或未捕获异常
<script type="text/x-template"></script> 是零构建依赖的按需加载方案
这种写法让浏览器完全忽略标签内容，既不解析 HTML，也不请求其中的 <img src> 或 CSS background 图片，直到你主动取出来用。适合老项目、微前端子页面、或需要预缓存弹窗/协议页等静态片段的场景。
- 写法：
<script type="text/x-template" id="terms"><div><img src="/logo.png"></script> - 触发时：
el.innerHTML = document.getElementById('terms').textContent（注意用textContent，避免执行潜在脚本） - 缺点：无法自动执行内联 JS，也无法复用现代构建工具的 tree-shaking 和热更新能力
- 优势：不依赖打包器，不引入额外运行时，兼容 IE11
preload 和 lazy 不是互斥关系，但配错会拖慢首屏
<link rel="preload"> 是告诉浏览器“这个资源马上就要用”，而 loading="lazy" 是说“这个资源暂时不用”。两者语义相反，混用等于指令冲突。
- 首屏关键图（banner、logo）必须删掉
loading="lazy"，并加<link rel="preload" as="image" href="hero.webp"> - 非首屏图绝不能
preload，否则抢带宽，挤掉 HTML 或关键 CSS 的传输机会 -
as属性必须准确：字体要写as="font"并带crossorigin；CSS 要写as="style"才能被后续<link rel="stylesheet">复用 - 验证是否生效：打开 Chrome DevTools → Network 面板，筛选
Preload请求，看状态是否为200且优先级为Highest
真正容易被忽略的点是：HTML 模板优化不是堆砌技巧，而是明确每一份资源的“生命周期”——它该不该出现在初始 HTML？该不该立刻下载？该不该立即执行？该不该参与首屏渲染？漏掉任何一个判断，都可能让优化变成负优化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
