搜索
  • 五年前端牛马总结：终于知道了会哭的孩子有奶吃
  • 发布于 1周前
  • 7 热度
    0 评论
  • 科叼
  • 2 粉丝 165 篇博客
  •   

简历准备阶段

在2025年初的时候，听说公司要进行人员变动的情况，感觉情况不对，就开始准备面试了，但是平时的工作比较简单，也没有深刻的思考，拿不出难点/亮点项目，写出的简历就是流水账，所以决定开始先润色简历，回顾在公司这段时间的产出，网上有很多收费的，比如，月哥，鲨鱼哥，双越老师，鱼皮... 大佬的知识星球，但是身为程序员，本着能白嫖，绝不花钱的宗旨，请我的好朋友，deepSeek，以下是我优化后的简历

各方面都有设计：前端基建建设，复杂项目攻坚，技术探索与创新，团队效能提升，结合自己的一些过往经历，这一波简历优化，我给这个 👍

技能准备阶段

就按照简历专业技能,做的大致准备

  1. 框架源码的准备： Vue/React
  2. 构建打包工具： Webpack/vite/Rollup/Tsup
  3. 可视化： Echarts/Three/Canvas/SVG/SVGA...
  4. 跨端开发：小程序/Taro/Flutter/Electron/H5跨端通信
  5. 性能优化：编译性能，网络性能，渲染性能...
  6. 技术的探索及应用：Puppeteer/rrweb/PWA/AI Agent/Nest...
  7. 算法：还是按照之前面试的算法，轻微的准备了一下（树拍平，再转回树，两数之和，防抖，节流，字节京东promsie顺序问题）


面试记录

外包篇


美团（外包）

听面试官的意思，主要是做ai方向的，也就是这一次面试，让我知道，现在会ai，就会有很多机会

  1. vue2 和vue3 响应式原理
  2. v-model 是怎么实现的，具体input， select 如何实现
  3. vue2 响应式原理有哪些弊端，哪些数组的方法改动，不会被监听到，是如何做到对数组的检测的
  4. 组件通讯的方式有哪些
  5. 手写code: tree->扁平化/ 扁平化 -> tree
  6. 了解过哪些AI 模型，有用过哪些
  7. 项目难点亮点，准备一两个
  8. 单点登录
  9. 小程序公众号授权流程


慧博（外包）

  1. vue 和 react虚拟dom 的区别
  2. 什么是 react 的可中断
  3. 页面打开很慢，可能是哪些问题
  4. react hooks 有哪些
  5. js 加载很慢，有哪些原因


感易智能（外包）

  1. AI Agent 本地搭建流程？
  2. 使用过程中，vue/react 的优缺点？
  3. webpack 和vite 的核心区别: 编译时和运行时
  4. vue2/vue3 的区别, vue3中封装过哪些hooks
  5. react 大概用到过哪些版本，react17 和 react18的升级，引入fiber 架构的原因，可中断内部是如何实现，什么时候中断节点的渲染，浏览器如何验证时间为空闲时间？
  6. react 常用的hooks 有哪些，react 做优化会用哪些hooks，（变量的优化，对状态的优化）
  7. 常用的git 命令，gitflow， merge / rebase
  8. tree-shaking : 讲一下原理
  9. 构建工具做的优化有哪些？
  10. npm pnpm yarn 对比。 npm 确定是扁平化的吗？ pnpm 是如何避免幽灵依赖 ？
  11. 响应式，大屏适配方案有哪些，优缺点分别是什么？
  12. 浏览器的事件循环，哪些是微任务，宏任务，async / await | 全部都是微任务吗？，还有就是一道字节的promise输出问题
  13. es6的...是深拷贝 / 浅拷贝 ？如果有循环引用，怎么处理？weekMap在vue的源码中有哪些体现？


说实话，以上外包面试，感易智能的面试，体验感最好，像自研的面试，而且有细节的挖掘，聊的也很愉快，薪资大概给涨10%左右，以上均面试，均得到了二面的通知，说明专业技能准备的还可以，于是我开始投递自研公司，也开始自研公司的面试。


技术大厂跳板→机遇，前端-后端-测试，待遇和稳定性都还可以，感兴趣尝试下~


自研篇


融智通

  1. 盒模型： 是什么，由什么组成。加了缩进（text-indent）是否计算在盒模型
  2. pro组件主要用于做什么，pro-table/ pro-form 解决什么问题，怎么做的
  3. 封装一个button，改如何封装
  4. 现有项目上，如何改动，兼容到大屏开发
  5. canvas 绘制点，线，如何给canvas 添加点击事件
  6. echarts 大批量数据展示，如何绘制5万条数据
  7. 组合式api的优缺点
  8. 地图相关的封装，一个性绘制多个点，有些地图提供的都是聚合，但是我的需求是不能聚合，可以提供一下思路。绘制大量点，为什么影响性能，分析一下？
  9. pina vs vuex
  10. hooks vs minx


点点互动

  1. css盒模型
  2. 算法题：两数之和（写出三种解法）
  3. 异步任务队列，如何保证顺序一个一个执行。 还用过哪些promise 的静态方法，具体场景是什么
  4. 浏览器缓存，强缓存有什么缺点,为什么要有协商缓存
  5. vue3 相 vue2 有哪些升级,defineProperty 一开始有性能问题，如何避免一开始递归加响应式
  6. 你封装过哪些hooks, 说说你是怎么封装的
  7. 自研组件库，亮点难点是什么
  8. ts 中的泛型是什么


京东

1.vue react 虚拟 dom 的区别 2. vue react 双向绑定的区别

  1. 长列表如何优化渲染
  2. 为什么用webp， 不用png / jpg
  3. 视屏编码：h264 / h265
  4. canvas / svg的区别，分别用来做什么
  5. 组件库如何升级
  6. 项目难点亮点：起码准备三个
  7. 什么是离屏渲染，有什么缺点
  8. 性能监控，你们是怎么做的, FPS如果低，解决方案是什么， FP/
  9. im 消息丢包如何处理，重复数据如何处理
  10. cli 实现流程，解决了什么问题，有没有结合ai 做一些cli 的尝试
  11. 业务为主，问你做的好的项目，把最近的业务流程讲下，对当前工作的认识
  12. 后续你的职业生涯规划，对自己的认知，对前端发展的理解


乐信圣文

自我介绍，别的什么都没问，然后就让写一道code,然后就被KO了， 😭😭😭，这道题放在code里一起写了

code 相关题目

  1. 有如下结构的字典, 根据成绩输出每个班级学生的名次 
"一班": {
    "张小丙": 87,
    "张小甲": 98,
    "张小乙": 90
  },
  "二班": {
    "王七六": 76,
    "王九七": 97,
    "胡八一": 81,
    "王六零": 60,
    "刘八一": 81,
    "李八一": 81
  }
}




题目解释
1. 分数相同的时候名次相同.
2. 当出现相同分数的情况下, 名次并不连续. 既排名在两个并列第一之后的学生名次是第三, 排名在三个并列第一之后的学生名次是第四.
3. 输出示例(不需要考虑输出顺序):
4. 后续我再提一些变动条件，你根据新的变化，重新提交代码，比如按全年级排名，名次可以连续....

一班 张小丙 第3名
一班 张小甲 第1名
一班 张小乙 第2名
二班 王七六 第5名
二班 王九七 第1名
二班 胡八一 第2名
二班 王六零 第6名
二班 刘八一 第2名
二班 李八一 第2名
  1. 两数之和（写出三种解法）
  2. tree -> flat flat -> true
  3. 实现一个控制并发的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组件封装了：

  1. 配置化表单（JSON Schema驱动）
  2. 性能优化（虚拟滚动+动态字段加载）
  3. 插件体系（通过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实现"错误现场复现"，可还原用户操作路径（展示带操作轨迹的错误视频）

🚀 智能归因引擎： 

// 核心归因逻辑（引发好奇）
const trackError = (error) => {
  if (isDependencyError(error)) {
    autoCreateJiraTicket('第三方依赖问题')
  } else if (isHighFrequency(error)) {
    triggerOnCallAlert() // 自动唤醒值班同学
  }
}

🔧 性能权衡艺术：

  • 采样策略：关键业务100%采集 vs 长尾场景1%采样

  • 传输优化：Web Worker压缩日志 + 指数退避重试

低代码平台


Bad Answer:

"我们做了一个低代码平台，可以拖拽生成页面。"

会哭的孩子这样答:

「从人工搬砖到智能装配——低代码如何让前端团队产能翻倍？」

Situation（痛点冲突）:

  1. 公司中后台项目激增，但前端人力有限，每个表单/列表页仍需2-3天开发，业务方抱怨「等不起」
  2. 竞品已实现80%页面可视化搭建，而我们还在「CV工程师」模式 Task（技术挑战）:
  3. 3个月内落地低代码方案，覆盖60%中后台场景
  4. 确保生成的代码可维护、可扩展，避免沦为「屎山生成器」

Action（破局方案）:


  2. 协议驱动：
  • 设计JSON Schema标准，一份配置同时驱动UI渲染+接口联调+权限控制
  • 开发可视化编辑器，支持「AI辅助生成字段」（截图展示GPT-4生成表单配置）
  1. 性能保障：
  • 运行时编译为React/Vue组件，避免传统低代码的「黑盒DOM操作」
  • 实现「按需加载」，未使用的组件不会打包进产物（Webpack Bundle Analyzer对比图）

  2. 逃生舱设计：
  • 允许导出标准代码，工程师可二次开发（录屏演示「一键转Vue单文件组件」）
  • 内置「性能红线」，自动拦截嵌套过深的配置（错误提示截图）

Result（数据炸场）:

  • 简单页面开发从3天→10分钟（行政系统数据）
  • 复杂场景定制需求减少70%（产品经理感谢邮件）
  • 意外收获：生成的代码竟比部分人工写的更规范（ESLint通过率对比）

以上就是面经及项目上面的总结，其实平时也是写一些基础代码，简历上面的优化，找GPT或者deepseek就可以～


——转载自：赵小川

用户评论
可能感兴趣的话题