基本信息 - resume.ayden.ren
- 前端开发工程师
- 朱杨松 | 男 | 1996 | 苏州、上海
- 13151569970
- crayymumu
- darkexpert007@gmail.com
- 2018全日制科班本 | 七年经验
工作经历
上海领储信息咨询有限公司新能源储能行业
2022.04 ~ 至今
前端技术专家
搭建工程体系、提升团队能力、研发迭代产品
超集信息科技有限公司上市外企
2020.04 ~ 2022.04
高级前端开发工程师
维护前端通用组件库
搭建低代码开发平台
智慧芽信息科技有限公司互联网独角兽
2019.04 ~ 2020.04
高级前端开发工程师
负责 Bio / Chemical 产品的迭代
高达计算机技术有限公司传统日企
2017.07 ~ 2019.04（含实习期）
全栈开发工程师
负责前后端项目构建及维护
教育信息
- 金陵科技学院
- 软件工程 本科
- 2014.09 ~ 2018.06
技能清单
- HTML / CSS
1. 熟练使用语义化 HTML 结构，确保代码可读性和可维护性，符合 W3C 标准
2. 熟练使用 Flexbox 和 Grid 布局，能够实现复杂的多列布局和响应式设计，确保页面在不同设备上的良好表现
3. 熟练使用预处理器 Less、Sass/Scss、Stylus 等预处理器，能够实现 CSS 的模块化、变量定义和使用，提高代码可维护性
4. 深入理解浏览器渲染机制，熟悉 DOM 树构建、样式计算和布局流程
5. 具备跨浏览器兼容性开发经验，能够在常用浏览器和不同设备中实现一致的视觉效果
- TypeScript / JavaScript
1. 熟悉 TypeScript，熟练掌握如何在项目中集成其工具链，了解其高级类型
2. 熟悉 JavaScript 核心基础；掌握 ES6 常用语法
- Vue.js / Nuxt / Next / 小程序
1. 熟练掌握 Vue2、Vue3 框架，能够高效构建单页 Web 应用
2. 熟练掌握 Nuxt 和 Next 框架，用于搭建服务端渲染的 Web 应用，显著提升 SEO 表现和页面加载速度
3. 熟悉微信原生框架和 uniapp 开发，能够快速搭建并优化微信小程序
- Webpack / Vite
1. 熟练使用 Webpack 和 Vite 进行项目构建和优化，能够根据项目需求定制复杂的打包配置。
2. 熟悉 npm 和 pnpm 进行依赖管理，优化项目的依赖树，减少安装时间和体积。
- 前端工程化
1. 有过大型单页 Web 应用实战经验，处理过大规模的数据变更场景下的优化，了解前端性能优化与调试技巧
2. 具备 Jenkins 和 Gitlab Runner 的实践经验，能够从 0 到 1 搭建和维护 CI/CD 流水线，实现自动化测试和部署，提升开发效率。
3. 通过使用 Lighthouse 进行性能分析，优化前端性能，提升用户体验
4. 在团队中推广使用自动化工具（如 Husky、Lint-Staged）进行代码提交前的检查，减少了代码提交冲突。
项目经历
公司官网集群
项目地址：www.eesaenergy.com | www.eesaexpo.com
储能行业头部展会官网集群，承载展位预定、观众登记、展商管理等核心业务，日均PV 5000+。
1. 基于Next.js SSR/SSG混合渲染架构，结合CDN边缘缓存与资源预加载策略，Lighthouse Performance评分从58提升至95+，LCP控制在1.2s内
2. 自研i18n路由中间件，基于Next.js Middleware实现请求级语言检测与路径重写，配合getStaticPaths生成多语言静态页面，避免运行时切换造成的CLS抖动
3. 封装视频背景Banner组件，采用Intersection Observer实现懒加载+WebP/AVIF降级方案+骨架屏占位，消除CLS（降至0）；提取倒计时Hook与浮窗组件，通过dynamic import拆分非首屏JS，减少主包体积约40%
掌上储能生态平台
项目地址：database.handy-es.com | handy-es.com/platform | 微信小程序（掌上储能）
面向储能产业链的专业服务平台，涵盖数据库查询、企业服务和报告管理系统，支撑储能行业的信息化转型。
1. Vue.js模块化架构，基于路由级Code Splitting与Webpack魔法注释实现按需加载，首屏JS体积减少55%，TTI从4.8s降至2.1s
2. CSS变量驱动主题系统 + 容器查询实现响应式布局，通过PurgeCSS移除未使用样式，CSS体积减少60%，Lighthouse Accessibility评分达95+
3. Axios拦截器统一请求状态管理，配合骨架屏与渐进式图片加载（LQIP）策略优化感知性能，TBT降低70%
产业链可视化地图
项目地址：industrial-map.handy-es.com
储能产业链地理信息可视化平台，展示全国2000+企业分布，支持多维度数据钻取。
1. Next.js 14 App Router + RSC流式渲染，通过Suspense边界实现选择性水合，INP控制在150ms内，TTFB降低60%
2. 高德地图JS API二次封装，基于Web Worker执行点聚合算法（避免主线程阻塞），实现海量Marker的分层渲染与视口裁剪，地图交互帧率稳定60fps
3. 虚拟滚动+CSS content-visibility: auto优化万级列表，配合React.memo与useDeferredValue降低重渲染开销
数据中台与企业管理中台
项目地址：data.handy-es.com | middle-platform.eesaenergy.com
主导企业级数据中台与管理中台的前端架构设计与开发，构建统一技术底座，支撑多业务系统数据管理与协作。
1. 抽象统一技术底座（组件库二次封装、请求层、权限指令、布局模板），两个中台复用率达80%+，新业务模块搭建效率提升50%
2. 阿里云CDN externals托管核心依赖（Vue/Element Plus/ECharts），配合Vite分包策略与路由级预加载（prefetch），首屏加载体积减少70%，ECharts按需引入减少图表模块体积60%
项目经历
储能云课堂在线教育平台
项目地址：eslearning.handy-es.com | eslearning-backend.handy-es.com
面向储能行业的专业化在线教育平台，提供课程学习、视频播放和教学管理功能。
1. 基于HLS.js实现自适应码率视频播放，配合阿里云VOD转码服务，针对弱网环境实现分片预缓存与无缝降级，视频首帧加载时间控制在800ms内
2. 视频播放器组件化封装，支持播放进度持久化、防盗链Token鉴权、倍速/画中画模式，通过requestIdleCallback延迟初始化非关键模块，INP优化至120ms
3. 课程列表采用渐进式图片加载（BlurHash占位）消除布局偏移CLS≈0，路由级Code Splitting将首屏JS从1.2MB降至380KB，Lighthouse Performance 90+
展会管理系统系列
项目地址：service.eesaexpo.com | exhibitor-backend.eesaexpo.com
为展会提供完整的数字化管理解决方案，涵盖展商、搭建商等多角色业务流程管理。
1. 基于RBAC模型设计前端权限体系，通过Vue Router动态路由注册+自定义v-permission指令实现菜单/按钮/接口三级权限控制，支撑6种角色30+权限点的细粒度管控
2. 报馆审图流程引擎：基于状态机模式管理多步骤审批流转，配合WebSocket实现审批状态实时推送，流程处理效率提升40%
3. 动态表单配置系统：基于JSON Schema驱动表单渲染，支持字段联动、校验规则热更新与模板复用，新增业务表单开发周期从3天缩短至0.5天