navigator.onLine不能判断弱网，必须用fetch探测：超时设1500ms、响应>800ms且连续两次失败才触发降级，通过aria-live安全插入“简化模式已启用”提示，禁用动画并确保文案纯静态。
navigator.onLine 不能用来判断弱网，它只返回 true/false，和真实用户体验完全脱节。 真正要提示“简化模式已启用”，必须用 fetch 主动探测网络质量，再结合 DOM 动态插入提示节点——否则用户在 2G 或高丢包下卡住，页面却显示“在线”，体验直接崩坏。
怎么用 fetch 探测弱网而不是只看 navigator.onLine
靠 navigator.onLine 判断弱网是典型误用。它只反映系统网络接口状态，比如 WiFi 已连但路由器断网、5G 信号强但服务器 RTT 达 2s，navigator.onLine 仍返回 true，但用户早已卡死。
必须用轻量 fetch 探测：
- 探测地址选静态资源，如
/ping?_t=123456789，避免带业务逻辑的 API - 超时设为
1500ms（比常规 5s 更激进，贴近人眼可感知卡顿） - 响应时间 >
800ms 且连续两次失败 → 触发降级逻辑 - 不要在
DOMContentLoaded前发起，否则干扰首屏渲染 - 用
setTimeout节流，例如每30秒最多探测一次，避免耗电和触发 CORS 预检
HTML 中怎么安全插入“简化模式已启用”提示
这个提示绝不能写死在 HTML 源码里，否则 SSR 会把提示一起吐给爬虫，SEO 和语义都污染了。正确做法是只预留一个空容器，JS 按需填充：
立即学习“前端免费学习笔记（深入）”；
<div id="network-status" aria-live="polite" aria-atomic="true"></div>
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
关键点：
- 用
aria-live="polite"让屏幕阅读器读出变化，但不打断当前操作 - 插入文案用
textContent，不是innerHTML，防 XSS（文案固定，不拼接用户输入） - 需要时才
appendChild，不需要就彻底移除节点，别用display: none隐藏后 show - 若项目用微前端或 Shadow DOM，
querySelector('#network-status')可能查不到，得走shadowRoot.querySelector或跨边界通信
为什么弱网提示不能加 CSS 动画
弱网常伴随低端设备或后台标签页被浏览器节流，requestAnimationFrame 调度变慢，CSS 动画帧率掉到 10fps 以下，视觉上就是“卡住”或“跳变”，反而加重用户焦虑。
降级提示本身必须硬切：
- 禁用所有
transition和@keyframes，改用opacity: 1+transform: translateY(0) - 避免对
height做动画（触发布局重排），改用max-height+overflow: hidden - 用
will-change: opacity提前声明，但仅在提示出现瞬间加，消失后立刻removeAttribute('style') - 检查
window.matchMedia('(prefers-reduced-motion: reduce)').matches，若为true直接跳过所有动效
Service Worker 缓存怎么配才不导致弱网失效
弱网下用户更依赖缓存，但 SW 缓存配错会让离线页也白屏。常见翻车点：
-
cacheName必须带版本号，如'v2-static-cache'，每次变更策略就改名，否则旧 SW 读错 cache - 注册 SW 后立即调用
registration.waiting.postMessage('skipWaiting')，否则新 SW 卡在 waiting 状态，弱网时仍用旧逻辑 - 别缓存带查询参数的 URL（如
/api/user?id=123），它们无法命中；API 数据该存IndexedDB - 缓存 HTML 时用
cache.put('/', response.clone())，漏掉.clone()会导致响应体被读空，后续 fetch 拿不到内容
最易被忽略的是：弱网提示文案本身不该包含任何动态拼接、远程加载或第三方字体——它必须是纯 JS 控制的最小闭环，连 fetch 失败都不该影响提示展示。否则，你本想帮用户，结果提示自己成了新的卡点。
