一页纸 · Markdown 在线简历

个人优势

• 8 年前端经验，其中 4 年带 5~8 人的小组，负责过 C 端、B 端和数据可视化三类产品的前端架构
• 熟悉 React 和 Vue3 的渲染机制，排查过多起由 Fiber 调度、响应式依赖收集引起的性能问题
• 做过三次工程体系迁移：Webpack 到 Vite、多仓库到 pnpm Monorepo、手工发布到 GitLab CI 灰度发布
• 有离线优先应用的完整经验：Service Worker 缓存策略、IndexedDB 数据同步、弱网下的冲突合并
• 能独立完成 Node.js BFF 的接口聚合、鉴权和部署，和后端约定过两套接口规范并推行到全部门
• AI 辅助开发：团队内推行 Cursor 和 Claude Code 写测试、做代码评审预检，单测覆盖率从 31% 提到 64%
• 地图和大屏可视化有深度经验：deck.gl WebGL 图层、Web Worker 解包插值，1 万个点位下保持 50 帧以上
• 做过微前端拆分，用 qiankun 把商家后台拆成 4 个子应用，各小组独立发布，每周发布从 1 次变成 6~8 次
• 建过前端监控和告警，错误、白屏、接口耗时按页面和版本聚合，P1 问题平均发现时间从 40 分钟缩到 6 分钟
• 带人注重方法：新人入职有任务清单和结对周，组内每两周一次技术分享，近两年带出 2 名独立负责模块的同学

工作经历

React 18 / Next.js 14 / TypeScript / Zustand / Mapbox GL / pnpm Monorepo

• 负责司机端 H5、调度后台和运营大屏三条产品线的前端，带 6 人小组，季度需求交付率保持在 95% 以上
• 主导司机端离线优先改造：页面资源和订单数据走 Service Worker + IndexedDB，地下车库、隧道等弱网场景下接单失败率从 7.8% 降到 1.2%
• 把三条产品线的 9 个仓库合并为 pnpm Monorepo，抽出地图、权限、埋点三个公共包，新页面的平均开发周期从 5 天缩到 3 天
• 搭建前端监控：错误、白屏、接口耗时按页面和版本聚合，接入企业微信告警，线上 P1 问题的平均发现时间从 40 分钟缩到 6 分钟

Vue3 / Vite / TypeScript / qiankun / Node.js / Koa

• 负责商家后台和店铺装修编辑器，服务约 2 万家中小商家
• 用 qiankun 把商家后台拆成订单、商品、营销、数据 4 个子应用，由不同小组独立发布，每周发布次数从 1 次变成 6~8 次
• 用 Koa 写了商家后台的 BFF 层，合并首页的 11 个接口为 2 个，首页可交互时间从 3.6s 降到 1.9s
• 把构建从 Webpack 4 迁到 Vite，本地冷启动从 70 秒降到 4 秒，热更新基本在 200ms 以内

React / Redux / 微信小程序 / Canvas

• 负责学生端小程序和直播课互动组件，日活约 8 万
• 用 Canvas 重写直播课的白板组件，解决低端安卓机上笔迹延迟明显的问题，绘制帧率从 20 帧左右提到稳定 55 帧以上
• 小程序做分包和按需注入，主包从 1.9MB 降到 1.1MB，首屏打开时间缩短约 0.8 秒

项目经历

项目概述：商家用拖拽的方式装修自己的独立站首页和活动页，发布后生成静态页面部署到海外 CDN。上线前商家改一次首页要提工单等运营处理，平均 2 天。

技术栈：Vue3、TypeScript、Pinia、Vite、Node.js、Puppeteer

编辑器架构

• 组件协议：每个组件声明属性 Schema 和默认值，编辑器按 Schema 自动生成配置面板，新增一个组件不用改编辑器代码，目前组件库有 64 个组件
• 画布放进 iframe，商家主题的全局样式不会污染编辑器界面；主窗口和画布之间用 postMessage 同步选中状态和配置
• 撤销重做基于命令模式，每次修改记录一条可逆操作，连续拖动同一个组件合并成一条，内存占用稳定

发布与性能

• 发布时用 Puppeteer 把页面预渲染成静态 HTML，图片按视口宽度生成 3 档尺寸，海外访问的 LCP 中位数从 3.1s 降到 1.4s
• 上线后商家自助装修占到 83%，运营装修工单每月减少约 900 单

项目概述：司机端 H5 在地下车库、隧道里经常断网，抢单和到达确认会失败，引起投诉。目标是断网时也能完成接单流程，联网后自动补发。

技术栈：Next.js、TypeScript、Workbox、IndexedDB、Web Worker

• 页面外壳和静态资源用 Workbox 预缓存，订单列表走「先缓存后网络」，断网时页面照常打开
• 司机的操作先写入 IndexedDB 队列，联网后由 Web Worker 按顺序补发；和服务端状态冲突时以服务端为准，并在页面上提示司机
• 灰度两周后全量，弱网相关的投诉从每周 60 多条降到 10 条以内

项目概述：调度员在一块 4K 大屏上看全城车辆分布和订单热力，每秒约 3000 个车辆位置更新。原方案用 DOM 标点，车多时整页卡死。

技术栈：React、Mapbox GL、deck.gl、WebSocket、Web Worker

• 车辆点位改用 deck.gl 的 WebGL 图层绘制，位置数据在 Web Worker 里解包和插值，主线程只做渲染，1 万个点位下保持 50 帧以上
• WebSocket 消息改为二进制格式并按 200ms 合帧，带宽占用降到原来的三分之一
• 大屏连续运行 72 小时内存平稳，解决了原来每天要重启一次的问题

教育经历

个人优势

• 四年前端开发经验，做过社交平台的增长业务和金融 H5，负责过活动搭建平台、监控 SDK 和灰度发布三个基础项目
• 性能治理有完整闭环：用 Web Vitals 真实用户数据定位问题，改完按 P75 指标验收；把拉新落地页 LCP 从 3.4s 降到 1.7s
• 熟悉 React 18 并发特性和 Hooks 原理，用过 Zustand、Redux Toolkit、React Query，能说清它们各自适合的场景
• 有低代码编辑器的设计经验：物料协议、iframe 画布隔离、基于 Immer patch 的撤销重做，平台每月产出 300 多个活动页
• 做过 Monorepo 改造，pnpm workspace + Turborepo 远程缓存，CI 从 20 多分钟降到 7 分钟左右
• 自研过前端监控 SDK（错误、白屏、Web Vitals），压缩后约 4KB，接入公司 30 多个项目
• 熟悉前端发布和回滚：设计过按用户尾号分桶的灰度方案，回滚时间从半小时缩到 1 分钟
• 金融场景经验：支付防重、订单幂等、金额精度、支付回跳状态丢失，支付成功率提升约 2 个百分点
• 能写 Node.js 服务，做过 BFF 和活动页预渲染服务，熟悉 Koa 和 Express
• 推动过团队规范落地：发布前检查清单、体积预算、关键接口降级预案，上线以来大促期间没有 P1 级前端事故
• 技术栈：React 18、Next.js、TypeScript、Zustand、React Query、Tailwind CSS、Vite、Turborepo、Sentry、Node.js、微信小程序

工作经历

所在的增长前端组负责活动、拉新和会员相关页面，组内 8 人。我负责活动搭建平台和核心落地页的性能。

• 活动搭建平台：负责平台的编辑器和物料体系，运营自助搭建活动页，每月产出 300 多个页面，日常运营活动基本不再需要前端开发
• 落地页性能治理：拉新落地页移动端 LCP（P75）长期在 3.4s 左右。用 Performance 面板和 Web Vitals 数据定位到三个原因：首屏大图、同步加载的第三方统计 SDK、首屏外模块打进了主包。分别做了图片换 AVIF 并按设备像素比出图、SDK 改为空闲时异步注入、非首屏模块按需加载，LCP 降到 1.7s，落地页跳出率下降约 15%
• Monorepo 改造：组内 20 多个包原来分散在不同仓库，依赖升级要逐个仓库改。迁到 pnpm workspace + Turborepo，开启远程缓存跳过未改动的包，CI 从 20 多分钟降到 7 分钟左右
• 稳定性：建立落地页发布前的检查清单（体积预算、Lighthouse 分数、关键接口降级），上线以来大促期间没有出现 P1 级前端事故

公司做互联网理财，我在 6 人前端组负责理财购买链路和公共组件。

• 负责理财产品购买和赎回 H5。统计支付失败原因后发现，重复点击和支付回跳丢失状态占了大头，补上按钮防重、订单号幂等和支付结果轮询兜底，支付成功率提升约 2 个百分点
• 设计前端灰度发布方案：静态资源按版本号上传 CDN，入口 HTML 由网关按用户尾号分桶下发，出问题时修改网关配置即可切回上个版本，回滚时间从 半小时缩短到 1 分钟
• 参与公共组件库建设，负责金额输入、验证码、协议勾选等金融场景组件，统一了键盘、精度和防重的处理

项目经历

React / TypeScript / Zustand / Node.js / iframe

面向运营的低代码平台，通过拖拽物料、配置属性和数据源来搭建活动页，发布后生成静态页面上线。

• 物料协议：设计物料协议，包含属性 Schema、事件和数据源三部分，业务组件按协议注册即可在编辑器中拖拽和配置；目前平台有 120 多个物料，由 3 个业务团队共同维护
• 样式隔离：早期画布和编辑器在同一个文档里，物料的全局样式会影响编辑器界面。改为画布放进 iframe，主窗口和画布之间通过 postMessage 同步页面配置和选中状态
• 撤销重做：页面配置用不可变数据管理，每次修改记录 patch（Immer），撤销重做只需要应用反向 patch，长时间编辑内存也比较稳定
• 发布链路：发布时用 Node.js 把页面配置预渲染成静态 HTML 上传 CDN，和原来的 SSR 方案相比少了一次服务端渲染，大促流量高峰时不会给服务端增加压力

TypeScript / Rollup / Performance API

团队自研的监控 SDK，接入了公司 30 多个前端项目，数据进公司的日志平台做告警和看板。

• 采集 JS 错误、Promise 未处理异常、资源加载错误、接口错误、白屏和 Web Vitals 指标，SDK 压缩后约 4KB
• 白屏检测：页面加载后在视口内取若干采样点，用 elementsFromPoint 判断是否只有容器节点，连续多次为空判定为白屏
• 上报做了采样、批量合并和页面关闭时 sendBeacon 兜底，上报请求量比逐条上报减少约 90%
• 错误按「消息 + 堆栈首帧」做指纹聚合，配合 Source Map 在后台还原源码位置，同一个问题不再刷屏告警

Node.js / Nginx / CDN / 网关配置中心

理财 H5 每次发版都是全量上线，出问题只能重新打包回滚，最长一次影响了 40 分钟交易。

• 静态资源按版本号目录上传 CDN 且永不覆盖，入口 HTML 不缓存，由网关根据用户尾号决定返回哪个版本的入口
• 发布流程拆成「1% → 10% → 50% → 全量」四档，每档观察监控大盘的错误率和支付成功率，异常时一键切回
• 上线一年，期间拦下 3 次有问题的版本，影响用户都控制在 1% 灰度范围内

React / Rollup / Babel / Storybook

• 沉淀 30 多个金融场景组件（金额输入、安全键盘、验证码、协议勾选、风险测评），统一了精度、防重和无障碍处理
• 组件库原来整包引入，接入方页面平白多出 200KB 的代码。改为每个组件独立入口并声明 sideEffects，配合 Tree Shaking 实现按需引入，典型页面减少约 150KB（gzip 前）
• 金额输入统一用整数分计算和展示时格式化，避免浮点误差；补齐边界单测（大额、负数、粘贴带逗号的数字）

教育经历

个人优势

• 八年前端经验，近四年带 12 人团队，负责云控制台前端（40 多个云产品），主导过微前端拆分、设计系统和质量体系三项基础建设
• 架构上能从团队协作反推技术方案：把巨石控制台拆成微前端，发布从每周一次的全员协调变成各产品按需独立发布
• 熟悉 qiankun 和 Module Federation 的原理与取舍，处理过沙箱样式泄漏、共享依赖版本冲突、子应用预加载等实际问题
• 推动过跨职能的设计系统：设计规范、Design Token、组件库、Figma 组件四件套，覆盖 6 条产品线
• 建立前端质量门禁（单测覆盖率、体积预算、Lighthouse、接口契约检查）和值班机制，线上故障数同比下降约 60%
• 移动端有深度经验：设计过 Hybrid 离线包方案，命中率 96%，司机端页面秒开率从六成多提到九成以上
• 熟悉编译工具链，写过 Babel 插件和 ESLint 规则，用 codemod 批量完成过 2000 多个文件的组件库大版本升级
• 能写服务端：用 NestJS 做过 BFF 和研发效能平台，熟悉 Docker 和 Kubernetes 上的部署与灰度
• 带人有方法：建立技术方案评审、Code Review 和季度分享机制，两年内 4 人晋升，核心成员没有流失
• 保持一线编码，每个季度至少负责一个关键模块的实现，技术判断不脱离代码
• 技术栈：React 18、Vue 3、Next.js、TypeScript、qiankun / Module Federation、Webpack、Vite、Playwright、Node.js（NestJS）、Docker / Kubernetes

工作经历

负责云控制台前端，控制台承载计算、存储、网络等 40 多个云产品，由各产品团队共同开发。

• 微前端架构：控制台原来是一个巨石应用，任何一个产品发版都要全量构建，一次发布要协调所有团队，构建一次 20 多分钟。主导拆分为微前端，各产品独立开发、独立发布，发布频率从每周一次变为按需随时发布
• 设计系统：推动设计和前端共建设计系统（设计规范、Design Token、组件库、Figma 组件），覆盖 6 条产品线；组件库作为唯一的 UI 基础，表单、表格等交互在各产品间保持一致
• 质量保障：建立前端质量门禁（单测覆盖率、包体积预算、Lighthouse 分数、接口契约检查），接入线上监控和值班机制，控制台前端线上故障数同比下降约 60%
• 团队管理：管理 12 人团队，负责招聘、技术规划和绩效。建立技术方案评审、Code Review 和季度技术分享机制；两年内团队有 4 人晋升，核心成员没有流失

司机端前端组，负责司机 App 内的 H5 页面和运营后台，组内 9 人。

• Hybrid 性能优化：司机端大量页面是 App 内嵌 H5，弱网下打开很慢。设计离线包方案，页面秒开率从约 六成提升到九成以上（详见项目经历）
• 前端 BFF：司机端一个页面要调五六个后端接口，字段多且冗余。设计 Node.js BFF 层统一做鉴权、接口聚合和字段裁剪，前端调用的接口数减少约三分之一，首屏接口耗时明显下降
• 负责司机端前端技术栈从 jQuery 迁移到 React，制定迁移规范和公共组件，新老页面并行运行半年后完成切换

项目经历

qiankun / Module Federation / React / TypeScript

• 主子应用职责划分：主应用负责登录态、顶部导航、菜单、权限和公共布局，子应用通过约定的生命周期接入，只关心自己的业务页面
• 应用间通信：全局状态只向子应用暴露只读快照和事件通道，子应用之间不允许直接引用，避免出现隐式耦合导致无法独立发布
• 依赖共享：React、组件库等公共依赖通过 Module Federation 共享，子应用平均产物体积减少 四成多；共享依赖的版本由主应用统一管理，升级时有兼容性检查
• 加载体验：按菜单点击热度预加载子应用资源，子应用加载失败时展示降级页并上报；子应用切换耗时从 1 秒多降到 300ms 左右

React / Design Token / Storybook / Figma / Playwright

6 条产品线原来各有一套组件，同样是表格，筛选和分页的交互各不相同，客户在产品间切换要重新适应。

• 和设计团队一起定义 Design Token（颜色、间距、圆角、字号），Figma 和代码共用一份 Token 源文件，改一次两边同步
• 组件库 80 多个组件，每个组件配 Storybook 文档和 Playwright 截图回归，视觉改动在 PR 里就能看到对比
• 制定组件的废弃和迁移流程：新版本发布时附 codemod，旧 API 保留两个大版本并在控制台打印迁移提示
• 一年内 6 条产品线全部切到新组件库，设计验收中「交互不一致」类问题减少了大半

React / Node.js / CDN / JSBridge

• H5 资源打包后随 App 启动预下载，WebView 请求时优先命中本地资源，未命中再回源
• 支持增量更新（按文件哈希差分）和版本回退，出问题时服务端下发回退指令，不需要发 App 版本
• 离线包命中率 96%，页面秒开率从约六成提升到九成以上，弱网下页面打开失败的投诉明显减少

Node.js / NestJS / GitLab CI / Docker

• 统一脚手架、代码规范、发布流水线和质量门禁，新项目从创建到第一次上线只要 半天
• 提供构建产物分析和依赖升级看板，按团队展示包体积变化和过期依赖，推动各团队定期治理
• 用 Babel 插件写了一批 codemod，批量完成组件库大版本升级中的 API 迁移，改动 2000 多个文件

教育经历