弱网下关键路径资源需在HTML构建阶段预埋双通道能力：关键CSS必须内联且带匹配CSP的nonce，禁用@import；JS须用defer并结合networkStatus与超时判断；离线包校验须原子化且早期执行，DOM结构需分层设计。
弱网下关键路径资源不能只靠“加载失败再 fallback”，必须在 HTML 构建阶段就预埋双通道能力——CSS 和 JS 的加载决策点，得在 parser 还没跑完时就定下来。
关键 CSS 必须内联且带 nonce，否则降级会失效
内联
- 内联内容必须控制在
14KB以内（gzip 后约4–8KB），超限会跨 TCP 包，TTFB 反而变长 - 如果启用了 CSP，
<style nonce="abc123">中的nonce值必须和响应头Content-Security-Policy中的一致，否则样式被丢弃 - 绝对禁用
@import—— 它会让内联 - 工具如
critters或Penthouse可自动提取 critical CSS，但要验证输出是否真覆盖首屏 DOM 节点（比如.hero、.header、button）
JS 加载必须用 defer + 显式状态判断，不能依赖 onload
onload 在弱网下不可靠：资源可能卡在 pending 状态，或响应头已到但 body 拖延数秒，导致 JS 初始化永远等不到回调。真正可用的判断依据是网络状态信号 + 执行超时。
- 主业务 JS 一律用
defer，确保 DOM 解析完才执行；但执行前必须检查navigator.onLine和自定义networkStatus（比如连续两次 fetch 耗时 >800ms） - 第三方脚本（统计、广告）用
async，并包裹在try/catch中，失败后不重试、不抛错、不阻塞后续逻辑 - 禁止在
DOMContentLoaded回调里直接操作 DOM 节点——此时 CSSOM 可能未就绪，容易触发 layout thrashing - 所有动态加载逻辑（如推荐模块）必须加
AbortController，超时设为1500ms，避免卡住主线程
离线包与在线资源的双通道加载必须原子化校验
离线包不是“有就行”，而是要确认它能被正确解包、关键文件存在、哈希匹配、且版本与当前 HTML 兼容。任意一环出错，就得无缝切到在线资源——这个切换不能有视觉闪动或功能断层。
立即学习“前端免费学习笔记（深入）”；
- 校验必须在 JS 执行早期完成，不能等 DOM 渲染完再做；建议放在
<script>标签内第一行 - 离线包路径应通过环境变量注入（如
window.__OFFLINE_PATH__ = "/offline/v2/"），避免硬编码导致更新不同步 - 校验失败后，加载在线资源时需同步触发缓存写入（
cacheresource(offlinePath, blob)），但要加锁防止并发写冲突 - Service Worker 不是必选项，但若启用，其
fetch事件中必须区分destination === 'script'或'style'，对关键资源走 cache-first，非关键走 network-first
最易被忽略的是：弱网降级不是“功能开关”，而是渲染树生成路径的重新编排。DOM 结构本身就要分层——首屏节点必须静态存在，其余全部用 data-lazy 占位；否则就算 CSS/JS 都 fallback 成功，浏览器仍要花时间解析一堆根本不会显示的 <section> 和 <aside>。
