低带宽下渐进式渲染需结构化裁剪dom、分阶段加载资源、设置语义化锚点，确保domcontentloaded不作为首屏可用依赖；弱网时仅保留lcp元素最小dom，非首屏内容占位延迟挂载，fetch须配abortcontroller与超时机制，关键css内联而动画/媒体查询剥离延迟加载。
低带宽下渐进式渲染不是“等资源慢慢来”，而是用结构化裁剪 + 分阶段加载 + 语义化锚点，把页面拆成可中断、可降级、可感知的执行单元。核心判断只有一条：DOMContentLoaded 不能成为首屏可用的依赖节点。
DOM 结构必须按网络状态动态裁剪
弱网时浏览器解析 HTML 很快，但 JS 执行和资源加载严重滞后；若初始 HTML 包含大量非首屏节点（如 <aside></aside>、<footer></footer>、嵌套 <div> 块），会加剧 layout thrashing，甚至阻塞主线程。
<ul>
<li>
<code><main></main> 内只保留 LCP 元素所需最小 DOM：标题、主图 <img>（带 loading="eager"）、核心操作按钮
<div data-lazy="comments"></div>，不挂载真实内容data-autoplay、data-init 类自动触发逻辑；改由显式状态控制，仅当 networkStatus === 'good' 时调用 initComments()
div > div > div > article）用 display: contents 扁平化，避免无意义 wrapper 触发额外 layoutfetch 必须带 AbortController 和响应时间感知
onload/onerror 在弱网下完全不可靠：请求可能卡在 pending 状态不回调，或响应头已返回但 body 拖延数秒才到，导致降级严重滞后。
- 所有资源加载必须封装为
fetch()+AbortController，超时设为1500ms，主动中断而非等待自然超时 - 不只看 HTTP 状态码；连续两次
response.time > 800ms即标记为弱网，触发简化模式（如跳过推荐模块、关闭动画） - 离线包加载失败后，回退前先检查
navigator.onLine；若为false，直接启用内联 fallback 数据（如预置 JSON 或空数组） - 避免在
DOMContentLoaded阶段集中发起多个fetch；用节流控制（如每 30 秒最多一次探测）防并发压垮连接
CSS 加载要隔离关键帧与媒体查询
把整个 style.css 内联进 是典型误区——弱网下大体积 CSS 仍阻塞渲染，且无法卸载；真正的“关键 CSS”仅指 LCP 元素所需的 layout、color、font-size 等基础样式。
- 用
critters或类似工具提取 LCP 元素所需 CSS，内联进<style></style>；其余 CSS 用<link rel="preload" as="style">预加载 - 所有动画关键帧（
@keyframes）和复杂媒体查询（如@media (prefers-reduced-motion)）必须从关键 CSS 中剥离，延迟加载或条件注入 - 非关键 CSS 加载完成后，用
sheet.replaceSync()替换，避免 FOUC；同时监听sheet.cssRules.length判断是否就绪 - 慎用
@import：它会阻塞后续 CSS 解析，弱网下极易造成渲染树构建中断
真正难的不是写多少代码，而是把“哪些东西能不要”想清楚——比如一个 data-lazy 占位符背后，得同步删掉对应 JS 初始化、CSS 样式声明、以及服务端模板里的冗余分支。降级不是补丁，是设计之初就画好的边界线。
