全卷 45 篇:13 章正文 + 序、前言、目录 + 附录 A/B/C。每节配可运行的 TypeScript 代码,代码块用
// file:/// tier:/// verify:标注,可在实验工程中逐字节还原。
本页是卷二的完整索引。可以从目录与学习路径 按顺序通读,也可以按问题跳读。
全书概览
| 项目 | 内容 |
|---|---|
| 书稿 | 《互联网产品的客户端架构》卷二 |
| 已发布篇数 | 45 篇(含目录与附录) |
| 主线语言 | TypeScript(Node 26 原生类型剥离,零第三方依赖) |
| 贯穿案例 | 内容社区 + 私信 + 轻交易「回声」 |
| 阅读方式 | 目录篇顺序通读,或按章节表跳读 |
| 上级专题 | 书稿专题 |
前置
| 篇 | 文章 | 核心内容 |
|---|---|---|
| 序 | 序 | 从卷一结束的地方写起,交代内容、社交与实时为什么单独成卷,四条核心判断与本卷边界。 |
| 前言 | 前言 | 四卷分工、十三章结构、贯穿案例「回声」、social-client-lab 与三级可运行性。 |
| 目录 | 目录 | 13 章 39 节的结构、章节依赖、三条阅读路径与读完应能回答的六个问题。 |
第 1 章 内容端架构与 social-lab
| 节 | 文章 | 核心内容 |
|---|---|---|
| 1.1 | 1.1 「回声」的内容面:信息流、详情、互动、实时四条线 | 把「回声」的客户端拆成信息流、详情、互动、实时四条消费线,逐条说明每条线需要什么数据、失败时能退到哪里,并用一段可运… |
| 1.2 | 1.2 social-lab 的第一个决定:端上先画什么 | 内容端的第一处架构决定不是选框架,而是决定哪份状态归谁所有。本节把服务端状态、会话状态与瞬时 UI 状态分开,用一段… |
| 1.3 | 1.3 lab 的三条验证线:L1 纯逻辑、L2 进程内、L3 本地实时通道 | 客户端实验最怕「测试全绿但线上照错」。本节把验证分成 L1 纯逻辑、L2 进程内流程、L3 本地实时通道三级,用一段… |
第 2 章 信息流
| 节 | 文章 | 核心内容 |
|---|---|---|
| 2.1 | 2.1 游标分页:为什么页码在内容流里会失效 | 内容流一旦插入新条目,页码就不再是位置:总数漂移会让第二页重复上一页的卡片,深分页还要求数据库扫过前 N 行。本节用… |
| 2.2 | 2.2 去重、插入与位置保持 | 分页只保证「不重不漏地取」,端上仍会遇到同一张卡片来自刷新、实时推送与翻页三条路径。本节用带假时钟的 TypeScr… |
| 2.3 | 2.3 刷新策略:下拉、自动、回到前台该不该拉 | 下拉、轮询、回到前台是三种不同意图的刷新,用同一个定时器处理只会在用户阅读时把列表顶走。本节用一段可运行的 Type… |
第 3 章 内容渲染与富文本
| 节 | 文章 | 核心内容 |
|---|---|---|
| 3.1 | 3.1 结构化内容:把正文当成数据而不是 HTML 字符串 | 正文不该是一段 HTML 字符串,而是一份可校验、可降级的块文档。本节定义段落、图片、视频、代码、引用五类块与行内标… |
| 3.2 | 3.2 渲染边界与 sanitize:谁能写 HTML | 作者正文、运营配置、第三方嵌入的信任级别并不相同。本节把 sanitize 定义为能力边界而不是标签黑名单,给出作者… |
| 3.3 | 3.3 媒体懒加载与占位:CLS 的端上来源 | 图片把正文撑开的那一刻,CLS 就已经发生。本节把占位盒、首屏媒体优先级、懒加载触发条件与失败降级拆成可计算的纯函数… |
第 4 章 媒体上传与资源
| 节 | 文章 | 核心内容 |
|---|---|---|
| 4.1 | 4.1 上传编排:分片、并发与进度语义 | 一条 48MB 的视频会把上传器的问题全部放大:分片多大、并发几个、进度条该信哪个数、失败算不算完成。本节用内存传输… |
| 4.2 | 4.2 断点续传与失败恢复 | 上传到 87% 时进程被系统回收,回来后是从头开始还是接着传?本节把上传会话拆成会话 id、文件指纹、已确认分片清单… |
| 4.3 | 4.3 图片格式选择与端上降级 | 同一张封面图,在支持 AVIF 的手机上清晰又小,在旧 WebView 里却可能直接白屏。本节把能力探测、格式顺序、… |
第 5 章 互动与乐观更新
| 节 | 文章 | 核心内容 |
|---|---|---|
| 5.1 | 5.1 点赞与收藏:本地先行、服务端为准 | 点赞与收藏看似只是改一个布尔值,真正难的是本地先行之后如何让服务端裁决:绝对计数与增量事件冲突、列表与详情各存一份状… |
| 5.2 | 5.2 评论的顺序、草稿与失败重发 | 评论提交比点赞多出正文、时间顺序、草稿保存与失败重发。本节把一条评论拆成发送中、失败、已确认三态:用客户端 clie… |
| 5.3 | 5.3 回滚的边界:哪些操作不能乐观 | 点赞可以乐观,支付与下单不行。本节按回滚成本把写操作分成四档:即时可逆、可补偿、需服务端确认、绝不能乐观,并给出一个… |
第 6 章 实时通道选型
| 节 | 文章 | 核心内容 |
|---|---|---|
| 6.1 | 6.1 轮询、SSE 与 WebSocket 的判定表 | 实时选型常被简化成「聊天就上 WebSocket」,但真实约束远不止消息方向。本节把延迟、在线规模、运维能力、二进制… |
| 6.2 | 6.2 一条实时连接的生命周期 | 连接不是一个 connected 布尔值,而是 idle、connecting、open、reconnecting、… |
| 6.3 | 6.3 降级路径:实时不可用时产品还能做什么 | 实时通道会断,产品不能跟着白屏。本节把连接状态映射成角标、自动插入、输入中、评论框与在线状态五种能力,给出暂停、手动… |
第 7 章 实时消息可靠性
| 节 | 文章 | 核心内容 |
|---|---|---|
| 7.1 | 7.1 重连与退避:把断线当成常态 | 断线在移动端是常态。本节把重连拆成失败分类、指数退避、抖动与上限四个决策,给出一个可测试的纯函数退避模块,并复盘一次… |
| 7.2 | 7.2 消息去重与有序:端上能保证什么 | 同一条消息可能因重连补发、重试或多路径到达两次,晚到的消息也可能插到已经读过的位置。本节区分消息 id 与序列号,给… |
| 7.3 | 7.3 断线期间的消息补拉与空洞检测 | 重连后只拉最新一条,会让中间的缺口永远补不上。本节用已收序列号维护连续高水位,按批生成补拉区间,把补拉结果与实时推送… |
第 8 章 在线状态与「正在输入」
| 节 | 文章 | 核心内容 |
|---|---|---|
| 8.1 | 8.1 presence 的近似语义:没有真正的「在线」 | 客户端看到的「在线」不是事实,而是一次带衰减的观测。本节把 presence 拆成最后活跃时间、online/awa… |
| 8.2 | 8.2 输入中状态的节流与超时 | 输入中状态不是一次事件,而是一份几秒后自动过期的租约。本节用本地节流、远端超时、会话隔离与停发条件,把「正在输入」压… |
| 8.3 | 8.3 状态展示的降级与隐私边界 | 在线状态一旦涉及隐私,就不再是「显示什么」,而是「允许谁看到什么证据」。本节把可见性、关系、拉黑与连接降级组合成一张… |
第 9 章 社交关系与可见性
| 节 | 文章 | 核心内容 |
|---|---|---|
| 9.1 | 9.1 关注、互关与关系缓存 | 关注、粉丝与互关不是一张布尔表:方向、新鲜度和进行中的变更都要分别记录。本节用带假时钟的 FollowCache 实… |
| 9.2 | 9.2 可见性规则在端上的表达 | 可见性规则在端上只能表达为提示与预判,最终仍以服务端为准。本节把公开、关注可见、好友可见、仅自己可见映射为带置信度的… |
| 9.3 | 9.3 拉黑与屏蔽:端上必须立即生效的部分 | 拉黑是安全操作,端上必须先隐藏再同步:信息流、详情、评论、搜索、私信五处都要在请求发出前生效。本节实现 pendin… |
第 10 章 通知与未读数
| 节 | 文章 | 核心内容 |
|---|---|---|
| 10.1 | 10.1 未读数的来源与端上合并 | 点赞、评论、关注与系统通知四种来源的未读数,为什么不能用一个 total += 1 维护。本节用服务端水位 ackS… |
| 10.2 | 10.2 多端已读:一致性从哪里来 | 同一个「已读」布尔值在两台设备之间一定会打架:甲读完 3 条,乙把整个会话标成已读,新消息到达后两边都显示已读。本节… |
| 10.3 | 10.3 推送降级:没有推送权限时怎么补 | 推送不是「有没有」的二值问题:权限被拒、系统通知关闭、令牌失效,三种情况的恢复路径完全不同。本节给出推送降级矩阵、打… |
第 11 章 内容审核与安全边界
| 节 | 文章 | 核心内容 |
|---|---|---|
| 11.1 | 11.1 端上预检:能拦什么、不能拦什么 | 端上预检只能做早反馈,不能替代审核。本节用纯函数实现长度、格式、控制字符与少量高风险词的本地提示,区分硬阻断、可申诉… |
| 11.2 | 11.2 审核态的内容 UI:占位、隐藏与申诉 | 审核中的内容最怕先闪正文再被替换。本节用五态状态机描述 draft、pending、review、published… |
| 11.3 | 11.3 举报链路与证据留存 | 举报不是把一段文字发给服务端。本节用内存队列和假时钟实现举报负载、离线排队、去重、退避与成功回执,把举报时的内容快照… |
第 12 章 搜索与发现
| 节 | 文章 | 核心内容 |
|---|---|---|
| 12.1 | 12.1 输入联想:防抖、竞态与缓存 | 联想框的难点在输入与响应之间:本节用可注入调度器的 TypeScript 控制器实现防抖、输入法组合抑制、取消在途请… |
| 12.2 | 12.2 结果分页与筛选状态的保持 | 搜索结果页最容易丢的不是数据,而是状态:本节用纯函数 reducer 管理查询词、筛选条件、游标与版本号,讲清条件变… |
| 12.3 | 12.3 发现页的推荐位与内容流的差异 | 发现页不是换皮的信息流:运营位、榜单、专题与普通内容来自不同契约。本节用纯函数组合器实现固定槽位、跨源去重、占位与曝… |
第 13 章 卷二收口:social-lab 端到端
| 节 | 文章 | 核心内容 |
|---|---|---|
| 13.1 | 13.1 端到端场景:发内容、互动、实时回复 | 把发内容、信息流出现、点赞、评论与实时回复串成一条 L2 端到端流程,用内存服务端与真实模块组合,逐步断言信息流、互… |
| 13.2 | 13.2 故障注入:断网、慢网与断线重连 | 用可控网络适配器与假时钟注入断网、慢网、乱序和断线,验证离线排队不产生副作用、重连后按高水位补拉、补拉与实时消息去重… |
| 13.3 | 13.3 质量场景与风险清单:进入卷三 | 把首屏、弱网、断线、内存、审核与多端一致写成六条质量属性场景,每条给出刺激、响应、度量口径、预算与证据等级,用风险分… |
附录
| 篇 | 文章 | 核心内容 |
|---|---|---|
| 附录 A | 附录 A | 轮询、SSE、WebSocket 的能力对照、断线语义、鉴权方式与选型判定表。 |
| 附录 B | 附录 B | 内容与实时问题排查手册:按十二类症状给出信号、根因、验证与修复方向。 |
| 附录 C | 附录 C | 内容社交客户端评审清单:七组判据、证据要求、反模式与评审记录模板。 |
怎么读这一卷
- 顺序读:从序 开始,按 1.1 到 13.3 推进;第 6 到 8 章建议连读。
- 按问题读:先看目录 里的三条路径,跳到对应章节,再回看前置。
- 按角色读:产品与设计读第 1、9、10 章;客户端工程师顺序读;技术负责人读第 1、5、7、13 章与附录 C。
与其他书稿的边界
- 本书讲客户端架构判断,不教 TypeScript 语法;语言基础见站内 TypeScript 三部曲。
- 卷一讨论端形态、分层、状态、路由与渲染基础;卷二假设这些结构已成立,专注持续流动的数据。
- 真实浏览器渲染、真机性能与系统调度不在承诺范围内;原生与小程序只讲架构建模。
代码与可复现性
- 实验工程为
social-client-lab,使用 Node 26 原生类型剥离直接运行.ts,node --test为硬门禁。 - 可运行性分 L1 纯逻辑、L2 进程内端到端、L3 本地实时通道三级;每节代码块标注级别与验证命令。
- 正文代码块与工程文件逐字节一致,校验脚本反向抽取比对,避免“正文改了、代码没改”。