弱网下HTML页面需从DOM结构、资源加载、CSS策略三层面主动降级：裁剪首屏外节点、fetch加超时与状态感知、内联关键CSS并隔离非关键样式，预留语义化降级锚点。
弱网下 HTML 页面不能靠“等网络变好”来解决渲染问题，必须在结构层就预设降级路径——不是等资源加载失败再 fallback，而是从 DOM 构建、资源加载顺序、样式应用时机三个层面主动收缩能力边界。
DOM 结构优先级裁剪：哪些节点该被跳过或延迟挂载
弱网时浏览器解析 HTML 的速度没变，但 JS 执行和资源加载严重拖慢；此时若 DOM 树里塞满非关键模块（如推荐位、评论区、侧边栏），会加剧布局计算压力，甚至触发强制同步布局（layout thrashing）。
- 首屏外的
<section>、<aside>、<footer>不应写死在初始 HTML 中，改用占位符 + JS 动态插入：例如<div data-lazy="recommend"></div> -
<main>内部只保留真正首屏可见的最小集合（标题、主图、核心按钮），其余内容通过DocumentFragment批量 append，避免逐个appendChild触发多次重排 - 禁用所有
data-*属性驱动的自动初始化逻辑（如data-autoplay、data-init），改由显式状态控制：只有networkStatus === 'good'时才调用initRecommend() - 对嵌套超过三层的容器（如
div > div > div > article）做扁平化处理，用display: contents替代无功能 wrapper（注意 Safari 15.4+ 支持）
fetch 资源加载必须带超时与状态感知，不能依赖 onload/onerror
onload 和 onerror 在弱网下不可靠：资源可能卡在 pending 状态不触发任何回调，或者响应头已返回但 body 拖延数秒才到，导致降级判断严重滞后。
- 所有资源加载必须用
fetch()封装，并设置明确的 timeout（建议 1500ms）：用AbortController主动中断，而非等自然超时 - 不要只看 HTTP 状态码；需结合响应时间判断：连续两次
response.time > 800ms即视为弱网信号，触发简化模式 - 离线包资源加载失败后，回退到在线 URL 前先检查
navigator.onLine—— 若为false，直接跳过 fetch，启用本地 fallback（如缓存的 JSON 或内联默认数据） - 避免在
DOMContentLoaded阶段集中发起多个 fetch；用节流控制（如每 30 秒最多一次探测），防止并发请求压垮弱网连接
CSS 加载策略：内联 ≠ 全量内联，关键帧与媒体查询要隔离
把整个 style.css 内联进 <head> 是常见误区。弱网下大体积 CSS 仍会阻塞渲染，且无法按需卸载；真正的“关键 CSS”仅指首屏元素的 layout + color + font-size 等基础样式。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 用工具（如
critters）提取 LCP 元素所需 CSS，内联进<style>；其余 CSS 用<link rel="preload" as="style">提前拉取，再动态插入<link> - 禁用所有
@keyframes和transition相关规则在弱网模式下的生效：可通过 class 切换（如body.network-weak）配合prefers-reduced-motion: reduce双重控制 - 将暗色模式、打印样式、高对比度适配等非关键 CSS 用
media属性隔离：<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">，避免无条件下载 - 慎用
@import：它会串行阻塞，等价于把多个 CSS 请求压成一个长队列；所有样式引用必须走<link>
HTML 源码中必须预留语义化降级锚点，而非 JS 临时创建
“简化模式已启用”这类提示不能靠 JS 创建新 DOM 节点再插入——服务端渲染（SSR）或爬虫会看到空容器，而用户首次进入时又因 JS 加载慢看不到提示，造成体验断层。
- 在 HTML 源码中固定预留容器：
<div id="network-status" aria-live="polite" aria-atomic="true"></div>，不设class或style，保持纯净 - JS 仅负责向该容器写入
textContent（如"简化模式已启用"），绝不拼接 HTML 字符串，防 XSS - 该容器不参与 SEO 权重分发，也不影响阅读模式识别；它的唯一作用是给屏幕阅读器提供可感知的状态变更
- 若项目使用微前端，确保主应用能跨
shadowRoot访问该节点（用getRootNode().querySelector('#network-status')而非直接document.querySelector）
最易被忽略的是：降级不是“功能开关”，而是结构收缩。你删掉的每个 <div>、延迟的每次 fetch、隔离的每条 @media 规则，都在降低弱网下浏览器的调度负担——这比优化单个函数执行快 10ms 更有效。
