Web 平台与浏览器知识手札

框架建立在浏览器提供的文档、事件、网络、存储、并发和安全能力之上。每章通过可观察实验把平台行为与框架抽象分开。 每篇都要求先运行最小例子，再改变输入、时序、宿主或失败条件。

阅读起点

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

全书顺序

第1章：DOM 与事件。 本章从“事件传播与默认行为”开始，经过可观察实验和失败变体，建立到“target、currentTarget 与 composedPath”的连续因果链。

1. 事件传播与默认行为
2. 默认行为、取消与用户手势
3. DOM 树、节点身份与遍历
4. target、currentTarget 与 composedPath

第2章：Fetch 与取消。 本章从“请求取消与过期结果”开始，经过可观察实验和失败变体，建立到“Response 状态、Headers 与 body”的连续因果链。

1. 请求取消与过期结果
2. AbortSignal.timeout 与组合取消
3. Fetch body、克隆与消费
4. Response 状态、Headers 与 body

第3章：存储与 URL 状态。 本章从“URL、History 与本地存储”开始，经过可观察实验和失败变体，建立到“URL、URLSearchParams 与编码”的连续因果链。

1. URL、History 与本地存储
2. pushState、replaceState 与 popstate
3. localStorage 版本迁移与事件
4. URL、URLSearchParams 与编码

第4章：可访问性树与键盘交互。 本章从“语义、名称与键盘”开始，经过可观察实验和失败变体，建立到“原生语义与可访问名称”的连续因果链。

1. 语义、名称与键盘
2. ARIA 状态与动态反馈
3. 键盘焦点与操作顺序
4. 原生语义与可访问名称

第5章：Worker、消息与共享内存。 本章从“SharedArrayBuffer 与 Atomics 边界”开始，经过可观察实验和失败变体，建立到“Worker 生命周期与消息协议”的连续因果链。

1. SharedArrayBuffer 与 Atomics 边界
2. structured clone 与 Transferable
3. Worker 错误、取消与回收
4. Worker 生命周期与消息协议

第6章：渲染管线与性能测量。 本章从“事件循环到绘制”开始，经过可观察实验和失败变体，建立到“调度、idle 与优先级”的连续因果链。

1. 事件循环到绘制
2. 布局、绘制与合成
3. PerformanceObserver 与长任务
4. 调度、idle 与优先级

第7章：同源、CORS 与浏览器安全。 本章从“CSP、Trusted Types 与注入”开始，经过可观察实验和失败变体，建立到“存储分区、第三方与隐私”的连续因果链。

1. CSP、Trusted Types 与注入
2. Origin、CORS 与预检
3. Permissions、sandbox 与能力请求
4. 存储分区、第三方与隐私

第8章：兼容、特性检测与平台测试。 本章从“浏览器自动化与真实边界”开始，经过可观察实验和失败变体，建立到“Polyfill、降级与 Baseline”的连续因果链。

1. 浏览器自动化与真实边界
2. 特性检测与渐进增强
3. DevTools 证据链
4. Polyfill、降级与 Baseline

深入阅读

从平台输入追到最终状态

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

从正常路径追到失败恢复

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

从平台能力连接到 Vue 与 React

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

例子和练习怎样使用

先记录环境、输入序列、预期结果，再运行代码；随后只改变一个条件。正文中的练习要求给出主题特定的输入、观察结果和边界断言，答案集中在本章答案页。真实浏览器、权限、读屏、触摸、跨源、Worker 和 Service Worker 行为不能用 Node 语法检查代替。

开始阅读：第一章