posts
《互联网产品的客户端架构·端形态与体验基础》 · 已发布章节索引（45 篇）
《互联网产品的客户端架构·端形态与体验基础》全 45 篇：13 章正文覆盖端上约束、端形态、体验质量属性、分层依赖、状态、路由、数据层、组件、构建、渲染、错误降级与端上观测；附序、前言、目录与三篇附录，配可运行的 TypeScript 实验工程。
全书 45 篇：13 章正文 + 序、前言、目录 + 附录 A/B/C。每节配可运行的 TypeScript 代码，代码块用 // file: / // tier: / // verify: 标注，可在实验工程中逐字节还原。
本页是卷一的完整索引。可以从目录与学习路径
按顺序通读，也可以按问题跳读。
全书概览
| 项目 | 内容 |
|---|
| 书稿 | 《互联网产品的客户端架构》卷一 |
| 已发布篇数 | 45 篇（含目录与附录） |
| 主线语言 | TypeScript（Node 26 原生类型剥离，零第三方依赖） |
| 贯穿案例 | 内容社区 + IM + 轻交易「回声」 |
| 阅读方式 | 目录篇顺序通读，或按章节表跳读 |
| 上级专题 | 书稿专题 |
前置
| 篇 | 文章 | 核心内容 |
|---|
| 序 | 序 | 从为什么客户端架构值得单独成书写起，交代与服务端卷的对照、读者对象与不承诺的边界。 |
| 前言 | 前言 | 四卷分工、贯穿案例「回声」、实验工程与三级可运行性、代码块约定、数字与版本口径。 |
| 目录 | 目录 | 13 章 39 节的结构、章节依赖关系、三条阅读路径与读完卷一应能回答的问题。 |
第 1 章 客户端架构的四个独有约束
| 节 | 文章 | 核心内容 |
|---|
| 1.1 | 1.1 客户端架构的四个独有约束 | 从「回声」的三类界面出发，把客户端架构与服务器架构的差别收敛成设备碎片化、网络不确定、生命周期被打断、分发不可回滚四… |
| 1.2 | 1.2 回声客户端与第一个决定 | 把「回声」客户端收敛成页面栈、请求去重与有上限缓存三个最小部件，先回答「状态放在哪」而不是「用哪个状态库」，给出可运… |
| 1.3 | 1.3 实验工程的三级视图 | 说明 echo-client-lab 为什么把可运行性分成 L1 纯逻辑、L2 进程内端到端、L3 本地服务三级，给… |
第 2 章 端形态谱系
| 节 | 文章 | 核心内容 |
|---|
| 2.1 | 2.1 Web、原生、小程序与桌面 | 把 Web、原生、小程序与桌面四种端形态拆成八项可判定能力，用一份 TypeScript 能力矩阵与测试固定「稳定支… |
| 2.2 | 2.2 同构与多端的技术边界 | 把同构与多端复用拆成领域模型、数据层、视图、导航、生命周期、输入与存储七层，用可运行的 TypeScript 分类器… |
| 2.3 | 2.3 选型的判据矩阵 | 把团队规模、发布节奏、离线要求、性能敏感度与平台覆盖转成硬门槛加加权评分，用 TypeScript 选型函数输出排序… |
第 3 章 体验的质量属性
| 节 | 文章 | 核心内容 |
|---|
| 3.1 | 3.1 首屏、可交互与流畅度 | 从「回声」客户端的采样问题出发，拆解 FP、FCP、LCP、INP、TBT 五个指标各自回答什么、何时采样，用最近秩… |
| 3.2 | 3.2 包体与内存预算 | 把首包、路由包、图片、字体与运行内存拆成可执行的预算条目，说明预算如何从目标设备与网络反推、如何在 CI 中以非零状… |
| 3.3 | 3.3 不可能三角与优先级 | 首屏快、功能全、包体小为什么无法同时满足，如何把三者的取舍写成可复核的权重与排序函数，并复盘一次「回声」客户端的真实… |
第 4 章 分层与依赖
| 节 | 文章 | 核心内容 |
|---|
| 4.1 | 4.1 视图、状态、领域与数据访问 | 把回声客户端的发现、会话、下单三个页面拆成视图、状态、领域、数据访问四层，逐条说明每层负责什么、明确不负责什么，用一… |
| 4.2 | 4.2 依赖方向与包边界 | 从模块图出发把依赖方向写成可判定规则：依赖只能指向内层，反向边必须在构建前失败。给出 TypeScript 实现的模… |
| 4.3 | 4.3 用测试固化分层 | 把视图不能直接访问数据层、领域不能反向依赖视图、模块之间不能有循环依赖写成可执行架构规则，给出 TypeScript… |
第 5 章 状态管理
| 节 | 文章 | 核心内容 |
|---|
| 5.1 | 5.1 本地状态与共享状态 | 从「回声」客户端的筛选面板与草稿栏出发，把状态分成组件本地、跨页共享与服务端缓存三层，给出一个不依赖框架的最小订阅容… |
| 5.2 | 5.2 服务端状态的缓存与失效 | 把服务端状态从组件状态里拆出来，按价格、会话、内容流、详情与配置分别设定 ttl、stale 窗口与刷新模式，给出一… |
| 5.3 | 5.3 状态机的引入判据 | 用状态数量、禁止迁移、异步边界与副作用密度四个信号，判断一段状态该用状态机还是普通布尔标记；给出可运行的 TypeS… |
第 6 章 路由与页面栈
| 节 | 文章 | 核心内容 |
|---|
| 6.1 | 6.1 URL 即状态 | 从「回声」的订单详情页出发，把路由当成状态的投影：区分该进 URL、内存、本地存储与永远不该出现的四类状态，给出一个… |
| 6.2 | 6.2 页面栈与返回语义 | 返回键的行为不是 UI 细节，而是页面栈的公开契约。本节把 push、replace、back 三种操作与 Tab … |
| 6.3 | 6.3 深链与状态恢复 | 深链是外部世界进入客户端的唯一入口，也是最容易把用户带到空白页的地方。本节给出一个带版本、时间戳与状态白名单的 Ty… |
第 7 章 数据层
| 节 | 文章 | 核心内容 |
|---|
| 7.1 | 7.1 请求编排与去重 | 从「回声」发现页首屏同时发出的十七个请求出发，把并发上限、优先级、取消、总预算与指数退避放进同一张调度表，给出可运行… |
| 7.2 | 7.2 端上缓存与离线优先 | 把端上缓存拆成键设计、新鲜窗口、可陈旧窗口与离线回退四件事，给出「回声」四类资源的策略表和一个可运行的 TypeSc… |
| 7.3 | 7.3 冲突解决与同步队列 | 从「回声」在地铁里发出的一条消息出发，把离线写入拆成落盘队列、严格重放、幂等键与冲突合并四步，给出可运行的 Type… |
第 8 章 组件体系
| 节 | 文章 | 核心内容 |
|---|
| 8.1 | 8.1 设计系统与组件契约 | 组件契约不是一份文档，而是可以被校验的数据结构：props、事件、插槽、状态与可访问性各有明确边界。本节把「回声」搜… |
| 8.2 | 8.2 受控与非受控 | 受控与非受控不是二选一，而是同一条状态转移链上的三种模式。本节以「回声」搜索框为例，用纯函数实现 value 接管、… |
| 8.3 | 8.3 可访问性与交互边界 | 可访问性不是上线前的一次性检查，而是可以被数据描述的交互边界。本节把「回声」的焦点顺序、键盘可达、角色与标签、触摸目… |
第 9 章 构建与产物
| 节 | 文章 | 核心内容 |
|---|
| 9.1 | 9.1 打包、分包与按需加载 | 从「回声」首包翻倍的发布事故出发，把模块依赖图、静态闭包、懒加载边界与共享模块提升写成可运行的 TypeScript… |
| 9.2 | 9.2 产物分析与体积预算 | 把构建产物的体积拆成产物、模块与包装开销三个口径，给出按模块归因、按预算阈值判定 pass/warn/fail 的 … |
| 9.3 | 9.3 缓存与版本策略 | 从内容哈希、缓存头语义、版本兼容窗口和旧资源退役四条线，给出可运行的 TypeScript 缓存决策函数与八组测试，… |
第 10 章 渲染路径
| 节 | 文章 | 核心内容 |
|---|
| 10.1 | 10.1 CSR、SSR、SSG 与流式 | 把 CSR、SSR、SSG 与流式放回成本与页面类型的约束里，用七项页面特征推导渲染模式，给出可运行的 TypeSc… |
| 10.2 | 10.2 水合与首屏一致性 | 服务端与客户端首帧不一致通常来自时钟、随机数、本地状态与权限四个来源，本节用字段级帧对比把它们分开，给出可运行的 T… |
| 10.3 | 10.3 渲染模式的选择与退出 | 渲染模式不是一次选型就结束，而是持续核对前提的决策；本节给出退出判定函数、迁移成本矩阵与一次完整决策记录，用九组测试… |
第 11 章 错误与降级
| 节 | 文章 | 核心内容 |
|---|
| 11.1 | 11.1 错误边界与白屏治理 | 白屏往往不是某个组件写错，而是错误没有被分类、边界没有被放置。本节把端上错误分成可恢复、可降级、致命三类，给出不依赖… |
| 11.2 | 11.2 弱网与接口失败兜底 | 弱网下只有成功与失败两态是不够的，超时、失败、半成功需要不同兜底。本节给出缓存年龄、关键字段缺失与重试预算共同参与的… |
| 11.3 | 11.3 埋点补报与可恢复性 | 埋点失败后直接丢弃，会让故障现场永远缺一块。本节实现一个带 TTL、容量上限、优先级淘汰与跨批次去重的补报队列，说明… |
第 12 章 端上观测
| 节 | 文章 | 核心内容 |
|---|
| 12.1 | 12.1 性能指标口径 | 性能指标最容易在口径上失焦：同一个 LCP，均值、p75 与 p95 会讲出不同故事。本节把指标定义、采样边界、窗口… |
| 12.2 | 12.2 崩溃与卡顿归因 | 崩溃与卡顿的难点不是采集，而是把海量原始样本收敛成可行动的少数分组。本节给出崩溃消息归一化与签名聚合、卡顿阈值与样本… |
| 12.3 | 12.3 埋点规范与数据质量 | 埋点质量决定端上观测的上限。本节把事件命名、必填字段、类型校验、时间戳与 session 规则写成可运行的注册表与校… |
第 13 章 卷一收口
| 节 | 文章 | 核心内容 |
|---|
| 13.1 | 13.1 回声客户端基线 | 把页面栈、共享状态、缓存数据层与离线写队列串成一条可运行的端到端基线：用注入适配器在进程内复现冷启动、缓存命中、弱网… |
| 13.2 | 13.2 模块划分与依赖图 | 收口卷一的模块依赖：把各章实验整理成带层级的模块清单，构建依赖图、Kahn 拓扑排序、回路检测与方向校验，输出可直接… |
| 13.3 | 13.3 质量属性场景与风险清单 | 把弱网打开、进程回收恢复、支付回调重复、包体超限四个质量属性场景转成可评分风险条目，用影响、概率、发现难度三维打分并… |
附录
| 篇 | 文章 | 核心内容 |
|---|
| 附录 A | 附录 A | 客户端指标与体验口径速查：FP/FCP/LCP/INP/TBT 的定义、采样、分位与统计陷阱。 |
| 附录 B | 附录 B | 端上问题排查手册：白屏、卡顿、内存、请求失败、状态丢失与崩溃的验证与处置。 |
| 附录 C | 附录 C | 客户端架构评审清单：分维度检查项、判定标准、常见反例与十条自检总表。 |
怎么读这一卷
- 顺序读：从序
开始，按 1.1 到 13.3 推进；每章建立在上一章的输出上。
- 按问题读：先看目录
里的问题索引表，跳到对应章节，再回看它依赖的前置章节。
- 按角色读：产品与设计读第 2、3、6 章；客户端工程师顺序读；技术负责人读第 1、4、13 章与附录 C。
与其他书稿的边界
- 本书讲客户端架构判断，不教 TypeScript 语法；语言基础见站内 TypeScript 三部曲。
- 与服务端卷共用「回声」案例，但视角相反：服务端卷讨论边界、容量与一致性，本卷讨论端上约束、状态与体验。
- 真实浏览器渲染、真机性能与系统调度不在承诺范围内；相关章节只给模型、口径与检查方法。
代码与可复现性
- 实验工程为
echo-client-lab，使用 Node 26 原生类型剥离直接运行 .ts，node --test 为硬门禁。 - 可运行性分 L1 纯逻辑、L2 进程内端到端、L3 本地服务与时序三级；每节代码块标注级别与验证命令。
- 正文代码块与工程文件逐字节一致，校验脚本反向抽取比对，避免“正文改了、代码没改”。