断网时页面必须立刻显示静态内容，所有首屏文本须硬编码在HTML的内，关键样式内联且≤14KB（gzip），DOM扁平化，辅以aria-live播报离线状态。
断网时页面必须立刻显示静态内容，所有首屏文本须写死在初始 HTML 的 <main></main> 内，不能依赖 JS 注入或模板占位；关键样式内联且精简（≤14KB gzip），DOM 结构扁平，确保流式解析不中断。
首屏内容必须硬编码进 HTML
浏览器在弱网或离线状态下，DOMContentLoaded 可能延迟数秒触发，但用户需要的是“打开就有字”。因此：
-
标题、主提示语、操作按钮文案必须直接写在
<main></main>开头，例如：<main><h1>服务暂时不可用</h1> <p>请检查网络连接后重试</p> <button>刷新页面</button></main> - 禁用
<template></template>、data-content占位、JS 动态插入 innerHTML —— 这些在 JS 未执行前就是空白 -
<noscript></noscript>不是降级容器，它只在 JS 被彻底禁用时生效，不能当作离线 fallback 使用
关键样式必须内联且极简
CSS 加载阻塞会导致文字长时间不渲染，尤其在 3G 等弱网下。解决方案是切分并内联真正影响首屏可读性的最小样式集：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
- 只保留
body字体、h1/p行高/颜色/边距、按钮基础样式等直接影响文本排版的规则 - 内联
<style></style>标签，体积控制在 ≤14KB（gzip 后约 4–8KB） - 禁用
@import、复杂媒体查询（如@media (prefers-reduced-motion)）、动画关键帧 —— 它们会拖慢首屏绘制 - 字体统一用
font-display: swap，避免文本长时间不可见
结构要扁平，语义要清晰
嵌套过深会增加解析开销，低端设备上可能延迟首屏文字出现达 200ms+：
-
<main></main>内只保留 LCP 元素所需最小 DOM：标题、主图（带loading="eager"）、核心按钮 - 非首屏模块（如评论区、侧边栏）用空占位符替代，例如：
<div data-lazy="comments"></div> - 避免深度 >3 的嵌套容器；可用
display: contents扁平化（注意 Safari 15.4+ 支持） - 删除所有无 class/id 的冗余 wrapper 和空
<div></div>，它们仍参与 DOM 构建
对辅助技术友好，主动播报离线状态
仅靠视觉提示不够，屏幕阅读器用户需被明确告知当前异常状态：
- 在文档顶部插入隐藏但可朗读的提示：
<div aria-live="assertive" aria-atomic="true" class="sr-only">网络已断开，部分功能暂时不可用</div> - 配合
.sr-only样式（绝对定位 + 剪裁），既隐藏视觉又保留辅助技术可访问性 - 禁用
display: none或visibility: hidden—— 它们会让aria-live失效 - 离线恢复后需手动清空并重发新消息，防止旧提示残留
