渐进式渲染依赖HTML结构顺序与语义层级，核心是body内容按用户感知优先级自上而下展开；main须紧随header之后、footer之前，避免CSS order或绝对定位破坏文档流；脚本需defer且不查询未解析元素；首屏图片禁用lazy，装饰图改用background-image。
渐进式渲染不是靠加 JS 或开 defer 就能“自动生效”的，它依赖 HTML 标签本身的结构顺序、语义层级和加载时机的显式表达。核心判断只有一条：body 中的内容是否按用户可感知的优先级从上到下自然展开。
为什么 main 必须出现在 header 之后、footer 之前
浏览器解析 HTML 是流式、自上而下的。如果把 main 放在 footer 下面，或用 CSS order/绝对定位强行“视觉前置”，会导致：首屏内容实际 DOM 位置靠后，影响可访问性（屏幕阅读器顺序错乱）、SEO 抓取权重偏移、以及关键内容延迟进入渲染队列。
-
main应紧接在header和nav之后，且必须是文档流中第一个语义化主体容器 - 避免用
display: flex+order打乱原始 HTML 顺序——视觉调整不等于结构优化 - 若需侧边栏（如
aside），应与main同级并置于其后，而非包裹在main内部
script 标签放在 body 底部 ≠ 渐进式渲染就安全了
即使脚本已移至 body 末尾，若它同步执行大量 DOM 操作（比如遍历所有 .card 并添加 class），仍会阻塞后续渲染。更隐蔽的问题是：脚本依赖的 HTML 元素是否已在解析流中就位？
- 使用
defer属性（而非async）确保脚本在 DOM 解析完成后、DOMContentLoaded 前执行 - 避免在脚本中查询尚未出现的元素，例如不要在
body开头的内联脚本里查document.querySelector('main')—— 此时main还没被解析到 - 对非关键交互逻辑（如统计埋点、非首屏动画），用
setTimeout或requestIdleCallback推迟到空闲时段执行
图片 loading="lazy" 不是万能解药
懒加载只解决资源下载时机问题，但无法改善 HTML 结构本身导致的渲染阻塞。如果首屏关键图（如 banner 主图）被错误标记为 loading="lazy"，用户会看到空白区块，这不是“渐进”，而是“缺失”。
立即学习“前端免费学习笔记（深入）”；
- 首屏内图片必须去掉
loading="lazy"，并确保src存在（不要用data-src+ JS 切换） - 对
img使用decoding="async"可减少解码阻塞，尤其适用于大图 - 装饰性图片（如背景图、分隔线）应改用
background-image，完全脱离 HTML 渲染流
真正卡住渐进式渲染的，往往不是某一行 JS，而是 HTML 标签嵌套过深、语义错位、或关键节点被隐藏在条件渲染逻辑之后。检查时盯住 body 的前 20 行——它们决定了用户第一眼看到什么、多久看到、以及能否跳过样式直接理解内容。
