网络与存储知识手札

本手札把网络请求、流式响应、实时连接、持久化和离线恢复放在同一条资源生命周期中学习。 每篇都要求先运行最小例子，再改变输入、时序、宿主或失败条件。

阅读起点

前置：HTML、CSS、JavaScript 函数/模块/Promise 和浏览器 DevTools。第一次学习按下面章节顺序阅读；已有框架经验也应回到对应平台实验核对行为。

全书顺序

第1章：HTTP、Fetch 与响应契约。 本章从“Headers、Content-Type 与缓存”开始，经过可观察实验和失败变体，建立到“JSON 解析与错误契约”的连续因果链。

1. Headers、Content-Type 与缓存
2. HTTP、Fetch 与响应契约
3. 方法、幂等与状态码
4. JSON 解析与错误契约

第2章：取消、竞态与流式响应。 本章从“AbortController 取消请求”开始，经过可观察实验和失败变体，建立到“ReadableStream cancel 与 finally”的连续因果链。

1. AbortController 取消请求
2. 取消、竞态与流式响应
3. 请求序号与过期响应
4. ReadableStream cancel 与 finally

第3章：HTTP 缓存、Storage 与 IndexedDB。 本章从“HTTP Cache-Control 与 ETag”开始，经过可观察实验和失败变体，建立到“localStorage/sessionStorage 边界”的连续因果链。

1. HTTP Cache-Control 与 ETag
2. IndexedDB 请求与事务
3. HTTP 缓存、Storage 与 IndexedDB
4. localStorage/sessionStorage 边界

第4章：WebSocket、离线与恢复。 本章从“online/offline 与恢复”开始，经过可观察实验和失败变体，建立到“WebSocket open/message/close”的连续因果链。

1. online/offline 与恢复
2. WebSocket、离线与恢复
3. SSE event/id/retry
4. WebSocket open/message/close

第5章：Streams、背压与增量读取。 本章从“背压与队列”开始，经过可观察实验和失败变体，建立到“TransformStream 管道”的连续因果链。

1. 背压与队列
2. ReadableStream reader
3. 流式 UI 与不完整数据
4. TransformStream 管道

第6章：WebSocket、SSE 与实时恢复。 本章从“实时连接认证与权限”开始，经过可观察实验和失败变体，建立到“WebSocket 状态机”的连续因果链。

1. 实时连接认证与权限
2. 指数退避与抖动
3. EventSource 与 SSE 重连
4. WebSocket 状态机

第7章：IndexedDB 事务与迁移。 本章从“阻塞、配额与恢复”开始，经过可观察实验和失败变体，建立到“事务作用域与提交”的连续因果链。

1. 阻塞、配额与恢复
2. 索引、游标与分页
3. 数据库版本与 object store
4. 事务作用域与提交

第8章：Cache API、配额与安全。 本章从“Cache match/put 与响应体”开始，经过可观察实验和失败变体，建立到“跨标签页同步”的连续因果链。

1. Cache match/put 与响应体
2. 敏感数据与清理
3. StorageManager 与配额
4. 跨标签页同步

深入阅读

从平台输入追到最终状态

遇到“页面没有更新、请求结果过期或交互重复”时，先回到对应章节的输入、事件路径和资源所有权，再沿实验日志确认是哪一步改变了状态。不要先用框架重写来掩盖平台边界。

从正常路径追到失败恢复

把取消、权限拒绝、卸载、离线、配额不足、浏览器不支持和辅助技术差异分别运行；每种失败都应有可观察反馈和降级策略。

从平台能力连接到 Vue 与 React

完成本手札后，再回到 Vue 学习路线 或 React 学习路线，比较框架如何包装事件、更新、Effect、表单、组件和服务端边界。

例子和练习怎样使用

先记录环境、输入序列、预期结果，再运行代码；随后只改变一个条件。正文中的练习要求写出成功、失败、取消/卸载和降级断言，答案集中在本章答案页。真实浏览器、权限、读屏、触摸、跨源、Worker 和 Service Worker 行为不能用 Node 语法检查代替。

开始阅读：第一章