负责企业级数据可视化平台的前端架构设计与核心功能开发，聚焦高性能图表渲染、复杂交互逻辑实现及多端适配，协同数据与产品团队完成金融、工业等多领域可视化场景落地。

• 主导设计金融数据驾驶舱前端架构，基于Vue3+TypeScript重构旧版React技术栈，引入Web Workers分离数据处理与UI渲染线程，结合ECharts的自定义系列优化数据映射逻辑，将千万级数据看板的平均加载时间从3.2s压缩至1.1s，FPS稳定在60帧以上，用户操作卡顿投诉率下降72%。
• 针对工业设备监控场景的大规模节点渲染需求（单屏超10万+设备状态点），突破传统SVG渲染瓶颈，采用WebGL+Canvas混合渲染方案，通过自定义Shader优化着色器计算，实现设备状态实时更新延迟低于80ms，关键指标（在线率、故障率）可视化准确率达100%。
• 构建可视化组件库，封装30+高复用性图表插件（含动态桑基图、可交互热力图），支持主题切换、数据联动等扩展能力，覆盖90%业务场景需求，团队开发同类功能的时间从3人日缩短至0.5人日，组件复用率提升至85%。
• 解决实时数据同步难题，基于WebSocket+Protobuf设计增量更新协议，实现图表数据秒级推送与局部重绘，支撑运营大屏的实时监控需求，经压测验证单节点可承载5000+并发连接，全年故障停机时间小于0.5小时。

承担电商与物流数据可视化平台的前端开发，负责3D场景搭建、移动端适配及用户行为分析可视化模块落地，保障业务数据的高效呈现与交互体验。

• 使用Three.js+物理引擎（Cannon.js）开发3D商品陈列场景，模拟货架空间布局与用户浏览路径，结合鼠标/触摸交互事件实现商品旋转、缩放查看，上线后对应页面用户停留时长从45s提升至56s，转化线索收集量增长25%。
• 优化移动端H5可视化页面适配方案，采用REM基准值+媒体查询动态调整策略，结合Flex布局解决不同分辨率下的元素错位问题，兼容95%主流机型（iOS 12+/Android 9+），页面渲染错误率从8%降至1.2%，用户反馈满意度提升30%。
• 设计用户行为路径可视化模块，基于D3.js力导向图展示用户从浏览到下单的全链路节点，通过颜色编码与宽度渐变突出关键转化环节，辅助运营团队定位流失率最高的“加购-支付”阶段，推动优化支付流程后转化率提升18%。
• 协同后端团队实现数据埋点可视化看板，通过Axios拦截请求自动采集事件数据，结合ECharts的时间轴组件展示用户行为时序特征，支持按渠道、设备维度筛选，日均处理数据量达500万条，报表生成效率提升60%。

参与企业官网及内部管理系统的可视化模块开发，负责基础图表实现、性能优化及组件文档沉淀，积累前端可视化工程化经验。

• 独立完成企业官网数据可视化板块开发，使用ECharts实现销售趋势折线图、区域销售热力图等6类基础图表，通过CSS变量控制主题色切换，确保跨浏览器（Chrome/Firefox/Safari最新版）渲染一致性，上线后用户对数据展示清晰度的评分从4.1分（满分5分）提升至4.7分。
• 优化静态图表加载性能，通过图片懒加载（Intersection Observer API）与SVG雪碧图技术，将首屏图表资源体积减少20%，页面完全加载时间从2.8s缩短至2.4s，Google PageSpeed Insights评分从78分提升至89分。
• 编写可视化组件使用文档，整理ECharts配置项速查表、常见问题解决方案（如图例重叠、提示框错位），配套录制3个操作演示视频，文档被纳入公司前端知识库核心资产，新成员掌握基础图表开发的周期从5天缩短至2天。

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

• 项目背景：公司核心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+金融客户的快速交付。

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