前端工程笔记

我做的前端系统,上线后跑得稳。

我是许峰(Koh Hom),软件工程师,先后在 Shopee、蚂蚁集团、字节跳动和 TikTok 工作。这里有我做过的项目复盘,也有关于 Web 性能、测试和 AI 辅助开发的文章。

精选作品 关于我

开始写作
2022
笔记
32
项目复盘
5
语言
EN / 中文

精选作品

全部作品
  1. 01 工程 项目复盘

    从工程视角理解电商增长数据的本质

    最近转进 TikTok Shop 一个做电商增长的新组,由于自己之前没有接触过增长工程师这个专业,所以借着团队内现有项目和 GPT 学了一轮,我了解到了数据在增长工程里几乎是最重要的东西,以下是我的学习增长数据心得,本文纯…

    • 把 GMV 拆成工程口径的转化漏斗(UV × PDP 到达率 × 加购/立即购买 × 进入结算 × 支付成功 × 人均订单数 × AOV),让指标下滑能定位到具体环节而不是停在顶层数字。
    • 把 App Landing 实验的 Primary Metric 定为 7 天内 Web-assisted App paid GMV / eligible MWeb UV,同时约束“能归因到 Web 触点”“真的在 App 内成交”“按单位流量衡量价值”三件事。
    • A/B 实验
    • deeplink
    • btm_chain
    • 漏斗分析
    • Cohort 留存分析

    8 分钟阅读

  2. 02 工程 项目复盘

    运营管理心跳系统设计

    从用户动作、长链接入、Redis 时间窗口、HCM 状态提交、下游传播、跨 region 切流和 TT/主业务线拆分,一步步推导运营管理心跳系统的设计。

    • 我维护的 HCM/Heartbeat 链路服务 47,149 个 agent、7,000 个 skill group、约 4,000 QPS 和 141 个上游调用方。
    • TT 与主业务线拆分后,旧 HCM 侧减少约 3,000 个 agent 和约 2,000 QPS,TT 的心跳、状态提交和路由在 TT 内闭环。
    • Redis
    • MQ
    • DBus
    • binlog
    • Elasticsearch

    16 分钟阅读

  3. 03 工程 项目复盘

    Workspace v2 Tab System 性能优化:让热切换、冷启动和后台任务各走各的路

    一次 Workspace tab 性能复盘:把首屏、热切换、后台压力拆开测,用 profiling、E2E gate 和回滚记录挡住假收益。

    • 冷切换 p95 duration 从 `1829.8ms` 降到 `812.3ms`(`-55.6%`),p95 post-visible blocking 从 `1193.7ms` 降到 `8.7ms`(`-99.3%`),主要准备工作被移到点击前。
    • Scheduling route FMP 从 `14773ms` 到 `11926ms`,降低 `2847ms / 19.3%`:route chunks 从 `6785ms-15464ms` 才被发现改成 route-aware preload。
    • CDP Chrome
    • React
    • iframe sandbox
    • requestIdleCallback
    • WebSocket

    7 分钟阅读

  4. 04 工程 项目复盘

    Workspace v2 Tab System:把浏览器标签页带进工作空间

    Workspace v2 要做的不是多画一排 tab。用户会同时打开多个业务对象,刷新和分享链接还要回到正确页面;后台 runtime 不能偷偷改 URL、弹层、事件或前台 CPU。最后真正要解决的是 ownership:intent、URL、tab 状态、runtime c…

    • 刷新不丢 tab,多窗口不一致的问题也解决了:BFF 存打开的 tab,React Query 让当前窗口立刻响应,BroadcastChannel 通知其他窗口 invalidate 后重新拉取。
    • 地址栏保留真实业务 URL,例如 /workspace/workstream/:id/...,刷新、收藏、分享链接都能回到业务页,而不是只在自己本地有意义的 /tabs/:id。
    • React
    • TypeScript
    • React Query
    • BroadcastChannel
    • History API

    12 分钟阅读

  5. 05 AI 与 Agent 项目复盘

    用 harness 让 AI 做性能优化:goal-driven loop 和 ledger

    我做了一个性能优化 skill,把 AI Agent 从“可以试试懒加载”这类建议,拉进 harness、目标和 ledger 组成的循环里一轮轮跑。在一次 Workspace 优化里,strict profile 看到 Workstream 5089ms -> 2519ms、Report Center 10…

    • Workstream FMP 从 `5089ms` 到 `2519ms`(`-50.5%`):删除启动阶段无关 payload,预热 list API,把 notification/DnD/editor/actions 移到 final FMP 之后。
    • Report Center FMP 从 `10021ms` 到 `6762ms`(`-32.5%`):把 notification 移到 FMP 后,并修复 prefetch body/cache-key 对齐。
    • TypeScript
    • Service Worker
    • GraphQL
    • REST
    • requestIdleCallback

    6 分钟阅读

最近的笔记

全部文章
  1. 工程 项目复盘 8 分钟阅读

  2. 工程 项目复盘 16 分钟阅读

  3. 工程 4 分钟阅读

  4. 工程 4 分钟阅读

  5. 工程 9 分钟阅读

  6. 工程 项目复盘 7 分钟阅读