23年底，两年前端菜狗被裁后的面试经历

前言

ps1：前言包含了自己的个人背景、心路历程、和自己的碎碎念，想看面经的同学可直接通过目录拉到下方

ps2：掘金上多是大佬面经，大佬们都比较厉害，大厂offer拿到手软~ 中小公司的面经不是太多，所以自己也想回馈下社区。本人真·菜狗，往下看就知道啦

个人背景

双非一本毕业，非计算机科班，目前毕业两年。

校招进的前东家，没换过其他公司。前东家是互联网某细分领域下的top1，勉强算个小厂吧，进公司一年后转入核心业务线，非常忙，做不完的业务需求，一年中除了每次放假前后的那两天，其余都是业务需求满负荷。

再加上我自己也比较菜，对技术也没了最开始的热情，一直在繁重的业务需求中麻痹自己，自己的技术并没有多少成长。导致我的项目经历特别的贫瘠，两个项目，一个是自己主R的模块重构，第二个是基于司内的埋点sdk搭建的预警系统，在面大厂的时候也被面试官直接说项目太简单了，没难点......

自己主要是用vue，写过node项目，webpack会基本配置（菜狗无奈...）

十月被裁

今年，其实不止今年，从去年前年开始已经能感受到大环境不好了。从校招就可看出来，我是21年进公司，当年和我同一批进公司的研发，大部分都是双非本或是双非硕。两年后的23年校招，我们组进到面试流程的，9个人中，7个211/985，6个硕士。

21年进公司后，公司其实一直在裁员、组织架构调整，并且频率逐年提升。我是今年10月份被裁，我这波已经是今年的第三波了，这还没算上小于10%的小规模裁员，听说年底还有一波。

n+1，还算满意，所以和前东家交接后直接开开心心走人啦~

躺平半个月

知道被裁的时候只有开心，因为当前的工作太累太累，base也不高，自己已经在计划着跑路了，正好被裁，还能拿一笔赔偿~

在家躺了两天，等了个周末就和对象回老家啦（对象也辞职了）。

回家后在父母店里帮帮忙，和老友吃吃饭，半个月很快就过去了。

（和老友们聊天其实真的让自己成长了挺多，在外面漂久了亦或者是当程序员当久了，一些很现实的问题我一直在逃避：买房、买车、结婚...... 这里就不扩展啦，免得跑题了）

10月底回到北京，回到北京后老毛病肾结石又犯了，硬撑了好几天，最后还是去医院做了碎石手术，恢复了好几天才将体内碎石全部排完。

面试经过

11.5号正式开始准备面试，这时其实已经开始焦虑了：有开支没收入、同批被裁的前同事已经在开始找工作但是不太理想约不到面试。

改简历、背八股文、刷算法题、投简历......

自己在准备阶段比较随性，并没有很高压，LOL世界赛每场都看、学累了就出去玩一天吃一天，所以在11.20才正式开始面试，此时距离被裁已经过了一个月。

最终结果

11.20~12.6，历时近三周，过简历约面试的有18家，参加了11家的面试

最终拿到两个offer：

一家做k12教育的，教育行业的那几个大公司之一，进去后是核心业务线，不是太卷，早9晚7，很少加班。不过涨幅给的很低、也没啥福利、并且自己对k12教育不太看好，就拒了。

第二家是做社区app的，规模还可以，有一定的知名度和用户量，涨幅给到20%+，房补餐补都有，不过早10晚9，思考了下还是接下了，赚钱嘛不磕碜~

碎碎念

最近行情真不行，大家能苟着还是苟着吧，互联网寒冬真不是空穴来风......

周围的同批被裁的大多还在找着工作，甚至上批被裁的少数也还在找工作，今年寒冬，年末更是寒上加寒。

经过这次面试，更加确信是真的菜，卷不过大佬们，在职的时候还想着多准备下冲个大厂，但真到自己失业了，一个多月没上班时只有焦虑，并没有躺平的闲适，所以有了offer就直接接下了。

自己可能并不适合前端这一行吧，希望自己之后可以尝试下更多可能性：提升学历 or 宇宙的尽头？

面经

ps：只列举了5个公司的面试题，其他没录音就没做记录

公司A（一面挂）

做设计稿编辑器的，类似蓝湖，公司总的100多人，前端30来个，所有研发7、80个

是自己的第一次面试，八股文准备得不好，直接挂了

介绍下BFC
display属性有哪些值
讲一下flex弹性布局
- 怎么改变布局下元素的顺序？
讲一下ES6的常用语法
for...in 和 for...of的区别
改变this指向的方法有哪些
如何实现一个call方法？说思路
数组的reduce方法有用过吗？具体的用途？
- 如果空数组调用reduce会发生什么？
使用过git吗？常用指令？
- rebase、reset、revert区别？
需要在本地实现一个聊天室，多个tab页相互通信，不能用websocket，你会怎么做？
说说的vue的响应式原理
- vue3是怎么实现的？
proxy能够监听到对象中的对象的引用吗？
- 如何让proxy去监听基本数据类型
vuex用过吗？知道vuex的原理吗？
用过react吗？
用过ts吗？
用过node吗？说一下你维护的那个node项目
有做过工程化的事情吗？说一下你对工程化的了解，对webpack的了解
webpack的rule，loader的执行流是怎么样的？
有自己写过loader、plugin吗？具体讲一下
tree-shaking了解吗？讲一下
- tree-shaking的操作是文件级别还是函数级别的
CI/CD了解吗？
设计模式了解吗？讲一下了解的、用过的
有做过性能优化吗？
- 页面非常卡顿，卡顿不是因为数据很多，而是因为有很多计算，导致掉帧了，如何找出卡顿的原因？如何去debug找出来？
- 如果有几百个函数需要执行，怎么去处理？
10*10的100个方格，里面有很多障碍物，某个地方有个出口，你怎么去寻找最短路径？说想法

两道手写题：

实现promise.all
翻转二叉树，二叉树的左右节点翻转

公司B（offer）

做k12教育的，就是教育行业的那几个大公司之一，进去后是核心业务线，感觉不是太卷，早9晚7，很少加班

一面

自我介绍
着重问了项目：重构
讲讲js数据类型
介绍下BFC
如何判断出一个元素是数组还是对象
讲讲重排重绘？
- 两者的关系
v-if、v-for绑定在同一元素怎么办，优先级？
- vue3下优先级有区别吗？
- 怎么避免？
讲讲v-model的原理
vue的最佳实践是什么？
如果需要你起一个新的vue项目，你会怎么去做，会用哪些工具、框架，需要怎么组织文件结构？

三道代码题：

js 复制代码

// ```1、输出结果
Promise.resolve().then(() => {
  console.log(0)
  return Promise.resolve(4)
}).then((res) => {
  console.log(res)
})

Promise.resolve().then(() => {
  console.log(1)
}).then(() => {
  console.log(2)
}).then(() => {
  console.log(3)
}).then(() => {
  console.log(5)
}).then(() =>{
  console.log(6)
})
// ```


// ```2、描述下列代码的执行结果
foo(typeof a);
function foo(p) {
  console.log(this);
  console.log(p);
  console.log(typeof b);
  let b = 0;
}
// ```

//# 3. 数字千分位

// ## 题目

// 将数字按照千分位生成字符串，即每三位加一个逗号。不考虑小数。<br>
// 如输入数字 `78100200300` 返回字符串 `'78,100,200,300'`

/**
* 数字千分位格式化（字符串分析）
* @param n number
*/

二面

自我介绍
主要就是问项目，两个项目都问了特别久，深挖
如果线上除了事故级别的问题，大批量的用户不能提交了，如何去处理？
讲讲vue2、vue3的区别
有了解composition api底层怎么实现的吗？
vue2的响应式、双向绑定如何实现的？
- 在这个方面vue3和vue2有何区别？
- Vue3具体是用proxy怎么做的？
- Vue3通过proxy监听数组和对象有何区别？
- 数组的length是2，forEach的时候，长度增加为10了，forEach会重复执行吗？如果会那vue会怎么去做的？
- 监听一个数组，数组变更了，那么数组的函数怎么会达到二次执行？
说说虚拟dom
- 虚拟dom能提升代码性能吗？
- 有些框架不用虚拟dom但是他们的性能也不错是为什么？
vue是怎么把template模版编译成render函数的？
- 什么是AST呢？
vue中还有其他方法实现v-model双向绑定吗？

两个手写题：

编写一个vue组件，组件内部使用插槽接收外部内容，v-model双向绑定，实现折叠展开的功能
利用字符重复出现的次数，编写一种方法，实现基本的字符串压缩功能。比如，字符串aabcccccaaa会变为a5b1c5
- 如果需要是连续的呢？比如aabcccccaaa会变为a2b1c5a3
- 再优化一下，如果只有一个元素那就将1给去掉

三面

三面是现场面，两个面试官，一个是该业务线的leader，另一个是该业务线的研发leader。没录音，主要问了个人规划、自己对裁员的看法、你觉得为什么裁的是你不是别人、你的优缺点等等这些偏hr的问题

公司C（二面挂）

也是做教育的，大前端，3、40人，有一些外包，现在急需前端，一般8、9点走

一面

自我介绍
介绍下最近的一个项目
有做过h5和iframe和app的通信吗？
聊一下微信授权
有做过PC端项目吗？
vue的组件间的通信
- 你提到eventBus，如果两个组件，组件A执行的emit触发事件，下一行写了一些代码，组件B on监听事件；那么是组件A的emit的下一行先执行还是on先执行？
setTimeout延时写成0，我们一般什么情况会这么做？
微任务、宏任务描述一下
讲讲虚拟dom
- 虚拟dom渲染到页面的时候，框架做了什么动作
了解了下上家公司的工作信息
用过node吗？怎么用的？
最近在了解其他方面的知识吗？
ai方面了解吗？

两道代码题

给定一个二维数组，其中只包含0和1。我们定义1相邻的区域是指1与1是上下左右相邻的区域。请编写一个JavaScript函数，找出给定二维数组中所有1相邻的区域。

封装一个函数，接收多个promise，其中只要有一个promise resolve或者reject了，那它整体就resolve了
- 什么场景会用到这种实现？

二面

体验比较差，面试官对我的项目没有兴趣后，就让我自己讲项目，期间一直在做自己的事情，全程没有反馈，最后也意料之中的挂掉了

公司D（一面挂）

公司不大，100多个人，做游戏的，八个前端，偏中后台，不卷，很肯定的说晚上七点就能走，不加班

面试官不错，问问题由浅入深，不过自己有些没答上来就挂了

自我介绍
如何研究vue2/vue3的原理，你是怎么学习的？
对源码的哪一块记得比较清楚？
- 我：响应式，面试官：那说下响应式吧
webpack，自己写过loader和plugin吗？
深问项目
如果本地存储的草稿>5M了，有什么其他方案能够解决
new一个对象的时候会做些什么？
es6的class和es5的function的关系？
es5怎么实现继承？
父类上的引用类型的属性，子类继承下来，还是那个引用类型吗？
- class类的继承呢？
js代码执行顺序（事件循环）
- 微任务产生的微任务是在本地循环还是下次循环？
- 在嵌套的微任务，用户去对页面进行交互，能成功吗？
- 换成宏任务可以成功吗？
口述一下节流函数的实现
口述一下，实现一个函数，接收字符串，返回对应的布尔值
bash 复制代码
```
- () true
- ())) false
- (()) true
```
什么情况下会产生跨域？
- 服务端请求服务端会跨域吗？
- webpack或者vite中可以使用proxy解决跨域，它解决跨域的原理是什么？
- 为什么跨域的时候有时候请求会发两次？
- 那为什么非要有这个预检请求呢？
Vue2和vue3哪个更熟悉？
v-if和v-show的区别？
- 它两在对页面产生重绘重排上面有什么不同？
- 分别为一个组件设置v-if和v-show，值由false变成true，或者由true变成false，组件的生命周期会怎么执行？
v-if和v-for共同作用在一个元素，谁的优先级更高？
- vue3呢？
- 你觉得为什么vue3调整了优先级呢？
created和mounted的区别
- 能在这两个声明周期里面通过this拿到method，data，$refs这些吗？
- 比如我在created发起ajax请求，ajax完成之后，在其回调里面能拿到回调吗？

公司E（一面挂）

也是做教育的，技术上感觉比前两家做教育的更厉害点

追问的几个点没答上来，面试官不太满意

自我介绍
离职原因
已经加入公司了还是还在找？
除了vue有用过其他框架吗？
vue3有哪些新功能？
- composition api和公共逻辑、公共组件有何区别？
- 为什么vue3中组件能支持多个根节点？讲讲原理
vite的构建流程说一下？
- 线上构建流程呢？
- 说说vite和webpack的差异？
webpack的module、bundle、chunk分别指的是什么？
一个vue单文件组件的构建过程？
- 一个vue单文件是怎么生成线上的代码的？
vue的样式隔离是怎么做的？
- scope是怎么做的样式隔离的？讲讲原理？
- 如何打破scope的限制？
- 为什么用deep就可以击穿scope的样式限制？
vue的祖孙组件的通信方案
除了vuex还了解过其他的数据管理方案吗？比如mobx？

两个代码手写题

自定义实现eventBus
- 需要支持on、once、off、emit
- 如果emit的时候需要传入参数，怎么处理？

手写防抖、节流

建议

目前工作真的不好找，能苟还是苟着吧~
大公司进不去的话，可以试下中小型公司，中小型公司问的问题更偏实际开发一点，其中两个公司甚至完全没问八股文，全程死磕实际开发遇到的重难点。
前端对算法要求不是太高，leetcode的easy全刷完，middle刷几个高频题就行。如果时间紧迫，单纯为了面试速成，推荐可以看看这个链接，只刷最高频的80%就足够了