https://plumephp.com/posts/books/%E4%BA%92%E8%81%94%E7%BD%91%E4%BA%A7%E5%93%81%E7%9A%84%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%9E%B6%E6%9E%84%E7%AB%AF%E5%BD%A2%E6%80%81%E4%B8%8E%E4%BD%93%E9%AA%8C%E5%9F%BA%E7%A1%80/Recent content in 《互联网产品的客户端架构·端形态与体验基础》 · 已发布章节索引（45 篇） on PlumePHPHugozh-CNMon, 12 Oct 2026 23:00:00 +0800https://plumephp.com/inet-client-base-appendix-c-client-review-checklist/Mon, 12 Oct 2026 23:00:00 +0800https://plumephp.com/inet-client-base-appendix-c-client-review-checklist/一份可直接用于客户端架构评审的清单：从评审前要准备的材料，到约束与端形态、质量预算、分层依赖、状态归属、路由与深链、数据离线、组件契约、构建产物、渲染路径、错误降级、观测与发布兼容十二个维度，每条给出判定标准与常见反例，并附十条自检总表与评审后的跟踪方式。https://plumephp.com/inet-client-base-appendix-b-client-troubleshooting/Mon, 12 Oct 2026 22:00:00 +0800https://plumephp.com/inet-client-base-appendix-b-client-troubleshooting/按用户可描述的症状组织的端上排查手册：白屏、首屏慢、滚动卡顿、内存增长、请求失败、状态丢失、崩溃、深链打不开与版本兼容异常，每种症状都给出按概率排序的原因、验证步骤、处置建议和需要补的观测，并附从产物到渲染的跨症状排查顺序、现场记录模板与常见误判。https://plumephp.com/inet-client-base-appendix-a-client-metrics/Mon, 12 Oct 2026 21:00:00 +0800https://plumephp.com/inet-client-base-appendix-a-client-metrics/把 FP、FCP、LCP、INP、TBT、CLS 等客户端体验指标的定义、起止点与聚合口径收在一处，说明采样、分位以及端上与服务端口径的差异，列出平均值、幸存者偏差、埋点丢失等统计陷阱，并附一份可直接复用的指标字典模板与一张可直接贴进评审文档的速查表。https://plumephp.com/inet-client-base-13-3-quality-scenarios-risks/Mon, 12 Oct 2026 13:00:00 +0800https://plumephp.com/inet-client-base-13-3-quality-scenarios-risks/把弱网打开、进程回收恢复、支付回调重复、包体超限四个质量属性场景转成可评分风险条目，用影响、概率、发现难度三维打分并排序，给出阈值、结论判定与固定输出格式，附一次基线评审记录、风险关闭过程，以及清单如何进入下一轮迭代并转化为可执行的发布条件。https://plumephp.com/inet-client-base-13-2-module-dependency-graph/Mon, 12 Oct 2026 11:00:00 +0800https://plumephp.com/inet-client-base-13-2-module-dependency-graph/收口卷一的模块依赖：把各章实验整理成带层级的模块清单，构建依赖图、Kahn 拓扑排序、回路检测与方向校验，输出可直接写入评审记录的文本。附卷一真实依赖图的结论，说明 summary 组合根为什么允许向下穿透多层，以及依赖图与架构图之间仍缺的那部分证据。https://plumephp.com/inet-client-base-13-1-echo-baseline/Mon, 12 Oct 2026 09:00:00 +0800https://plumephp.com/inet-client-base-13-1-echo-baseline/把页面栈、共享状态、缓存数据层与离线写队列串成一条可运行的端到端基线：用注入适配器在进程内复现冷启动、缓存命中、弱网兜底与进程重启后的队列续传，给出 TypeScript 实现、五个测试的真实输出，并说明 L2 基线能证明与不能证明的边界。https://plumephp.com/inet-client-base-12-3-tracking-spec/Sun, 11 Oct 2026 19:00:00 +0800https://plumephp.com/inet-client-base-12-3-tracking-spec/埋点质量决定端上观测的上限。本节把事件命名、必填字段、类型校验、时间戳与 session 规则写成可运行的注册表与校验器，解释如何用发送数与接收数检测丢失，并用 schema 对比管理口径变更，避免一次字段改动静默破坏历史数据与下游报表口径。https://plumephp.com/inet-client-base-12-2-crash-jank/Sun, 11 Oct 2026 17:00:00 +0800https://plumephp.com/inet-client-base-12-2-crash-jank/崩溃与卡顿的难点不是采集，而是把海量原始样本收敛成可行动的少数分组。本节给出崩溃消息归一化与签名聚合、卡顿阈值与样本字段设计、归因顺序（布局抖动、主线程阻塞、长任务），以及上报事件应携带的最小证据字段，并用可运行的 TypeScript 与真实测试输出验证每一步判断与取舍。https://plumephp.com/inet-client-base-12-1-client-perf-metrics/Sun, 11 Oct 2026 15:00:00 +0800https://plumephp.com/inet-client-base-12-1-client-perf-metrics/性能指标最容易在口径上失焦：同一个 LCP，均值、p75 与 p95 会讲出不同故事。本节把指标定义、采样边界、窗口聚合与主口径选择写进一个可运行的 TypeScript 指标字典，说明何时用分位、何时看均值，并用真实测试输出验证聚合结果与取舍。https://plumephp.com/inet-client-base-11-3-telemetry-recovery/Sun, 11 Oct 2026 13:00:00 +0800https://plumephp.com/inet-client-base-11-3-telemetry-recovery/埋点失败后直接丢弃，会让故障现场永远缺一块。本节实现一个带 TTL、容量上限、优先级淘汰与跨批次去重的补报队列，说明 p0 事件如何避免被噪声挤掉，以及补报失败后重试、稍后、返回三种用户可恢复操作的分工，最后复盘一次埋点风暴的全过程与容量参数。https://plumephp.com/inet-client-base-11-2-weak-network-fallback/Sun, 11 Oct 2026 11:00:00 +0800https://plumephp.com/inet-client-base-11-2-weak-network-fallback/弱网下只有成功与失败两态是不够的，超时、失败、半成功需要不同兜底。本节给出缓存年龄、关键字段缺失与重试预算共同参与的决策函数，解释为什么超时先看缓存、失败先重试，并用注入时钟验证滑动窗口预算与降级内容展示，说明缓存写回与手动重试的风险边界。https://plumephp.com/inet-client-base-11-1-error-boundary/Sun, 11 Oct 2026 09:00:00 +0800https://plumephp.com/inet-client-base-11-1-error-boundary/白屏往往不是某个组件写错，而是错误没有被分类、边界没有被放置。本节把端上错误分成可恢复、可降级、致命三类，给出不依赖 DOM 的分类器与嵌套边界模型，用注入时钟验证恢复预算与升级路径，并复盘一次局部兜底反而扩大故障的白屏事故，最后整理成可执行的评审清单。https://plumephp.com/inet-client-base-10-3-render-choice-exit/Sat, 10 Oct 2026 19:00:00 +0800https://plumephp.com/inet-client-base-10-3-render-choice-exit/渲染模式不是一次选型就结束，而是持续核对前提的决策；本节给出退出判定函数、迁移成本矩阵与一次完整决策记录，用九组测试验证 SSR 何时退回 CSR、CSR 何时升级 SSG，并说明为什么没有触发条件时也要留下复核日期，判定不追求先进模式，只追问前提是否仍然成立。https://plumephp.com/inet-client-base-10-2-hydration-consistency/Sat, 10 Oct 2026 17:00:00 +0800https://plumephp.com/inet-client-base-10-2-hydration-consistency/服务端与客户端首帧不一致通常来自时钟、随机数、本地状态与权限四个来源，本节用字段级帧对比把它们分开，给出可运行的 TypeScript 差异检测器与八组测试，检测器不依赖浏览器，只在进程内比较两棵字段树并标出可延后项，所有结论都由测试固定，方便照搬到自己的组件树。https://plumephp.com/inet-client-base-10-1-render-modes/Sat, 10 Oct 2026 15:00:00 +0800https://plumephp.com/inet-client-base-10-1-render-modes/把 CSR、SSR、SSG 与流式放回成本与页面类型的约束里，用七项页面特征推导渲染模式，给出可运行的 TypeScript 选择器与七组测试，逐条说明每种模式被拒绝的理由，并复盘一次把商品详情页从 SSR 改成 SSG 的收益与回退边界，所有结论都用本机测试固定。https://plumephp.com/inet-client-base-09-3-asset-cache-version/Sat, 10 Oct 2026 13:00:00 +0800https://plumephp.com/inet-client-base-09-3-asset-cache-version/从内容哈希、缓存头语义、版本兼容窗口和旧资源退役四条线，给出可运行的 TypeScript 缓存决策函数与八组测试，解释 immutable 的前提、HTML 与 Service Worker 为什么必须回源校验，以及灰度窗口内旧哈希文件应该保留多久。https://plumephp.com/inet-client-base-09-2-bundle-analysis/Sat, 10 Oct 2026 11:00:00 +0800https://plumephp.com/inet-client-base-09-2-bundle-analysis/把构建产物的体积拆成产物、模块与包装开销三个口径，给出按模块归因、按预算阈值判定 pass/warn/fail 的 TypeScript 检查器与八组测试，讨论重复模块、贡献榜和超限后的处理顺序，并说明为什么抬高预算通常是最后而不是最先做的动作。https://plumephp.com/inet-client-base-09-1-bundle-split/Sat, 10 Oct 2026 09:00:00 +0800https://plumephp.com/inet-client-base-09-1-bundle-split/从「回声」首包翻倍的发布事故出发，把模块依赖图、静态闭包、懒加载边界与共享模块提升写成可运行的 TypeScript 分包算法，给出按路由与按交互分包的判定表、六组真实测试输出，并说明首包大小为什么必须和任务路径一起判断，而不能只看一个总数。https://plumephp.com/inet-client-base-08-3-a11y-boundary/Fri, 09 Oct 2026 19:00:00 +0800https://plumephp.com/inet-client-base-08-3-a11y-boundary/可访问性不是上线前的一次性检查，而是可以被数据描述的交互边界。本节把「回声」的焦点顺序、键盘可达、角色与标签、触摸目标尺寸写成纯数据规则，用 TypeScript 实现不依赖 DOM 的检查器，并用真实测试说明正 tabIndex、图标按钮缺名称、小触摸目标分别怎样被拦住。https://plumephp.com/inet-client-base-08-2-controlled-uncontrolled/Fri, 09 Oct 2026 17:00:00 +0800https://plumephp.com/inet-client-base-08-2-controlled-uncontrolled/受控与非受控不是二选一，而是同一条状态转移链上的三种模式。本节以「回声」搜索框为例，用纯函数实现 value 接管、defaultValue 作为种子、受控移除后的回退，以及状态提升的四个判据，并用真实测试说明切换模式时哪些值会保留、哪些警告必须记录。https://plumephp.com/inet-client-base-08-1-design-system-contract/Fri, 09 Oct 2026 15:00:00 +0800https://plumephp.com/inet-client-base-08-1-design-system-contract/组件契约不是一份文档，而是可以被校验的数据结构：props、事件、插槽、状态与可访问性各有明确边界。本节把「回声」搜索框的契约写成 TypeScript 结构，给出契约自检与调用校验两套规则，并用真实测试输出说明重复属性、必填默认值、受控缺处理器等问题如何在编码前被拦住。https://plumephp.com/inet-client-base-07-3-conflict-sync-queue/Fri, 09 Oct 2026 13:00:00 +0800https://plumephp.com/inet-client-base-07-3-conflict-sync-queue/从「回声」在地铁里发出的一条消息出发，把离线写入拆成落盘队列、严格重放、幂等键与冲突合并四步，给出可运行的 TypeScript 队列与九个真实测试，逐条说明 last-write-wins 的边界、字段级合并的判据，并复盘一次超时重试造成重复下单的事故。https://plumephp.com/inet-client-base-07-2-offline-first-cache/Fri, 09 Oct 2026 11:00:00 +0800https://plumephp.com/inet-client-base-07-2-offline-first-cache/把端上缓存拆成键设计、新鲜窗口、可陈旧窗口与离线回退四件事，给出「回声」四类资源的策略表和一个可运行的 TypeScript 读缓存实现，用九个不依赖真实时钟的测试验证 stale-while-revalidate、单飞刷新、持久化与淘汰，并复盘一次把订单状态缓存过久的事故。https://plumephp.com/inet-client-base-07-1-request-orchestration/Fri, 09 Oct 2026 09:00:00 +0800https://plumephp.com/inet-client-base-07-1-request-orchestration/从「回声」发现页首屏同时发出的十七个请求出发，把并发上限、优先级、取消、总预算与指数退避放进同一张调度表，给出可运行的 TypeScript 调度器与九个注入手动时钟的确定性测试，说明去重键、超时竞速与协作式取消的边界，并复盘一次无上限重试把弱网彻底拖垮的事故。https://plumephp.com/inet-client-base-06-3-deeplink-restore/Thu, 08 Oct 2026 19:00:00 +0800https://plumephp.com/inet-client-base-06-3-deeplink-restore/深链是外部世界进入客户端的唯一入口，也是最容易把用户带到空白页的地方。本节给出一个带版本、时间戳与状态白名单的 TypeScript 深链编解码器，按格式、时效、路由、权限的顺序恢复，并为过期、下线、坏状态与未登录分别设计兜底，最后复盘一次白屏事故。https://plumephp.com/inet-client-base-06-2-page-stack-back/Thu, 08 Oct 2026 17:00:00 +0800https://plumephp.com/inet-client-base-06-2-page-stack-back/返回键的行为不是 UI 细节，而是页面栈的公开契约。本节把 push、replace、back 三种操作与 Tab 切换、冷启动深链放进同一个 TypeScript 页面栈，说明为什么登录页不该留在历史里、深链进入后返回键该去哪，并复盘一次把用户困在登录页的线上事故。https://plumephp.com/inet-client-base-06-1-url-as-state/Thu, 08 Oct 2026 15:00:00 +0800https://plumephp.com/inet-client-base-06-1-url-as-state/从「回声」的订单详情页出发，把路由当成状态的投影：区分该进 URL、内存、本地存储与永远不该出现的四类状态，给出一个不依赖 DOM 的 TypeScript 解析器，覆盖参数校验、查询串归一化与规范 URL 生成，并复盘一次把草稿和令牌写进分享链接的事故。https://plumephp.com/inet-client-base-05-3-state-machine-criteria/Thu, 08 Oct 2026 13:00:00 +0800https://plumephp.com/inet-client-base-05-3-state-machine-criteria/用状态数量、禁止迁移、异步边界与副作用密度四个信号，判断一段状态该用状态机还是普通布尔标记；给出可运行的 TypeScript 判定函数与上传状态机，验证非法事件拒绝、重试上限与状态可达性，并用列表筛选和表单校验说明这条判据的反例边界，避免抽象过度或抽象不足。https://plumephp.com/inet-client-base-05-2-server-state-cache/Thu, 08 Oct 2026 11:00:00 +0800https://plumephp.com/inet-client-base-05-2-server-state-cache/把服务端状态从组件状态里拆出来，按价格、会话、内容流、详情与配置分别设定 ttl、stale 窗口与刷新模式，给出一个注入时钟、支持 stale-while-revalidate 与代际失效的 TypeScript 缓存，并用可运行测试验证过期、去重、前缀失效与旧响应回写拦截。https://plumephp.com/inet-client-base-05-1-local-shared-state/Thu, 08 Oct 2026 09:00:00 +0800https://plumephp.com/inet-client-base-05-1-local-shared-state/从「回声」客户端的筛选面板与草稿栏出发，把状态分成组件本地、跨页共享与服务端缓存三层，给出一个不依赖框架的最小订阅容器、选择器与不可变更新规则，用可运行的 TypeScript 测试验证订阅、退订与提升判据，并说明什么时候不该把状态提升到全局。https://plumephp.com/inet-client-base-04-3-layer-tests/Wed, 07 Oct 2026 19:00:00 +0800https://plumephp.com/inet-client-base-04-3-layer-tests/把视图不能直接访问数据层、领域不能反向依赖视图、模块之间不能有循环依赖写成可执行架构规则，给出 TypeScript 检查器、带原因的例外机制与失败样例报告，并用本机 Node 26 真实测试输出证明三条规则都能拦住真实违规，最后说明如何接进本地检查与 CI 门禁。https://plumephp.com/inet-client-base-04-2-dependency-direction/Wed, 07 Oct 2026 17:00:00 +0800https://plumephp.com/inet-client-base-04-2-dependency-direction/从模块图出发把依赖方向写成可判定规则：依赖只能指向内层，反向边必须在构建前失败。给出 TypeScript 实现的模块图模型、反向依赖检查、Tarjan 强连通分量循环检测与依赖优先构建排序，并用本机 Node 26 真实测试输出现场验证，最后讨论包边界、公开入口与类型依赖的落地方式。https://plumephp.com/inet-client-base-04-1-layer-responsibility/Wed, 07 Oct 2026 15:00:00 +0800https://plumephp.com/inet-client-base-04-1-layer-responsibility/把回声客户端的发现、会话、下单三个页面拆成视图、状态、领域、数据访问四层，逐条说明每层负责什么、明确不负责什么，用一段可运行的分层判定与调用审计代码暴露视图直连数据层、领域反向依赖视图、状态绕过领域三类越层，并给出本机 Node 26 真实测试输出与评审问题清单。https://plumephp.com/inet-client-base-03-3-quality-tradeoff/Wed, 07 Oct 2026 13:00:00 +0800https://plumephp.com/inet-client-base-03-3-quality-tradeoff/首屏快、功能全、包体小为什么无法同时满足，如何把三者的取舍写成可复核的权重与排序函数，并复盘一次「回声」客户端的真实取舍记录，说明排序结果与评审判断的边界；所有案例数值均标注为假设值，附完整可运行 TypeScript 实现与真实测试输出。https://plumephp.com/inet-client-base-03-2-bundle-memory-budget/Wed, 07 Oct 2026 11:00:00 +0800https://plumephp.com/inet-client-base-03-2-bundle-memory-budget/把首包、路由包、图片、字体与运行内存拆成可执行的预算条目，说明预算如何从目标设备与网络反推、如何在 CI 中以非零状态卡住，并给出不依赖文件系统的 TypeScript 体积与内存预算检查器、注入时钟的采样器、真实测试输出与一次预算失守的复盘。https://plumephp.com/inet-client-base-03-1-startup-metrics/Wed, 07 Oct 2026 09:00:00 +0800https://plumephp.com/inet-client-base-03-1-startup-metrics/从「回声」客户端的采样问题出发，拆解 FP、FCP、LCP、INP、TBT 五个指标各自回答什么、何时采样，用最近秩分位与 p75/p95 双线预算替代平均值判定，并给出可运行的 TypeScript 分位计算器、注入时钟的采样器与真实测试输出。https://plumephp.com/inet-client-base-02-3-form-selection-matrix/Tue, 06 Oct 2026 19:00:00 +0800https://plumephp.com/inet-client-base-02-3-form-selection-matrix/把团队规模、发布节奏、离线要求、性能敏感度与平台覆盖转成硬门槛加加权评分，用 TypeScript 选型函数输出排序、淘汰原因与决策记录，并以「回声」的默认事实演示 Web 胜出、桌面备选的完整推演，说明评分结果何时可信、何时必须重跑，以及组合策略的边界。https://plumephp.com/inet-client-base-02-2-isomorphic-boundary/Tue, 06 Oct 2026 17:00:00 +0800https://plumephp.com/inet-client-base-02-2-isomorphic-boundary/把同构与多端复用拆成领域模型、数据层、视图、导航、生命周期、输入与存储七层，用可运行的 TypeScript 分类器判定复用、适配与分叉，给出分叉率阈值与退出条件，并复盘一次强行统一导航的失败，说明复用为什么是一项需要成本口径与退出机制的经济决策。https://plumephp.com/inet-client-base-02-1-client-forms/Tue, 06 Oct 2026 15:00:00 +0800https://plumephp.com/inet-client-base-02-1-client-forms/把 Web、原生、小程序与桌面四种端形态拆成八项可判定能力，用一份 TypeScript 能力矩阵与测试固定「稳定支持、有条件支持、不支持」的边界，再复盘一次把小程序当成全平台方案的误判，说明能力矩阵为什么必须先于框架选型，避免团队用渠道优势掩盖能力缺口。https://plumephp.com/inet-client-base-01-3-lab-three-views/Tue, 06 Oct 2026 13:00:00 +0800https://plumephp.com/inet-client-base-01-3-lab-three-views/说明 echo-client-lab 为什么把可运行性分成 L1 纯逻辑、L2 进程内端到端、L3 本地服务三级，给出可运行的 TypeScript 分级器、本机 Node 26 的真实测试输出、代码块抽取与逐字节校验流程，并明确真机性能与真实浏览器渲染不在承诺范围内，避免把示例当成实测。https://plumephp.com/inet-client-base-01-2-echo-client-first-decision/Tue, 06 Oct 2026 11:00:00 +0800https://plumephp.com/inet-client-base-01-2-echo-client-first-decision/把「回声」客户端收敛成页面栈、请求去重与有上限缓存三个最小部件，先回答「状态放在哪」而不是「用哪个状态库」，给出可运行的 TypeScript 模型、快照恢复与真实测试输出，并附一份状态归属决策记录，说明第一个决定如何约束后面所有架构选择。https://plumephp.com/inet-client-base-01-1-client-constraints/Tue, 06 Oct 2026 09:00:00 +0800https://plumephp.com/inet-client-base-01-1-client-constraints/从「回声」的三类界面出发，把客户端架构与服务器架构的差别收敛成设备碎片化、网络不确定、生命周期被打断、分发不可回滚四个独有约束，给出可运行的 TypeScript 分类器与测试，并复盘一次把在线默认值带进离线场景的失败，说明端上判断为什么必须先于框架选型。https://plumephp.com/inet-client-base-toc/Mon, 05 Oct 2026 11:00:00 +0800https://plumephp.com/inet-client-base-toc/《互联网产品的客户端架构·端形态与体验基础》的完整目录与学习路径：13 章 39 节从端上约束、端形态与体验质量属性讲到分层、状态、路由、数据、组件、构建、渲染、错误与观测，附实验工程、三条阅读路径、数字与版本口径，以及读完卷一应能回答的六个问题。https://plumephp.com/inet-client-base-preface/Mon, 05 Oct 2026 10:00:00 +0800https://plumephp.com/inet-client-base-preface/四卷规划、贯穿案例「回声」、实验工程 echo-client-lab 与 L1 到 L3 的三级可运行性，都在这篇前言里交代清楚。另说明代码块的三行头、数字与版本口径、三种读法，以及本书不承诺的真实浏览器与真机性能边界，便于读者判断哪些结论可以复现、哪些必须换成自己产品的参数。https://plumephp.com/inet-client-base-foreword/Mon, 05 Oct 2026 09:00:00 +0800https://plumephp.com/inet-client-base-foreword/服务端卷交稿之后，真正难回答的问题转移到了用户手中的设备上：网络会断、进程会被杀、旧版本不会消失。这篇序说明为什么客户端架构判断值得单独成书，它与服务端卷在默认假设上如何相反，卷一写给哪些读者、坚持什么立场，以及明确不承诺什么，适合谁在什么阶段翻开。