html模板不支持组件懒渲染，loading="lazy"仅对和生效；实现组件级懒加载必须依赖框架（如react.lazy、vue suspense）或手动intersectionobserver。
HTML模板本身不支持“组件懒渲染”——loading="lazy"只对 <img> 和 <iframe></iframe> 生效，对自定义组件、<div> 块、Vue/React 组件或 Web Component 完全无效。想靠加个属性就让组件延迟挂载，行不通。
<h3>为什么 loading="lazy" 对组件不起作用</h3>
<p>浏览器的原生懒加载机制基于 Intersection Observer，但仅绑定到两类标签：<code><img> 和 <iframe></iframe>。它不解析、不监听、不干预任何其他 HTML 元素的渲染生命周期。
-
loading="lazy"写在<div class="card"> 或 <code><my-product-card></my-product-card>上 —— 浏览器直接忽略，无警告、无日志、无降级行为 - 框架（如 Vue 的
<suspense></suspense>、React 的lazy()）实现的是 JS 层的挂载控制，和 HTML 属性无关；它们依赖动态 import + 状态管理，不是浏览器原生能力 - 服务端渲染（SSR）中若模板输出了带
loading="lazy"的非 img/iframe 标签，客户端 hydration 时仍不会触发任何延迟逻辑 - 非首屏
<img src="list-item-1.jpg">必须加loading="lazy"，且配width/height或 CSS 尺寸，否则可能触发布局抖动（CLS） -
<iframe src="embed-video.html"></iframe>加loading="lazy"可推迟 iframe 文档解析与脚本执行，但仅 Chrome 92+ / Safari 15.4+ 支持 - 不要试图给
<picture></picture>或<source></source>加该属性 —— 它只认最内层<img>，写在<source></source>上等于没写 - CMS 或富文本编辑器常过滤掉
loading属性，需检查最终输出的 HTML 源码是否真实存在该字段 - React：用
React.lazy()+Suspense，但要求被懒加载模块是 ES module，且不能 SSR 直出（需配合loadable-components或 Next.js 的dynamic()） - Vue：
<suspense></suspense>包裹异步组件，组件内部必须返回defineAsyncComponent()，否则不生效 - 纯 HTML 场景：只能手写
IntersectionObserver监听容器元素，再通过innerHTML或customElements.define()动态插入，但要注意重复触发、缓存状态、SEO 可见性等问题 - 关键点：所有 JS 懒渲染方案都依赖 DOM 已就绪，
DOMContentLoaded后注册 observer 才安全；过早执行可能漏掉已进入视口的元素
HTML 模板里真正能做的“懒”只有图片和 iframe
如果你的目标是减少首屏 HTML 体积、加快解析和渲染，唯一可借力的原生机制就是 loading="lazy" 配合正确结构的 <img> 和 <iframe></iframe>。
想实现组件级懒渲染？必须用 JS 方案
HTML 模板做不到的事，得交给运行时逻辑：框架的懒加载能力或手动 IntersectionObserver。
真正容易被忽略的点是：很多人把「HTML 模板优化」和「前端框架懒加载」混为一谈。前者只管静态标签的加载时机，后者管的是 JS 执行与组件挂载。两者不在同一层，也不能互相替代。你写的 loading="lazy" 不会触发 Vue 组件的 setup()，也不会让 React 组件跳过 useEffect —— 它只管那个 <img> 标签要不要现在发请求。
