跨端工程手记
跨端排障与
工程实践手记
记录移动混合架构与前后端底层的真实排障复盘。聚焦 Native Bridge 异步时序、Vue 3 / React 底层机制、ECMAScript 转译兼容陷阱及 RPC/缓存一致性治理。
- 10 年开发实践
- Vue 3 / React / 后端
- 长跑（10 年跑龄）
精选维度 / Pillars
⚡ 最新工程案例库实录
88 张老照片的 4K 竖屏之旅：人脸安全区与像素级验收
88 张家庭老照片的 4K 竖屏渲染流水线：YuNet 人脸安全区约束 Ken Burns 裁切视窗，PIL 修正 EXIF 方向，先降采样再 warpAffine 把单帧压到 48ms，最后用 ffmpeg 流拷贝合音频、抽帧 absdiff 做像素级验收。
票券缺口效果：伪元素遮罩、层叠顺序与 1px 像素对齐
票券上的缺口不是剪出来的，是盖出来的：一块同色伪元素压在卡片边框上，再算对那 1px 的对齐。本文拆穿这效果背后的层叠顺序、border-style 解析与 overflow 裁切，全程像素级、无半张遮罩图。
JSON 向后兼容、RPC 调用与 Redis 缓存失效全解析
列表排序接口要新增 statusCode 与 configType 两个通用属性，看似只是 VO 里多两行代码，却牵出三条链路：JSON 序列化的向后兼容、跨服务 RPC 取数，以及缓存命中/未命中两条组装路径的一致性陷阱。本文逐层拆解新增字段为什么会"时有时无"，并复盘比对式缓存失效的机制与局限。
AI 对话流式响应选型：为什么是 SSE 而不是 WebSocket？
AI 对话为什么选 SSE 而不是 WebSocket？本文从标准 HTTP 复用、fetch-event-source 破解原生 GET 限制、独立请求免状态机、AbortController 一行停止生成四个角度，讲清“单向推流用 SSE，双向高频用 WebSocket”的选型逻辑与真实踩坑。
一次看似普通的 BUG 修复，怎么就撞上了 ECMAScript 规范和 Vue 源码？
旅行页切子页签异常、跳错目的地、返回误显，一个看似普通的 BUG 修复，最后竟一路追到 ECMAScript 的 CopyDataProperties、Vue Router 的 query 整体覆盖、Vue 3 的 Diff key 身份判定、KeepAlive 的 name 匹配与 Object.is 的 Watch 同值不触发。本文把三大症状收敛到同一个病根——激活状态被三个数据源瓜分，并用“URL ‖ sessionStorage ‖ 默认”确立单一事实源。
聊聊 Vue 3 + Hybrid 架构下“路由状态紊乱”的硬核攻防
H5 / Hybrid 混合应用里，URL 明明带着 ?tab=FeatureA，页面却降级到默认页签。这不是 if-else 写漏，而是 SPA 路由解析、Native Bridge 异步注入、本地缓存抢占与 Vue 3 生命周期绞在一起打架。本文拆解“参数解析→激活校验→状态污染”三层非预期纠偏，并用“URL 即 SSOT + 单值动态提升 + 数据流出入口约束”完成可复用重构，附 8 因子组合测试矩阵。