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

• 主导设计并实现金融行情数据实时可视化模块，基于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，获直属领导“季度进步显著员工”评价。

电商大促高并发场景前端性能优化与稳定性保障项目

• 项目背景：负责公司电商平台的双11、618大促前端支撑，2021年双11期间前端首屏加载时长超3.2秒、白屏率达8.7%，直接导致用户流失率上升15%、订单转化率下降9%。我的核心目标是主导大促前端的性能瓶颈攻关与稳定性建设，确保峰值流量（预估12万QPS）下用户体验与业务转化不受冲击。
• 关键难题：动态商品列表加载耗时占比达首屏时间的45%（主因主包体积过大与接口串行请求）；第三方资源（CDN静态资源、广告脚本）阻塞渲染；多端（PC/APP内嵌H5/小程序）兼容性引发的样式错乱与功能异常（如小程序中滚动事件失效）。
• 核心行动：1）用Webpack5模块联邦重构微前端架构，将商品详情、购物车、结算页拆分为独立子应用，主包体积从1.2MB压缩至450KB，子应用懒加载延迟控制在200ms内；2）通过Service Worker实现资源预加载（提前加载商品图片、推荐模块）与离线缓存（缓存常用静态资源），将静态资源加载成功率从92%提升至99.5%；3）针对第三方资源设计“优先级调度+懒加载”策略——核心资源（如React库）优先加载，非核心资源（如广告脚本）延迟至首屏渲染完成后加载；4）开发跨端性能监控SDK，实时预警多端样式偏移与JS错误，结合Sentry实现问题定位效率提升60%。过程中突破了Service Worker在APP内嵌H5中的注册限制，通过自定义拦截器解决了第三方脚本的资源竞争问题。
• 项目成果：2022年双11大促期间，前端首屏加载时长降至1.5秒内，白屏率低于1.2%，用户流失率下降22%，订单转化率较去年同期提升11%；主导的性能优化方案被纳入公司大促标准流程，覆盖后续618、双12等活动，年节省运维与客诉处理成本约35万元。项目成果获公司“年度技术突破奖”，相关实践被同步至集团前端技术委员会作为最佳案例分享。

企业级SaaS平台跨端组件库标准化与复用项目

• 项目背景：公司企业级SaaS平台需支持Web、移动端H5、微信/支付宝小程序三端，此前各端组件重复开发率达70%（如表单、模态框组件在三端分别实现），样式不一致问题导致用户投诉率达12%，业务团队迭代效率低（新功能需三端同步修改，周期约7天）。我的目标是建立统一跨端组件库，实现“一次开发、多端复用”，降低维护成本并提升用户体验一致性。
• 关键难题：不同端渲染引擎差异（如小程序WXML不支持Web的flex布局嵌套）；移动端H5需适配10+种屏幕尺寸（从320px到768px）；组件语义化与可维护性的平衡（避免过度抽象导致使用复杂）。
• 核心行动：1）基于Taro框架+Preact做跨端转换——利用Taro的多端编译能力将Preact组件转换为各端原生代码，解决小程序中虚拟DOM的兼容问题；2）采用原子化设计（Atomic Design）拆分组件：原子组件（如Button、Input）、分子组件（如Form、NavItem）、有机体（如Modal、Table），通过组合实现复杂功能，减少重复开发；3）用Styled Components做样式管理，支持CSS-in-JS与主题变量覆盖（如切换暗黑模式只需修改变量），实现样式隔离与定制化；4）制定《跨端组件设计规范》，涵盖accessibility（如按钮添加aria-label）、响应式布局（用rem单位适配屏幕）、错误处理（统一提示组件）等维度。过程中创新设计“组件变体”机制——通过props控制组件形态（如Input的type属性切换文本/密码类型），减少了50%的重复组件。
• 项目成果：组件库覆盖平台80%的业务场景（如客户管理、订单跟踪、数据报表），新功能开发周期从7天缩短至4天，维护成本降低35%；各端样式一致性从60%提升至95%，用户投诉率下降至3%以内；组件库被纳入公司技术中台，支撑后续3个新业务线快速上线（如供应链管理、人力资源SaaS），年节省研发人力成本约50万元。我主导编写的《跨端组件库设计指南》成为公司前端团队标准文档，相关实践在公司内部技术沙龙分享3次。

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