离线页面需内联关键css和base64图片以确保首屏正常渲染。须用critters等工具精准提取移动端首屏样式，控制体积≤1kb，紧贴meta后放置；首屏图片转base64内嵌，禁用url()和@import；html须自包含，禁外部依赖，offline模式下验证首屏完整呈现。
离线页面要能脱离网络正常渲染，关键不是“把所有 CSS 和图片塞进去”，而是让浏览器在无网络时，也能立刻构建出可读的首屏结构。核心动作就两件：内联真正影响首屏的关键 CSS、把首屏必需的图片转为 base64 内嵌。位置、体积、内容范围，一个错，白屏或错位就跟着来。
关键 CSS 必须精准提取并严格放对位置
不能直接复制整个 style.css 进
- 内联
- 体积控制在 ≤1KB（弱网下 TCP 包更可靠），超大会拉长 TTFB，反而增加白屏时间
- 禁用 @import 和所有 url() 声明——背景图、图标字体都得删掉或替换成 base64 / 系统字体
- 暗色模式站点需显式保留 @media (prefers-color-scheme: dark) 下对应的关键规则，否则首屏闪白
首屏图片必须转为 data URL 内嵌
离线环境下，
会失败，浏览器无法发起请求。解决方案是把首屏必现的图片（如 logo、hero 图、按钮图标）全部转成 base64 编码，写进 src 属性：
- 使用在线工具或脚本（如 image-to-base64 CLI）批量转换，注意压缩原图再编码，避免单张超 50KB
- 只处理首屏可见区域内的图片；滚动后才出现的图可保留 src，靠 fallback 逻辑或骨架屏过渡
- 不要在内联 CSS 里用 background: url(...) —— 同样会触发请求，应改用 inline background-image: url(data:image/png;base64,...)
或 srcset 场景下，仅内嵌最常用尺寸（如 1x 普通屏），高倍屏资源可降级为纯色占位
HTML 文件自身要自包含、免外部依赖
一个离线 HTML 文件，必须能双击打开即用，不依赖任何外部路径或服务器响应：
- 所有 JS 初始化逻辑（如设置主题、注入数据）若极简且无副作用，可内联在 <script> 中，但禁止含 fetch、async/await、import 或 document.querySelector（除非等 DOM 就绪）</script>
- 删除所有未使用的 、<script src>、<iframe>，确保 Network 面板勾选 Offline 后刷新，无红色 404 请求</script>
- 验证方式简单直接：Chrome DevTools → Application → Clear storage → 勾选 Offline → 刷新页面，看首屏文字、布局、颜色、按钮是否完整呈现
- 若用 Service Worker，注意它安装前页面无法拦截请求；离线 fallback 应优先靠 HTML 自身内联能力兜底，而非依赖 SW 缓存
不复杂但容易忽略：内联不是打包，而是筛选 + 定位 + 降级。关键 CSS 不是“越多越好”，图片不是“全转才安全”，真正起效的是那几十行样式和两三张 base64 图片，在网络断开的瞬间，稳稳撑起用户看到的第一眼。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
