简历准备阶段
在2025年初的时候，听说公司要进行人员变动的情况，感觉情况不对，就开始准备面试了，但是平时的工作比较简单，也没有深刻的思考，拿不出难点/亮点项目，写出的简历就是流水账，所以决定开始先润色简历，回顾在公司这段时间的产出，网上有很多收费的，比如，月哥，鲨鱼哥，双越老师，鱼皮... 大佬的知识星球，但是身为程序员，本着能白嫖，绝不花钱的宗旨，请我的好朋友，deepSeek，以下是我优化后的简历
各方面都有设计：前端基建建设，复杂项目攻坚，技术探索与创新，团队效能提升，结合自己的一些过往经历，这一波简历优化，我给这个 👍
技能准备阶段
就按照简历专业技能,做的大致准备
- 框架源码的准备： Vue/React
- 构建打包工具： Webpack/vite/Rollup/Tsup
- 可视化： Echarts/Three/Canvas/SVG/SVGA...
- 跨端开发：小程序/Taro/Flutter/Electron/H5跨端通信
- 性能优化：编译性能，网络性能，渲染性能...
- 技术的探索及应用：Puppeteer/rrweb/PWA/AI Agent/Nest...
- 算法：还是按照之前面试的算法，轻微的准备了一下（树拍平，再转回树，两数之和，防抖，节流，字节京东promsie顺序问题）
面试记录
外包篇
美团（外包）
听面试官的意思，主要是做ai方向的，也就是这一次面试，让我知道，现在会ai，就会有很多机会
- vue2 和vue3 响应式原理
- v-model 是怎么实现的，具体input， select 如何实现
- vue2 响应式原理有哪些弊端，哪些数组的方法改动，不会被监听到，是如何做到对数组的检测的
- 组件通讯的方式有哪些
- 手写code: tree->扁平化/ 扁平化 -> tree
- 了解过哪些AI 模型，有用过哪些
- 项目难点亮点，准备一两个
- 单点登录
- 小程序公众号授权流程
慧博（外包）
- vue 和 react虚拟dom 的区别
- 什么是 react 的可中断
- 页面打开很慢，可能是哪些问题
- react hooks 有哪些
- js 加载很慢，有哪些原因
感易智能（外包）
- AI Agent 本地搭建流程？
- 使用过程中，vue/react 的优缺点？
- webpack 和vite 的核心区别: 编译时和运行时
- vue2/vue3 的区别, vue3中封装过哪些hooks
- react 大概用到过哪些版本，react17 和 react18的升级，引入fiber 架构的原因，可中断内部是如何实现，什么时候中断节点的渲染，浏览器如何验证时间为空闲时间？
- react 常用的hooks 有哪些，react 做优化会用哪些hooks，（变量的优化，对状态的优化）
- 常用的git 命令，gitflow， merge / rebase
- tree-shaking : 讲一下原理
- 构建工具做的优化有哪些？
- npm pnpm yarn 对比。 npm 确定是扁平化的吗？ pnpm 是如何避免幽灵依赖 ？
- 响应式，大屏适配方案有哪些，优缺点分别是什么？
- 浏览器的事件循环，哪些是微任务，宏任务，async / await | 全部都是微任务吗？，还有就是一道字节的promise输出问题
- es6的...是深拷贝 / 浅拷贝 ？如果有循环引用，怎么处理？weekMap在vue的源码中有哪些体现？
说实话，以上外包面试，感易智能的面试，体验感最好，像自研的面试，而且有细节的挖掘，聊的也很愉快，薪资大概给涨10%左右，以上均面试，均得到了二面的通知，说明专业技能准备的还可以，于是我开始投递自研公司，也开始自研公司的面试
自研篇
融智通
- 盒模型： 是什么，由什么组成。加了缩进（text-indent）是否计算在盒模型
- pro组件主要用于做什么，pro-table/ pro-form 解决什么问题，怎么做的
- 封装一个button，改如何封装
- 现有项目上，如何改动，兼容到大屏开发
- canvas 绘制点，线，如何给canvas 添加点击事件
- echarts 大批量数据展示，如何绘制5万条数据
- 组合式api的优缺点
- 地图相关的封装，一个性绘制多个点，有些地图提供的都是聚合，但是我的需求是不能聚合，可以提供一下思路。绘制大量点，为什么影响性能，分析一下？
- pina vs vuex
- hooks vs minx
点点互动
- css盒模型
- 算法题：两数之和（写出三种解法）
- 异步任务队列，如何保证顺序一个一个执行。 还用过哪些promise 的静态方法，具体场景是什么
- 浏览器缓存，强缓存有什么缺点,为什么要有协商缓存
- vue3 相 vue2 有哪些升级,defineProperty 一开始有性能问题，如何避免一开始递归加响应式
- 你封装过哪些hooks, 说说你是怎么封装的
- 自研组件库，亮点难点是什么
- ts 中的泛型是什么
京东
1.vue react 虚拟 dom 的区别 2. vue react 双向绑定的区别
- 长列表如何优化渲染
- 为什么用webp， 不用png / jpg
- 视屏编码：h264 / h265
- canvas / svg的区别，分别用来做什么
- 组件库如何升级
- 项目难点亮点：起码准备三个
- 什么是离屏渲染，有什么缺点
- 性能监控，你们是怎么做的, FPS如果低，解决方案是什么， FP/
- im 消息丢包如何处理，重复数据如何处理
- cli 实现流程，解决了什么问题，有没有结合ai 做一些cli 的尝试
- 业务为主，问你做的好的项目，把最近的业务流程讲下，对当前工作的认识
- 后续你的职业生涯规划，对自己的认知，对前端发展的理解
乐信圣文
自我介绍，别的什么都没问，然后就让写一道code,然后就被KO了， 😭😭😭，这道题放在code里一起写了
code 相关题目
- 有如下结构的字典, 根据成绩输出每个班级学生的名次
{
"一班": {
"张小丙": 87,
"张小甲": 98,
"张小乙": 90
},
"二班": {
"王七六": 76,
"王九七": 97,
"胡八一": 81,
"王六零": 60,
"刘八一": 81,
"李八一": 81
}
}
markdown
题目解释
1. 分数相同的时候名次相同.
2. 当出现相同分数的情况下, 名次并不连续. 既排名在两个并列第一之后的学生名次是第三, 排名在三个并列第一之后的学生名次是第四.
3. 输出示例(不需要考虑输出顺序):
4. 后续我再提一些变动条件，你根据新的变化，重新提交代码，比如按全年级排名，名次可以连续....
一班 张小丙 第3名
一班 张小甲 第1名
一班 张小乙 第2名
二班 王七六 第5名
二班 王九七 第1名
二班 胡八一 第2名
二班 王六零 第6名
二班 刘八一 第2名
二班 李八一 第2名- 两数之和（写出三种解法）
- tree -> flat flat -> true
- 实现一个控制并发的promise，类似p-limit
code 翻外篇
面的基本没什么特别难的题目或者步骤特别多的code,因为性价比不高，难的基本都是讲思路，简单的写一写，现在大家写代码，基本都用ai,但是遇到一些需要逻辑的，自己也要多想一想步骤。要是真的准备面试，一定要熟练的使用循环，数组，字符串，去重，Map,这些，熟练这些，对简单的code,才能以不变应万变
其他面试
其实还有很多家，但是问的都是大同小异，所以后面就都没有总结
项目篇
这一趴，是大家的分水岭，因为有的孩子，根本不会哭。也不用管是什么项目，只要用上STAR 法则，就高级
面试的本质是「讲故事」
半年时间面遍美团/京东/抖音等大厂后，我悟了：面试不是答题考试，而是一场精心策划的「技术故事会」。用STAR法则包装你的经历，让每个技术决策都变成引人入胜的剧情------这才是拿offer的核心竞争力。
技术架构选型：从被动回答到主动引导
Bad Answer :
"我们选了Vue3因为比较新"
会哭的孩子这样答:
"在重构老项目时，我们遇到Vue2响应式对TS支持弱、大型项目性能下降的问题（Situation）。经过对比Vue3的Composition API和Proxy响应式（Task），我们通过渐进式迁移方案（Action），首屏性能提升40%，类型错误减少70%（Result）。现在正在探索Vite+Vue3的原子化CSS方案（Future）"
技术亮点包装：
- ✨ Vue2/3响应式原理对比：从
defineProperty的递归性能问题，到Proxy如何解决数组方法监听 - 🚀 Vite优势：用ESM实现秒级热更新，对比Webpack的bundle机制
- 🔧 分包策略：按路由分块+公共依赖提取，用
preload优化LCP指标
组件库开发：制造技术冲突
普通回答 :
"我用pnpm做了个组件库"
降维打击版:
"在维护20+中台项目时发现表格需求重复率达80%（痛点），我们通过ProTable组件封装了：
- 配置化表单（JSON Schema驱动）
- 性能优化（虚拟滚动+动态字段加载）
- 插件体系（通过
useTable暴露生命周期）
现在开发效率提升300%，顺便产出《前端组件五步封装法》内部文档（掏出手机展示GitHub Star）"
监控系统
Bad Answer:
"我们接入了Sentry做错误监控"
会哭的孩子这样答: "当线上PV突破百万时，现有监控系统出现严重漏报（每天丢失30%错误日志），且平均定位时间长达2小时（Situation）。面对业务方要求将MTTR（平均修复时间）控制在30分钟内的硬指标（Task），我们自研了分层监控体系：
-
数据采集层：改造ErrorBoundary实现错误录制（rrweb+自定义埋点）
-
传输层：开发智能节流算法（错误去重率提升60%）
-
分析层：构建错误溯源图谱（自动关联Git提交/需求文档） （Action）。最终实现关键路径错误捕获率99.8%，故障定位效率提升400%（Result）。该方案现已成为集团前端监控标准（Future）"
技术亮点包装：
✨ 错误录制黑科技： 结合rrweb实现"错误现场复现"，可还原用户操作路径（展示带操作轨迹的错误视频）
🚀 智能归因引擎：
ts
// 核心归因逻辑（引发好奇）
const trackError = (error) => {
if (isDependencyError(error)) {
autoCreateJiraTicket('第三方依赖问题')
} else if (isHighFrequency(error)) {
triggerOnCallAlert() // 自动唤醒值班同学
}
}🔧 性能权衡艺术：
-
采样策略：关键业务100%采集 vs 长尾场景1%采样
-
传输优化：Web Worker压缩日志 + 指数退避重试
低代码平台
Bad Answer:
"我们做了一个低代码平台，可以拖拽生成页面。"
会哭的孩子这样答:
「从人工搬砖到智能装配------低代码如何让前端团队产能翻倍？」
Situation（痛点冲突）:
- 公司中后台项目激增，但前端人力有限，每个表单/列表页仍需2-3天开发，业务方抱怨「等不起」
- 竞品已实现80%页面可视化搭建，而我们还在「CV工程师」模式 Task（技术挑战）:
- 3个月内落地低代码方案，覆盖60%中后台场景
- 确保生成的代码可维护、可扩展，避免沦为「屎山生成器」
Action（破局方案）:
- 协议驱动：
- 设计JSON Schema标准，一份配置同时驱动UI渲染+接口联调+权限控制
- 开发可视化编辑器，支持「AI辅助生成字段」（截图展示GPT-4生成表单配置）
- 性能保障：
- 运行时编译为React/Vue组件，避免传统低代码的「黑盒DOM操作」
- 实现「按需加载」，未使用的组件不会打包进产物（Webpack Bundle Analyzer对比图）
- 逃生舱设计：
- 允许导出标准代码，工程师可二次开发（录屏演示「一键转Vue单文件组件」）
- 内置「性能红线」，自动拦截嵌套过深的配置（错误提示截图）
Result（数据炸场）:
- 简单页面开发从3天→10分钟（行政系统数据）
- 复杂场景定制需求减少70%（产品经理感谢邮件）
- 意外收获：生成的代码竟比部分人工写的更规范（ESLint通过率对比）
以上就是面经及项目上面的总结，其实平时也是写一些基础代码，简历上面的优化，找GPT或者deepseek就可以～