个人优势

• 两段前端实习（电商商家中台、在线教育），能独立完成列表、表单和移动端 H5，改动会配单测和性能数据验证
• JavaScript 基础扎实，能讲清事件循环、原型链、闭包和 this 绑定，手写过 Promise、防抖节流、深拷贝等常见实现
• 读过 React 调度器（Scheduler）和 Vue 3 响应式部分的源码，写过一篇 Fiber 可中断渲染的分析文章，掘金阅读 1.4 万
• 维护开源虚拟滚动表格 react-virtual-table，GitHub 1.2k Star，处理过 40 多个 issue，熟悉 npm 包的构建、发布和语义化版本
• 做过性能优化的完整闭环：先用 Performance 面板和 Lighthouse 定位，再改，再用数据对比，实习中把订单列表首屏图片请求从 80 多个降到 30 个左右
• 熟悉移动端兼容问题，整理过 14 条 iOS / 安卓 WebView 的常见坑和解决方案，被实习团队收进新人文档
• 会写简单的 Node.js 服务，用 Koa + MySQL 给课程项目写过接口，能和后端顺畅对接口
• 习惯写测试和文档：实习期间给 20 多个工具函数补了 Vitest 单测，顺带发现了一个日期时区的线上问题
• 英语 CET-6，能直接阅读 React、Vite 的英文文档和 GitHub issue
• 技术栈：JavaScript、TypeScript、React 18、Vue 3、Zustand、Vite、Webpack、Vitest、Node.js（Koa）、MySQL

实习经历

所在团队负责商家后台（订单、商品、售后），日活商家约 8 万，技术栈 React 18 + TypeScript + Ant Design。

• 参与订单中心重构。原来订单列表、退款列表、发货列表 3 个页面各写了一套筛选表单，逻辑有出入，经常改一处漏两处；我把筛选项抽成配置（字段、组件类型、默认值、联动规则），封装 SearchForm 组件统一渲染，后续新增筛选项只改配置
• 订单列表一页 200 行，每行最多 6 张商品图，首屏图片请求 80 多个，弱网下列表要转好几秒。改为 IntersectionObserver 懒加载，并给图片 URL 拼上 OSS 缩放参数按显示尺寸取图，首屏图片请求降到 30 个左右，图片总流量减少约 70%
• 给金额计算、日期格式化等 20 多个工具函数补了 Vitest 单测，过程中发现一个按 UTC 解析日期导致「下单时间少一天」的线上问题，修复后补了时区相关的用例
• 参与每周的 Code Review，整理了一份团队 React Hooks 常见问题清单（闭包拿到旧值、effect 依赖遗漏、列表 key 用 index 等），被组里拿来做新人文档

• 用 Vue 3 + Vite 开发课程报名 H5，负责报名表单、微信支付回跳和分享海报。海报用 html2canvas 生成，处理了跨域图片导致画布被污染、iOS 上生成的图片模糊（按 devicePixelRatio 放大绘制）两个问题
• 处理 iOS 软键盘弹起遮挡输入框、安卓 WebView 下 100vh 包含地址栏导致底部按钮被挡等兼容问题，整理成团队的移动端兼容问题文档，共 14 条，每条附复现机型和解决方案
• 报名页转化埋点原来只有 PV，补上表单每一步的停留和放弃事件后发现「选择上课时间」一步流失最多，配合产品把时间选择改成默认推荐最近一期，报名转化提升约 8%

项目经历

React / TypeScript / Rollup / Vitest

面向后台场景的高性能表格组件，支持 10 万行数据流畅滚动，npm 周下载量 3000 左右，GitHub 1.2k Star，被两家公司的内部项目使用。

• 动态行高：行高不固定时无法直接算出可视区起点。先用预估高度渲染，再用 ResizeObserver 回填真实高度，维护行高前缀和数组，滚动时二分查找起始行，查找复杂度 O(log n)
• 滚动不白屏：在可视区上下各多渲染一屏作为缓冲，快速拖动滚动条时用 requestAnimationFrame 合并滚动事件，避免一帧内多次重排
• 固定列：左右固定列用 position: sticky 实现，不再拆成三张表同步滚动，代码量和滚动抖动都少了很多
• 工程化：Rollup 同时输出 ESM 和 CJS，配置 exports 字段和类型声明，支持 Tree Shaking；GitHub Actions 跑单测和体积检查，PR 体积增长超过 5% 会提示

React / Canvas / WebSocket / Yjs

三人小组的课程设计，支持多人同时画图、移动和删除图形，我负责画布渲染和协同同步部分，课程评分 优秀。

• 用 Yjs 管理白板数据，多人同时修改同一个图形时由 CRDT 自动合并，不需要自己写冲突处理
• Canvas 分三层绘制（背景网格、图形、选中框），拖动图形时只重绘选中层和图形层，200 个图形下拖动保持 60fps
• 断线重连后用 Yjs 的状态向量只同步缺失的更新，不重新拉全量数据；在弱网模拟下断开 30 秒再恢复，画布内容能正确合并

微信小程序 / 云开发 / TypeScript

和两位同学一起做的校内二手交易小程序，上线一学期注册用户 2600 多人，成交 900 多单。我负责前端和商品搜索。

• 商品列表图片多，低端机上滑动掉帧。用分页加载 + 图片按可视区懒加载，长列表超过 200 条时回收顶部节点，滑动基本不卡
• 发布商品时图片先在本地压缩到 1080 宽再上传，单张从 3~5MB 降到 300KB 左右，上传失败率明显下降
• 搜索在云函数里做分词和同义词扩展（如「自行车」「单车」），无结果率从约三成降到一成左右

教育经历

• GPA 3.7 / 4.0，专业排名前 15%，两次获校级二等奖学金
• 主修课程：数据结构、操作系统、计算机网络、数据库原理、编译原理
• 浙江省大学生服务外包创新应用大赛二等奖（团队前端负责人）

个人优势

• 两段前端实习（电商商家中台、在线教育），能独立完成列表、表单和移动端 H5，改动会配单测和性能数据验证
• JavaScript 基础扎实，能讲清事件循环、原型链、闭包和 this 绑定，手写过 Promise、防抖节流、深拷贝等常见实现
• 读过 React 调度器（Scheduler）和 Vue 3 响应式部分的源码，写过一篇 Fiber 可中断渲染的分析文章，掘金阅读 1.4 万
• 维护开源虚拟滚动表格 react-virtual-table，GitHub 1.2k Star，处理过 40 多个 issue，熟悉 npm 包的构建、发布和语义化版本
• 做过性能优化的完整闭环：先用 Performance 面板和 Lighthouse 定位，再改，再用数据对比，实习中把订单列表首屏图片请求从 80 多个降到 30 个左右
• 熟悉移动端兼容问题，整理过 14 条 iOS / 安卓 WebView 的常见坑和解决方案，被实习团队收进新人文档
• 会写简单的 Node.js 服务，用 Koa + MySQL 给课程项目写过接口，能和后端顺畅对接口
• 习惯写测试和文档：实习期间给 20 多个工具函数补了 Vitest 单测，顺带发现了一个日期时区的线上问题
• 英语 CET-6，能直接阅读 React、Vite 的英文文档和 GitHub issue
• 技术栈：JavaScript、TypeScript、React 18、Vue 3、Zustand、Vite、Webpack、Vitest、Node.js（Koa）、MySQL

实习经历

所在团队负责商家后台（订单、商品、售后），日活商家约 8 万，技术栈 React 18 + TypeScript + Ant Design。

• 参与订单中心重构。原来订单列表、退款列表、发货列表 3 个页面各写了一套筛选表单，逻辑有出入，经常改一处漏两处；我把筛选项抽成配置（字段、组件类型、默认值、联动规则），封装 SearchForm 组件统一渲染，后续新增筛选项只改配置
• 订单列表一页 200 行，每行最多 6 张商品图，首屏图片请求 80 多个，弱网下列表要转好几秒。改为 IntersectionObserver 懒加载，并给图片 URL 拼上 OSS 缩放参数按显示尺寸取图，首屏图片请求降到 30 个左右，图片总流量减少约 70%
• 给金额计算、日期格式化等 20 多个工具函数补了 Vitest 单测，过程中发现一个按 UTC 解析日期导致「下单时间少一天」的线上问题，修复后补了时区相关的用例
• 参与每周的 Code Review，整理了一份团队 React Hooks 常见问题清单（闭包拿到旧值、effect 依赖遗漏、列表 key 用 index 等），被组里拿来做新人文档

• 用 Vue 3 + Vite 开发课程报名 H5，负责报名表单、微信支付回跳和分享海报。海报用 html2canvas 生成，处理了跨域图片导致画布被污染、iOS 上生成的图片模糊（按 devicePixelRatio 放大绘制）两个问题
• 处理 iOS 软键盘弹起遮挡输入框、安卓 WebView 下 100vh 包含地址栏导致底部按钮被挡等兼容问题，整理成团队的移动端兼容问题文档，共 14 条，每条附复现机型和解决方案
• 报名页转化埋点原来只有 PV，补上表单每一步的停留和放弃事件后发现「选择上课时间」一步流失最多，配合产品把时间选择改成默认推荐最近一期，报名转化提升约 8%

项目经历

React / TypeScript / Rollup / Vitest

面向后台场景的高性能表格组件，支持 10 万行数据流畅滚动，npm 周下载量 3000 左右，GitHub 1.2k Star，被两家公司的内部项目使用。

• 动态行高：行高不固定时无法直接算出可视区起点。先用预估高度渲染，再用 ResizeObserver 回填真实高度，维护行高前缀和数组，滚动时二分查找起始行，查找复杂度 O(log n)
• 滚动不白屏：在可视区上下各多渲染一屏作为缓冲，快速拖动滚动条时用 requestAnimationFrame 合并滚动事件，避免一帧内多次重排
• 固定列：左右固定列用 position: sticky 实现，不再拆成三张表同步滚动，代码量和滚动抖动都少了很多
• 工程化：Rollup 同时输出 ESM 和 CJS，配置 exports 字段和类型声明，支持 Tree Shaking；GitHub Actions 跑单测和体积检查，PR 体积增长超过 5% 会提示

React / Canvas / WebSocket / Yjs

三人小组的课程设计，支持多人同时画图、移动和删除图形，我负责画布渲染和协同同步部分，课程评分 优秀。

• 用 Yjs 管理白板数据，多人同时修改同一个图形时由 CRDT 自动合并，不需要自己写冲突处理
• Canvas 分三层绘制（背景网格、图形、选中框），拖动图形时只重绘选中层和图形层，200 个图形下拖动保持 60fps
• 断线重连后用 Yjs 的状态向量只同步缺失的更新，不重新拉全量数据；在弱网模拟下断开 30 秒再恢复，画布内容能正确合并

微信小程序 / 云开发 / TypeScript

和两位同学一起做的校内二手交易小程序，上线一学期注册用户 2600 多人，成交 900 多单。我负责前端和商品搜索。

• 商品列表图片多，低端机上滑动掉帧。用分页加载 + 图片按可视区懒加载，长列表超过 200 条时回收顶部节点，滑动基本不卡
• 发布商品时图片先在本地压缩到 1080 宽再上传，单张从 3~5MB 降到 300KB 左右，上传失败率明显下降
• 搜索在云函数里做分词和同义词扩展（如「自行车」「单车」），无结果率从约三成降到一成左右

教育经历

• GPA 3.7 / 4.0，专业排名前 15%，两次获校级二等奖学金
• 主修课程：数据结构、操作系统、计算机网络、数据库原理、编译原理
• 浙江省大学生服务外包创新应用大赛二等奖（团队前端负责人）

个人优势

• 四年前端开发经验，做过社交平台的增长业务和金融 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 前）
• 金额输入统一用整数分计算和展示时格式化，避免浮点误差；补齐边界单测（大额、负数、粘贴带逗号的数字）

教育经历