模拟面试 - 大纲

自我介绍

• 名称、毕业、专业
• 工作经历：
  • 16 开始从事前端开发
  • 19 年开始担任前端负责人的角色
  • 从 21 年进入大疆前端团队
  • 简单介绍项目亮点
    • 用户
    • 技术突破奖
• 问项目则细化
• 能力 ... 工程化能力/复杂系统/组件化/性能优化/团队协作/跨部门沟通？？？

项目

用户中心重构（2022.02-2022.9）

• 项目背景 （突出棘手点）
  • vue2 技术栈、比较古老
  • pc 端 + 移动端 两套代码
  • 怎么考量的 - （跳出技术角度， 从产品角度 - 前端负责人！！！）
    • 梳理了用户中心的业务/承载了 1000w 的用户+100w 的数据量 / 谨慎
    • 人力安排， 给予现有逻辑重构，规避风险
    • 基于多端 -> 响应式设计
    • 做方案的时候，列出待解决问题
    • 资源处理 - 资源加载 - 交互优化
    • 最终反馈 （业务价值）
• 做了什么事
  • 打包优化
  • 排查性能瓶颈 -> 联合运维同时升级 TLS 1.3 + http/2.0
  • 图片格式升级 webP + 兜底方案
  • ui 重构
• 价值
  • 登录转化率提升 18%，客诉率下降 12%
  • 维护成本降低 50%

打包优化怎么实现的？

• 1、突出一遍问题
  • 体积大，首屏加载慢
• 2、结合项目背景
  • 老项目，依赖冗余，core-js 体积大
• 3、解决方案
  • core-js 精简（browserslist + useBuiltIns: usage）
  • css 优化（按需加载 + tree shaking）
  • 字体压缩（woff2 格式 + 子集化）

更快的加载怎么实现的？

• 1、突出一遍问题
  • 首屏加载慢，用户体验差
• 2、结合项目背景
  • ..
• 3、解决方案
  • ..

js 加载顺序怎么实现的？

• 1、突出一遍问题
  • ...
• 2、结合项目背景
  • ..
• 3、解决方案
  • ..

webP - 图片格式, 怎么兜底处理？

• 1、突出一遍问题
  • ...
• 2、结合项目背景
  • ..
• 3、解决方案
  • ..

售后 RMS 系统重构（2022.10-2024.04）

• 项目背景
  • crm 系统，jquery 语言，项目重构
  • 项目庞大，难以维护、开发效率低
  • 推动技术栈统一 + ui 库统一
• 做了什么事
  • eslint 规范制定
  • 业务组件高可用
  • 低代码平台接入落地
• 价值
  • 开发效率提升 30%
  • ui 统一，bug 率下降 25%

eslint 规范制定怎么实现的？

• 1、突出一遍问题
  • ...
• 2、结合项目背景
  • ..
• 3、解决方案
  • ..

业务组件高可用怎么实现的？

• 1、突出一遍问题
  • ...
• 2、结合项目背景
  • ..
• 3、解决方案
  • ..

低代码平台接入落地怎么实现的？

• 1、突出一遍问题
  • ...
• 2、结合项目背景
  • ..
• 3、解决方案
  • ..

跨平台公告插件系统（2023.02-2023.03）

• 项目背景
  • 内部发版机制缺少发版公告
  • 需要极简、跨平台、易接入
• 做了什么事
  • 设计 token 模式，统一接入规范
  • 热插拔架构设计
  • rollup 打包，preact 信号机制
  • 多模式植入方案（CDN/Iframe/Esm）
• 价值
  • 跨系统标准化接入，维护成本大幅降低
  • 紧急公告触达率 100%

多模式植入方案是怎么设计的？

• 1、突出一遍问题
  • ...
• 2、结合项目背景
  • ..
• 3、解决方案
  • ..

为什么选择 preact？

• 1、突出一遍问题
  • ...
• 2、结合项目背景
  • ..
• 3、解决方案
  • ..

为什么选择 rollup 打包？

• 1、突出一遍问题
  • ...
• 2、结合项目背景
  • ..
• 3、解决方案
  • ..

devops 平台维护（2021.06-至今）

• 项目背景
  • 内部 devops 平台，支撑研发流水线
  • 需要持续迭代与维护
• 做了什么事
  • 持续迭代功能
  • 优化用户体验
  • 处理线上问题
• 价值
  • 保证研发流水线稳定运行
  • 提升研发效率

docker 流水线自动化部署事怎么实现的？

• 1、突出一遍问题
  • ...
• 2、结合项目背景
  • ..
• 3、解决方案
  • ..

XDR 系统 - 魔方大屏 + 报表（2023.05-2024.04）

• 项目背景
  • 大数据可视化系统，支撑安全运营
  • 需要高性能渲染与交互
• 做了什么事
  • 开发魔方大屏组件
  • 优化数据报表性能
  • _ 开发报表定时报表功能 _
• 价值
  • 提升安全运营效率
  • 降低系统资源消耗

报表定时报表功能怎么实现的？

• 1、突出一遍问题
  • ...
• 2、结合项目背景
  • ..
• 3、解决方案
  • ..

RULES

• 背景 - 尽量简短
• 出发点 - 技术负责人的角度
• 突出 业务价值
• 自我定义 - 高级前端开发工程师 / 前端负责人
• 突出能力 - 工程化能力/复杂系统/组件化/性能优化/团队协作/跨部门沟通