个人优势

• 三年前端开发经验，主要做 B 端 SaaS，负责过看板、报表、权限和审批几个完整模块，能从需求评审跟到上线复盘
• 熟悉 Vue 3 响应式和编译期优化，参与并主导了 600 多个组件从 Vue 2 迁到 Vue 3，迁移期间业务正常发版
• TypeScript 用得比较深，给团队组件库写过泛型表格、泛型表单组件，类型提示能精确到列字段
• 做过大数据量图表的性能优化：把聚合计算挪到 Web Worker，维度切换不再卡顿
• 有表单引擎的实际经验，基于 JSON Schema 做过联动、校验和可视化配置，目前承载公司 60 多个审批表单
• 重视组件沉淀，封装的表格、筛选栏、弹窗表单配了 Storybook 文档，新做一个标准列表页从两三天缩到一天以内
• 能独立写 Node.js 小服务，用 Koa 写过 BFF 接口和文件上传服务，熟悉分片上传和断点续传
• 有线上问题的排查习惯：接入 Sentry 后按接口报错、白屏、JS 异常分类告警，大部分问题当天就能发现
• 做过 uni-app 小程序，熟悉分包、图片压缩和弱网下的离线提交
• 关注可用性细节，组件默认支持键盘操作和错误状态，低配笔记本上也会自测一遍
• 技术栈：Vue 3、Pinia、Element Plus、TypeScript、Sass、Vite、Webpack、Vitest、Storybook、ECharts、uni-app、Sentry

工作经历

公司做企业级数据分析 SaaS，400 多家企业客户在用。我在 5 人前端组，负责看板、报表和权限三个模块。

• Vue 2 迁移 Vue 3：项目 600 多个组件，不能停下业务需求整体重写。先接入 @vue/compat 让项目在 Vue 3 下跑起来，再按模块逐个消除兼容层警告，Vuex 逐步换成 Pinia；两个月迁完，期间正常发版。构建换成 Vite 后本地冷启动从 40 多秒降到 5 秒，热更新基本即时
• 业务组件沉淀：把表格（列配置、分页、批量操作）、筛选栏、弹窗表单等反复写的模式封装成组件，配 Storybook 文档和示例；新做一个标准列表页从两三天缩短到 一天以内
• 错误监控：接入 Sentry，按接口报错、白屏、JS 异常三类配置企业微信告警，并把用户 ID 和租户写进上下文；之前靠客户反馈才知道的问题，现在基本当天就能发现
• 权限改造：原来按钮级权限散落在各个页面的 v-if 里，抽成 v-permission 指令和路由守卫统一处理，权限配置改为后端下发，新增角色不再需要发版

公司给连锁门店提供收银和巡店系统，我在 3 人前端组，负责门店后台和巡店小程序。

• 用 Vue 3 + Element Plus 开发门店后台的商品、库存和报表页面，独立负责了 20 多个页面的交付
• 报表导出原来是前端一次拉全量数据再拼 Excel，数据超过 5 万行浏览器直接卡死。和后端改成异步导出任务 + 下载链接，前端只负责发起和轮询进度
• 用 uni-app 开发巡店小程序（门店检查表、拍照上传、整改跟踪），门店地下室信号差，检查结果先存本地，联网后自动补交

项目经历

Vue 3 / TypeScript / ECharts / Pinia / Web Worker

客户在页面上自由组合图表、筛选维度来搭建自己的分析看板，一个看板通常有 10 到 20 个图表，单个图表的原始数据可能上万行。

• 主线程卡顿：维度切换时前端要对原始数据重新聚合（分组、求和、同比），放在主线程里一次要算 1 秒多，页面会卡住。把聚合计算移到 Web Worker，用 Transferable 传 ArrayBuffer 避免拷贝，主线程只负责渲染，切换维度时页面不再卡顿
• 图表配置化：设计看板的 JSON 配置（数据源、指标、维度、图表类型、样式），运营在界面上配置后保存，渲染端按配置生成 ECharts option；常规的看板需求不再需要前端排期
• 自适应：大屏模式和嵌入第三方页面时容器尺寸会变，统一用 ResizeObserver 监听容器并节流调用 resize，修复了全屏切换后图表尺寸错乱的问题
• 按需加载：20 个图表同时请求会把接口打满，改为视口内的图表先加载，其余进入视口时再请求，首屏接口数从 20 个降到 6 个左右

Vue 3 / JSON Schema / Monaco Editor / AJV

公司内部 OA 的审批表单原来每个都手写页面，引擎上线后用配置生成，目前承载 60 多个审批表单。

• 基于 JSON Schema 扩展表单协议，加入 x-component、x-reactions 字段描述组件类型和联动规则，联动按依赖图计算，避免循环触发
• 提供拖拽配置和源码编辑两种模式，源码模式用 Monaco Editor，接入 Schema 校验和字段名自动补全
• 校验规则前后端共用一份 Schema（前端 AJV、后端同样的 Schema 校验），避免前后端校验不一致
• 表单字段超过 100 个时输入明显卡顿，排查发现每次输入都触发整张表单的联动计算。改成只重算依赖当前字段的节点，输入恢复流畅

uni-app / Vue 3 / IndexedDB 兼容层

覆盖 300 多家门店的店长和督导，每天提交检查表 2000 份左右。

• 离线提交：检查结果和照片先写本地队列，联网后按顺序补交，重复提交用检查单 ID 做幂等；上线后「提交失败」相关的反馈基本消失
• 图片处理：一份检查表最多 30 张照片，拍照后本地压缩并加水印（门店、时间、定位），单张从 4MB 左右降到 300KB，上传耗时缩短到原来的五分之一左右
• 分包：报表和历史记录页移出主包，主包控制在 1.2MB 以内，首次打开时间明显缩短

教育经历

个人优势

• 两段前端实习（电商商家中台、在线教育），能独立完成列表、表单和移动端 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%，两次获校级二等奖学金
• 主修课程：数据结构、操作系统、计算机网络、数据库原理、编译原理
• 浙江省大学生服务外包创新应用大赛二等奖（团队前端负责人）

个人优势

• 4 年 Flutter 开发经验，负责过一款在线教育 App 的 iOS、Android 和鸿蒙三端，一套代码维护三个平台
• 混合栈开发经验丰富：Flutter 页面嵌在原生 App 里，处理过多引擎内存、页面栈同步和原生通信的问题
• 渲染性能有实战：用 DevTools 定位重建范围过大、图片解码和 Shader 编译卡顿，课堂页稳定 60 帧
• 状态管理用 Riverpod，按功能模块划分 Provider，业务逻辑可以脱离 UI 单测
• 做过直播课堂的白板和音视频互动，Platform View 嵌入原生播放器，处理了层级和手势冲突
• 关注包体积和启动速度，Flutter 产物拆分、按需加载字体和图片，安装包减少 18MB
• 技术栈：Dart、Flutter、Riverpod、Dio、Isar、Platform Channel、Kotlin、Swift、ArkTS（鸿蒙适配）、Firebase Crashlytics

工作经历

学生端 App 日活约 60 万，移动端 6 人，Flutter 负责全部学习类页面。

• 直播课堂：课堂页包含视频、白板、聊天和答题四个区域。视频用 Platform View 嵌入原生播放器，白板用 CustomPainter 绘制并按笔迹增量重绘，低端机上课堂页从 40 帧左右提升到稳定 58 帧以上
• 鸿蒙适配：参与 Flutter 鸿蒙版的适配，梳理 30 多个插件的兼容情况，自研插件用 ArkTS 重写平台端；鸿蒙版按期上架，核心功能与 iOS、Android 一致
• 离线学习：课程视频和课件支持离线下载，断点续传、存储空间不足提醒、过期自动清理；离线播放相关的投诉下降约 80%
• 包体积与启动：拆分 Flutter 产物，非首屏资源延迟加载，字体按需子集化；安装包减少 18MB，冷启动缩短约 0.4 秒

负责企业审批 App，团队 5 人，从原生迁到 Flutter 的过程中加入。

• 参与 30 多个页面从原生迁到 Flutter，迁移期间新老页面共存，统一了页面路由和登录态
• 封装审批表单的动态渲染组件，服务端下发配置即可生成表单，新审批类型无需发版
• 用 Isolate 处理大附件的压缩和上传，上传过程中界面不再卡顿

项目经历

Flutter / Kotlin / Swift / Platform Channel

• 原生和 Flutter 页面统一用 URL 路由，页面栈由原生侧管理，返回手势和转场动画两端一致
• 多个 Flutter 页面共享一个引擎，打开新的 Flutter 页面内存增量从 30MB 降到 5MB 左右
• 页面间传参和结果回传有类型约束，减少了因参数拼错导致的线上问题

Flutter / CustomPainter / WebSocket

• 老师端的笔迹通过 WebSocket 实时下发，学生端按笔画增量绘制，不重绘整个画布
• 笔迹数据做了平滑和压缩，传输量下降约 60%
• 支持课后回放：按时间轴重放笔迹，和课堂录像同步

教育经历