HTML无法真正懒加载结构，必须用JS动态注入HTML片段并配合IntersectionObserver等实现；仅img和iframe支持loading="lazy"，首屏文本须直接写在body靠前位置且带内联样式。
HTML 文档结构本身无法“懒加载”——你不能让 <body> 的某一段 HTML 延迟到滚动后才解析，浏览器必须顺序流式解析整个 HTML 字符串。所谓“结构懒加载”，本质是用 JS 动态注入 HTML 片段，并配合资源加载策略控制呈现节奏。
loading="lazy" 只对 img 和 iframe 有效，别往 div 上加
写成 <div loading="lazy">...</div> 完全无效，浏览器直接忽略该属性。这个限制不是 bug，而是规范明确限定的适用范围。常见错误是把卡片列表容器套一层 <div class="card-list">，然后给它加 loading="lazy"，指望整个区块延迟渲染——结果什么也没延迟，还白添一个误导性属性。
- 仅
<img>和<iframe>支持loading="lazy"，且必须带src（<picture>中的<source>不认） - 若想延迟加载自定义区块（如广告位、评论区），必须用
IntersectionObserver监听其进入视口，再fetch()拉取 HTML 字符串并element.innerHTML = htmlString - 动态注入的 HTML 片段里含
<script>标签不会自动执行，需手动提取、创建并appendChild到 DOM
首屏文本必须写死在 HTML 开头，禁用任何包裹或延迟逻辑
弱网下用户最需要的是“先看到字”，而不是等 JS 执行完再 append。如果 <h1> 被包在 <div id="app"> 里，而 id="app" 又靠后出现，那浏览器就得先解析完前面几百行无关代码，才能开始构建这个标题的 DOM 节点——首屏文本渲染被人为拖慢。
-
<h1>、<p>、<button>等首屏文本级元素，应直接出现在<body>靠前位置，不嵌套无语义容器 - 禁用
<template>或<slot>承载首屏内容，Safari 15.4 以下版本会直接丢弃其中内容 - 所有首屏文本元素必须带内联
font-size、line-height、color，否则无 CSS 时显示为不可读的默认样式
fetchpriority="high" 必须搭配 loading="eager" 才真正生效
单独设 fetchpriority="high" 很可能被浏览器忽略——它只是“建议优先级”，没有加载策略配合，调度器不知道你到底想“马上加载”还是“高优排队”。比如首屏 hero 图，如果只写 <img src="hero.jpg" fetchpriority="high">，在资源争抢时仍可能被 preload 的字体挤掉。
立即学习“前端免费学习笔记（深入）”；
- 关键资源（首屏图、核心字体）必须同时声明
fetchpriority="high"和loading="eager" - 字体文件务必加
crossorigin，否则因 CORS 失败导致 fallback 字体撑开布局，触发 CLS - 非可视资源（埋点脚本、广告 SDK）统一设
fetchpriority="low"，避免抢夺文本通道带宽
动态注入 HTML 片段时，服务端返回内容必须无外壳
如果后端返回的是完整 HTML 文档（含 <html><head><body>），直接赋值给 innerHTML 会导致浏览器尝试修复 malformed DOM，引发不可控重排甚至脚本执行异常。
- 服务端应只返回纯片段，例如
<div class="comment-list"><p>…</p></div>，不含任何顶层标签 - 注入后若需执行其中脚本，必须用
DOMParser解析字符串，遍历<script>标签，创建新<script>元素并设置textContent后插入 DOM - 所有图片使用
data-src而非src，注入后由 JS 统一按需赋值，避免批量触发 HTTP 请求
真正卡住“结构懒加载”的从来不是技术实现，而是对 HTML 解析模型的误判：以为可以像 React.lazy 那样切分组件，实则浏览器必须线性吞吐整个 HTML 流。所有“延迟”动作，都发生在解析完成之后，靠 JS 接手——这点一旦想错，方案就全偏了。
