负责公司核心产品矩阵（活动营销、场景化运营）的移动H5全生命周期开发，聚焦性能优化、多端适配及用户体验提效，协同产品、设计团队落地高并发活动页与可复用组件，保障业务转化与稳定性

• 主导活动类H5性能优化项目，通过Lighthouse审计定位首屏加载慢（3.2s）核心问题，采用Webpack Tree Shaking精简冗余代码、Intersection Observer实现图片懒加载、资源预加载策略，同步将Vue组件改为异步按需加载，最终首屏加载时间降至1.8s，活动转化率提升21%
• 核心参与跨端适配方案设计，针对iOS刘海屏、Android全面屏及不同DPR设备，放弃传统REM方案，改用VW+媒体查询结合动态DPR计算，解决按钮错位、图片拉伸等适配问题，覆盖Top 50机型98%，用户适配类bug反馈下降75%
• 重点优化活动H5交互流畅度，通过Chrome DevTools Performance面板分析发现列表滑动卡顿（45fps）源于长列表重排重绘，引入Virtual List虚拟列表优化渲染，配合CSS will-change: transform属性，将滑动帧率提升至60fps，用户停留时长增加30%
• 基于Vue3+Vite搭建场景化组件库，封装抽奖转盘、打卡弹窗等通用活动组件，用TypeScript定义props增强类型安全，结合Storybook编写组件文档，团队复用率达85%，同类组件开发时间从1.5天缩短至4小时

承担品牌营销H5与电商引流H5开发，聚焦跨浏览器兼容、动效实现及数据追踪，支撑市场活动快速上线与效果优化，保障业务目标达成

• 核心参与电商引流H5开发，用Axios拦截器统一处理token失效、401错误码，实现localStorage+sessionStorage双写存储购物车数据，解决用户中途退出数据丢失问题，引流转化率提升15%
• 主导商品360度旋转动效实现，结合Three.js与Touch事件处理惯性滑动、缩放逻辑，兼容iOS UIWebView与Android X5内核，动效流畅度获设计团队认可，对应页面用户点击转化率提升18%
• 搭建H5数据埋点体系，用GA4结合自定义事件追踪用户点击、滑动、分享等行为，输出《H5用户行为分析报告》，帮助市场部优化3个活动流程，平均停留时长增加25%
• 排查红米Note 9机型动效卡顿问题，通过Charles抓包发现资源加载延迟，优化TinyPNG图片压缩、UglifyJS代码压缩，调整资源加载顺序，卡顿率从30%降至5%

参与内部管理系统移动H5适配及外部合作项目H5开发，聚焦基础功能实现与跨端一致性，积累移动H5开发实战经验

• 负责内部OA系统移动H5适配，用REM+媒体查询方案解决多屏幕布局问题，优化表单组件触摸交互（自动聚焦、滑动选择），内部员工使用好评率达90%
• 参与合作项目H5开发，对接微信分享、支付宝支付SDK，处理iOS/Android平台参数差异，动态设置分享标题与图片，项目上线后无分享失败投诉
• 用Service Worker实现静态资源（CSS/JS/图片）缓存策略，二次加载时间从2.5s降至1.2s，提升用户重复访问体验
• 协助团队代码评审，检查HTML语义化（header/nav/footer替代div）、CSS BEM规范、JS避免循环引用，帮助新人提升代码质量，团队bug率下降20%

云墨直播电商平台前端架构重构与性能优化项目

• 项目背景：云墨科技直播电商业务年增速超150%，原有基于Vue2的单页应用架构难以支撑千万级日活场景——首屏加载平均3.2s、商品详情页滑动帧率低于50fps、多端（H5/小程序/APP内嵌页）重复开发率达40%。核心目标是重构前端架构，实现“高性能、低耦合、易扩展”，支撑业务峰值承载。
• 解决的关键难题：① 首屏加载慢：原有Webpack打包体积达2.1MB（gzip后），依赖冗余严重；② 复杂交互卡顿：商品详情页大量DOM操作与状态同步导致主线程阻塞；③ 多端适配成本高：各端组件重复开发，版本迭代同步困难。
• 核心行动与创新：1. 主导架构选型，替换Webpack为Vite，利用ESM原生加载特性将冷启动时间从12s缩短至3s，结合Tree-shaking与动态import实现打包体积降至900KB（gzip后）；2. 推动团队采用Vue3组合式API+Pinia状态管理，将商品详情页逻辑拆分为12个原子组合函数，组件间通信次数减少60%；3. 针对直播弹幕高频更新（每秒50-100条），用Web Worker异步处理数据解析，主线程阻塞率下降85%；4. 设计“基础组件库+多端适配层”模式，用Web Components封装通用组件，多端复用率提升至65%，减少重复开发工作量。
• 项目成果：首屏加载时间降至1.5s内（提升53%），商品详情页滑动帧率稳定在58fps以上（卡顿率下降70%）；支撑双11直播峰值日活1200万，未出现性能故障；多端开发效率提升40%，团队后续项目迭代周期缩短25%。个人主导架构设计与核心模块开发，制定《前端性能监控与优化规范》，成为团队技术标准。

云墨电商APP首页个性化推荐前端实现与体验优化项目

• 项目背景：云墨电商APP首页原推荐模块为静态配置，无法根据用户浏览/购买行为实时调整，点击转化率仅2.1%，用户停留时长不足2分钟。目标是实现“千人千面”的动态推荐，提升用户engagement与转化。
• 解决的关键难题：① 实时数据同步：用户行为变化后需及时更新推荐内容，传统轮询方式延迟高（3-5s）；② 动态组件渲染：推荐类型涵盖商品、短视频、优惠券等8种，需按需加载避免冗余；③ 性能平衡：动态渲染可能导致页面重排重绘频繁，影响流畅度。
• 核心行动与创新：1. 主动调研实时通信方案，选择WebSocket替代轮询，实现用户行为数据秒级推送，推荐内容更新延迟降至500ms内；2. 设计“推荐类型-组件映射表”，通过React loadable-components动态加载对应组件，首屏仅加载默认推荐组件，减少初始渲染压力；3. 用Intersection Observer实现图片与视频懒加载，页面加载时网络请求减少40%；4. 制定“行为-请求”防抖策略，用户滚动时每500ms聚合一次行为数据，请求次数下降55%。
• 项目成果：首页点击转化率提升至3.8%（增长81%），用户停留时长增加至3分15秒（提升30%）；页面加载时间保持在1.8s内，卡顿率下降55%。个人负责从需求分析、技术方案设计到上线的全流程，推动个性化功能落地，总结《动态组件渲染最佳实践》文档，帮助团队后续类似需求开发效率提升30%。

• 因痛心于年轻人对历史的疏离，我在B站创立「古人脱口秀」栏目，用职场梗解构历史事件（如《雍正皇帝的KPI保卫战》）。通过设计「颠覆认知-史料佐证-现代共鸣」三幕剧本模板，单期视频最高收获1.7万条弹幕互动。
• 两年间栏目播放量突破180万，作品被多地中学选为教学素材。这段经历磨砺出将学术内容转化为大众语言的能力，也让我理解到真实用户反馈才是创作者的指南针。