负责金融科技领域数据可视化平台核心模块开发，涵盖实时数据渲染、交互设计及跨端适配，保障高并发场景下性能与用户体验，支撑高频交易、风险监控等业务场景的可视化需求。

• 主导设计并实现金融行情数据实时可视化模块，基于WebGL+Three.js构建动态K线图与热力图，结合D3.js完成多维度数据映射（时间序列、成交量、涨跌幅），针对百万级数据点实时渲染卡顿问题，通过实例化渲染（Instanced Rendering）与GPU加速优化，将渲染帧率从24fps提升至60fps，支撑日均10万+用户的高频交易场景，用户反馈流畅度提升显著。
• 核心参与公司可视化编辑器的交互设计，基于Vue3+TypeScript开发自定义组件库（含动态坐标轴、数据筛选器、多图联动控制器等12个高复用模块），引入Web Workers分离复杂计算逻辑（如数据聚合、坐标转换），将页面首屏加载时间从3.2s缩短至1.5s，运营人员配置复杂图表的效率提升40%。
• 优化移动端H5可视化页面适配方案，采用CSS Grid+Flexbox混合布局结合rem响应式单位，解决不同分辨率设备（iOS/Android）下图表变形问题；同步集成FastClick库消除移动端300ms点击延迟，配合触控手势库Hammer.js实现双指缩放、滑动翻页等交互，移动端用户留存率较优化前提升18%。
• 搭建可视化性能监控体系，基于Sentry+Performance API采集渲染耗时、GPU内存占用、FPS波动等20+核心指标，建立阈值告警机制（如渲染耗时超300ms触发预警），定位并修复SVG路径渲染导致的内存泄漏问题（单页面内存占用从500MB降至120MB），页面崩溃率从0.8%降至0.2%，获技术委员会年度效能优化奖。

负责企业级数据可视化平台基础功能开发与性能优化，支撑业务方数据分析、决策展示等需求，聚焦大屏可视化、多端适配及组件复用能力建设。

• 主导搭建公司级可视化组件库，基于React+ECharts封装通用图表组件30+个（含动态漏斗图、桑基图、热力地图），制定设计规范与接入文档，通过Tree-shaking优化包体积，将组件库从800KB压缩至350KB，业务线接入成本降低60%，被纳入公司技术中台标准组件库。
• 解决大屏可视化页面跨浏览器兼容性问题，针对IE11与Edge旧版本（16-18），使用Polyfill（core-js）修复SVG动画失效、Canvas绘制错位等问题，兼容性覆盖度从85%提升至98%，保障某省公安厅指挥中心大屏项目验收通过。
• 实现实时数据流可视化处理，基于WebSocket+RxJS构建数据管道，对每秒5000+条设备状态数据进行节流（throttle）、聚合（aggregate）处理，结合Canvas双缓冲技术（Double Buffering），将动态折线图渲染延迟从500ms降低至100ms，满足工业设备实时监控场景的低延迟需求。
• 主导前端可视化技术分享，输出《WebGL在金融可视化中的应用实践》《大屏多端适配全流程指南》等6篇技术文档，组织内部培训8场（覆盖团队80%成员），推动团队整体可视化开发效率提升30%，获季度“技术贡献奖”。

参与公司内部数据可视化工具开发，协助完成基础图表渲染与交互功能实现，积累WebGL、Canvas等可视化技术实战经验。

• 协助开发公司内部数据看板系统，使用HTML5 Canvas实现基础柱状图、折线图渲染，封装数据处理工具函数（支持时间范围筛选、数据同比环比计算），满足市场部、运营部日常数据查看需求，上线后日均访问量达2000+次。
• 优化图表交互体验，添加十字准星提示、图例点击联动等功能，通过事件委托（Event Delegation）减少DOM操作次数（从每次交互触发10+次DOM查询降至2次），将交互响应时间从200ms缩短至50ms，用户操作流畅度显著提升。
• 参与可视化需求评审，从技术可行性角度提出改进建议：将静态数据图标替换为动态SVG图标（通过Snap.svg库实现），减少HTTP请求（从8个/页降至2个/页），同时提升视觉一致性，被产品团队采纳后，页面加载速度提升15%。
• 学习并应用前端性能优化技巧，对看板页面进行懒加载改造，使用Intersection Observer API实现图表按需加载（首屏仅加载可见区域图表），首屏渲染时间从4s缩短至2.5s，获直属领导“季度进步显著员工”评价。

星阅数字内容平台全链路性能优化与跨端适配项目

• 项目背景：公司核心C端产品“星阅”是聚焦数字杂志与互动绘本的平台，月活超500万，但随着用户增长，首屏加载慢（平均3.2s）、Pad/折叠屏等异形设备适配差（用户投诉率12%）成为留存瓶颈。我的核心职责是作为前端技术负责人，主导全链路性能优化与跨端体验标准化落地。
• 关键难题：① 首屏加载瓶颈：JS Bundle体积高达4.1MB，静态资源（图片/字体）未做针对性压缩；② 跨端适配复杂性：不同设备的视口尺寸、交互逻辑差异大，传统媒体查询无法覆盖折叠屏分屏、Pad手写笔交互等场景；③ 性能监控缺失：缺乏构建时+运行时的全流程性能追踪工具，问题定位效率低。
• 核心行动：1. 架构拆分：采用Webpack5 Module Federation将应用拆分为“基础框架”“内容渲染”“交互组件”3个独立子应用，共享React、Redux等公共依赖，主Bundle体积降至1.8MB；2. 加载优化：集成自动化图片格式转换工具（支持WebP/AVIF自适应），结合Intersection Observer实现懒加载，字体采用WOFF2格式并延迟加载；3. 跨端方案：基于Taro3+React Native构建多端适配层，设计“弹性布局+设备特征检测”策略（识别折叠屏分屏状态、Pad手写笔压感），覆盖95%以上设备的交互与视口适配；4. 监控体系：搭建Lighthouse CI构建时审计流程，用Sentry捕获运行时加载错误，定位慢资源节点并优化。
• 项目成果：首屏加载时间降至1.5s（提升53%），跨端适配成本降低40%（从“一端一码”改为一次编码多端运行），用户留存率从35%提升至53%；主导的“模块联邦+Taro3跨端”方案被纳入公司前端架构规范，成为后续ToC产品的标准技术栈。

星析ToB数据可视化平台配置化开发体系搭建项目

• 项目背景：公司为金融/零售企业提供ToB数据可视化平台“星析”，但原有模式依赖硬编码实现定制化需求，开发周期长（平均7天/需求），且大数据量（单页面10万+数据点）下渲染卡顿（帧率24fps）。我的职责是作为高级前端工程师，搭建配置化开发体系并解决大数据渲染性能问题。
• 关键难题：① 定制化效率低：每个客户需求都要重新编写图表组件与数据逻辑，重复劳动占比60%；② 大数据渲染瓶颈：ECharts默认Canvas渲染无法承载10万+数据点，导致页面白屏；③ 组件复用性差：团队组件库缺乏分层规范，不同项目间代码冗余严重。
• 核心行动：1. 配置化框架：基于ProComponents二次开发，设计JSON Schema配置模型（包含图表类型、数据映射、交互逻辑），通过动态渲染引擎将配置转化为页面，将硬编码占比从60%降至20%；2. 大数据优化：采用ECharts WebGL渲染器替代Canvas，结合虚拟滚动技术仅渲染可视区域数据，渲染帧率提升至60fps，解决了10万+数据点的白屏问题；3. 工具链规范：用Storybook搭建组件文档系统，定义“原子组件-复合组件-业务组件”分层架构，强制要求组件接入单元测试与文档，提升复用率。
• 项目成果：定制化开发周期缩短至2天/需求（效率提升71%），大数据页面渲染无白屏，用户满意度从4.2分（满分5分）升至4.8分；团队开发效率提升50%，组件复用率从30%升至75%；该配置化方案成为公司ToB前端项目的标准开发模式，支撑了后续10+金融客户的快速交付。

支教时发现乡村小学因缺乏实验器材，科学课多停留在课本讲解。返校后联合实验室开发出百元级科学实验背包，内含20个基础实验器材。为确保可持续运营，设计配套视频课程与城乡结对系统，并培训132名大学生担任远程助教。项目覆盖9省47所学校后，学生科学兴趣评分提升35%。这段经历教会我用产品思维解决社会问题，当看到孩子们用自制望远镜发现土星光环时，我理解了教育的真谛是点燃可能性。