一年切图仔的前端面试折腾之路

前言

说下自己背景吧，20届渣本毕业生一枚，毕业就来了b站，这算是我的第一家公司吧，实习当然也是在这了。在b站一年多时间，感觉学到了很多，也认识很多有意思的人，还有一群乐于助人的同事，在这里也的确留下了很多回忆。不知道在怎么样一个契机下，我开始了我的夏季面试之旅，本着看看行情的心态，投了点岗位试试水，顺便系统过一遍自己存在的不足之处。也很开心整个面试之旅的体验，至少遇到的面试官都是挺不错的，没有出现面试体验差的感觉，倒是自己这边房屋装修，感觉有点吵到面试官了QAQ。

说实话，边工作边面试还挺难调整时间的，还好上家公司作息还挺舒服的，所以才勉强协调了几个面试，当然也有面试实在协调不开，所以也只能请假了。请假的话难受的点就在于，如果请假次数多了，leader就可能会怀疑你想跑路了，也不太好。如果说先辞职，再专心面试，我觉得更难顶，压力会很大。

很幸运的是自己投的简历大多都给了面试，差不多前前后后一共面了九家公司的样子，现在也已经入职了新公司，也算是告一段落了吧，下面就让笔者为你娓娓道来这平凡而又刺激的面试之旅吧。

如果笔者的文章能给屏幕前的你带来一丝丝帮助，也希望能给笔者点个赞呗！

好未来 - 杳无音讯

忘记录音了，差不多也都是些基础八股和项目，面完一面之后，hr先跟我说过了，然后后面越总监面的时候改了一次时间，具体时间还没定，后面没过多久看到脉脉在传好未来裁员，好吧，我知道应该这个无了。

猿辅导 - offer

猿辅导紧张而刺激的三次面试！！！

一面

• Vue 与 React 最大区别是什么？
• Vue 模板与 React 的 JSX 哪个性能更好？
• 修改 Vue 的 data 对象中的数据，为什么可以应用到模板中？
• Vue3 的 Setup 函数中代码为什么必须是同步的，computed 也为什么必须是同步的？
• Vue 中的 scoped 是做什么的，原理是什么？
• Vue 中 style 标签上的 module 属性是做什么用的？
• 写 scss 或者 less 在类名命名上有什么规范吗，暗指 BEM？
• 浏览器缓存有哪些？—— localStorage、sessionStorage、Cookie等？
• 说一些 http 连接和断开的过程（个人觉得想问三次握手、四次挥手）？
• 什么情况下用 TCP，什么时候用 UDP？
• https 多了一个加密的过程，说一下（也就是说下 https 的连接过程）
• http 的缓存，也就是问浏览器缓存相关（cache-control、expires、Etag、last-modified）
• 算法题（easy）：合并两个有序数组，说一下复杂度。
• 浏览器事件循环，promise 与 setTimeout。
• 常见的宏任务与微任务（面试官说有一个规律就是，浏览器提供的都是微任务，js 提供的都是宏任务）。
• 说一下 js 指向。
• call 和 apply 的区别。
• 说一下 js 的作用域链。（我听成原型链QAQ，讲了半天）。
• 说一下垃圾回收（引用计数、标记清除、V8垃圾回收）。
• Webpack 编译的整个流程是什么？
• 说一下 loader 与 plugin，有什么区别？
• 是否写过 loader？
• Webpack 做了哪些性能优化，如何进行 tree-shaking。

二面

• 平时怎么学习的？
• 为什么要换工作？
• 盒模型。
• 说一下定位。
• 隐藏元素的方式。
• 给两个平级的 div：a、b；c 是 a 的子级，d 是 b 的子级，a 的层级大于 b，说一下他们在页面展示从最上层到最下层顺序是什么。
• 说一下 css 动画。
• 如何实现一个宽高不固定，宽比高为 4:3 的 div？
• 说一下常用的 ES6 的特性。
• 了解过解构吗？设定默认值的情况，解构的目标值为什么可以让默认值不生效？
• 说一下浏览器事件循环，我还提了 Node 事件循环。
• Node 事件循环和浏览器事件循环区别，被问傻了，问我有没有实践过。
• ts 解决了什么问题?
• tsconfig 的 target 和 module 是做什么的？
• 手写一下 ts 内置类型 ReturnType，以前写过现在忘了我去。。。。
• 说一下 Vue 父组件和子组件生命周期的执行顺序。
• 说一下打印顺序：

const a = new Promise((resolve, reject) => {
    console.log('promise1')
    resolve()
}).then(() => {
    console.log('promise2')
})


setTimeout(() => {
    console.log('timeout')
})


const b = new Promise(async (resolve, reject) => {
    await a
    console.log('after1')
    await b
    console.log('after2')
    resolve()
})
console.log('end'）

// 答案：
// promise1
// end
// promise2
// after1
// timeout

• 说一下怎么做的

这里我答案写对了，但是后面那个 await b 的状态说错了，应该是一直处于 pending 状态，因为 await 会把后面的 resolve 放到 Promise.then 里去，导致一直无法被 resolve。

• 手写一个 Promise.all。

三面

• 先问我大学都学了哪些计算机相关的课，然后开始问我计算机网络七层模型有哪些？
• 顺着这个问，每一层都主要做什么，每层都问的很细，很深。
• 物理层问你有哪些传输介质，数据链路层报文有哪些东西？
• 网络层有哪些协议，传输层问 TCP、UDP，区别是什么，如果 TCP 在第二次握手的时候丢包了会怎么样，超时重传的超时时间是多少，可以设置的吗？
• 应用层就问 http 协议有哪些请求方法（get、post、head、trace），问 trace 返回的内容有哪些；然后问 http 缓存。
• Vue 和 React 的区别有哪些？
• 技术选型时怎么在判断这两个框架谁更适合？
• 是否了解过 hooks？hooks 带来了什么？
• node 如何利用多核的能力，我理解应该是问多进程。
• 一般是怎么启动 node 服务？
• node 应用上线时如何平滑过渡？
• pm2 什么时候开启的守护进程的？然后还有啥来着，就是问 pm2 的一些机制吧。
• 为什么想换工作？

三面没录音，应该差不多这些了，不过有一说一，几个面试官的确挺好的，给提示和给解答都很 nice.

后面我跟hr说我不去的时候，我的三面面试官（也就是我进去之后的mentor）来加了我，的确他给我的感觉真的很棒，当时其实心里在想，要是猿辅导在上海我说不定就直接去了，然后他问了下我的意向，跟我聊了聊，然后最终权衡下，还是选择了放弃，我说还想在试试bat大厂，他也没继续挽留了，说后面如果还有想法或者是干的不开心了可以直接找他，这段话也的确让我挺触动的，感觉面试过程中认识一些大佬，还是挺开心的。

任意门（soul）- offer

一面

• ts 了解多少，内置类型说一下，实现一个 ReturnType？
• 有没有写过什么小工具？
• Nest 了解多少？
• Vue 了解多少，有没有深入原理？

感觉没问啥，后面跟面试官一起讨论了一下 Low Code，然后就聊聊他们公司业务啥的，技术栈啥的，就完事了.....

二面

• 手写 bind、防抖、节流
• 手写 Promise
• 给定一个节点数组，转换成一棵树

hr面

问了一些自己对于业务的看法，还有一些hr面常规的问题吧，同时也问了一下我这边公司的基本情况之类的，以及自己对于加班的接收程度，差不多二十多分钟吧。

米哈游 - 挂

一面

忘了录音，能记得多少说多少......

• 垂直水平居中方式。
• 如何用flex实现一个对角线排布的 *，类似于这种：

*
  *
    *

• 如何让一个不知道宽高的图片，展示为实际尺寸的50%？
• 如何清除浮动？
  • 因为我就说了clear:both，所以面试官问有没有其他兼容写法，其他的我倒是记不清了。
• margin塌陷，触发BFC方式？
• 实现一个深拷贝需要注意什么？
• js中各种类型存放位置，引用类型存在堆里有什么好处？
• 事件队列，给你一段代码看打印。
  • 腾讯会议聊天区代码太难读，我说放到IDE格式化一下，这个过程中我说了下宏任务微任务他就说不用了。
• 说一下垃圾回收。
• 说一下响应式布局怎么实现。
  • 我就问了flex算不算，面试官说也可以，然后说了下媒体查询，rem等等。
• 给了段代码（有样式和标签的），问这个元素的offsetWidth是多少。
• Rxjs中mergeMap和concatMap区别。
  • 因为我博客里写了，所以问了，不过太久没用过我都忘了......
• 问了下instanceof实现原理，Function instanceof Object会不会出现死循环，比较__proto__和prototype的时候到哪截止。
• Symbol主要用来做什么，能否被JSON.stringify序列化，是否可以被for in遍历，有什么办法可以获取Symbol。
• margin负值作用。
• relative和absolute位置区别。
• 给了个两个分支合并前的图，问你能不能合完之后不出现明显的合并的线，这里也就是想问你git rebase怎么用。
• 0.1 + 0.2 == 0.3如何让他们相等

二面

也是忘了录音，不过总体基本全在问项目，比如项目的难点，怎么解决的，用了什么技术，为什么用这个等等。

携程 - offer

一面

• rem与em区别
• flex布局
• 垂直居中实现
• react类组件和函数组件区别
• 常用的hooks
• Vue双向绑定原理
• cookie和localStorage区别
• Vue兄弟组件传值方式
• low code接触过没有
• Vite了解过没有
• 开发依赖和生产依赖区别（devDependencies、dependencies）
• webpack构建流程
• 巨量列表渲染优化（虚拟列表）
• Vue SSR原理
• VueRouter的一些路由守卫
• VueRouter的路由和直接在浏览器访问有什么区别
• Vue生命周期，父子组件的生命周期调用时机
• CI CD了解过吗

二面

• 最近的项目中的重难点
• 从里面挑了问xss转译了啥，具体的做法
• node服务请求gateway超时怎么办，用户端的现象是怎么样的，感觉面试官这块问的我有点茫然，说了一些，然后感觉他并不太满意
• 然后就是如何快速生成一个页面，也就是服务端保存一段html字符串，直接接口获取然后渲染，如何快速生成这些字符串
• 你想问我什么？

感觉面完有点奇怪，二面这个是leader，看起来不太像是前端，有点像是做服务端的。

三面

三面应该是技术总监面了，去的现场，约的早上大概9点吧，过了这么久好像有点忘记了，那天是请了好几天假期，然后准备面完就回家玩，所以也算是大早起来做地铁，从杨浦五角场跑到漕河泾的确挺久的，一个多小时， 七点就起来了好像，所以到那的时候还有点困哈哈哈。不过有一说一，那个楼设计还挺有意思的，顺便逛了下，然后就上去等面试，还填了个面试之类的表，然后面试官就来了。感觉给我印象很好，人很温和，首先让我介绍了下 自己在公司负责的项目，项目的用户量级，我做了哪些优化，好像也问了node服务相关的啥的吧，记得不太清楚了。

整个面试似乎也就二十多分钟，给我感觉基本算是纯聊聊天，然后问问我为什么想离职，说b站也是一家很优秀的公司为什么你会选择看新的机会之类的，然后我巴拉巴拉，然后问我面了哪些公司，手里offer情况，当时好像就猿辅导（涨幅挺高的）和soul给开了薪资，然后就说了下。接着也问了我后面还会不会再面其他的，我也如实说了我的想法，我说其实还是会去面一下几个头部厂的比如阿里、美团、字节之类的。然后面试官说，那我也拉拉票吧，给我介绍了携程的优势，以及未来发展的潜力相关的，同时呢也继续介绍了组内的项目，希望我能考虑一下。其实听到这我还挺惊讶也挺开心的，好像是直接过了，然后我也表达了希望能有机会共事的想法，然后就结束了。我也继续赶去了高铁站准备回家了。

hr面

因为加了hr面试，所以我面完直接在微信上问了结果，然后说我过了，问了下我英语四六级的情况，最后因为自己四级分数不够500分所以还需要做一个英语测评，这属实是我没想到的，还有这个。于是在晚上12点多的时候我把这个测评做了下（哭了），大概内容就是阅读小短文选答案，还有跟着读，还有听写，还有纠错之类的。然后昨晚之后第二天下午就来了谈薪电话，我当时正在蹲WC，特别尴尬，那种厕所的回音我脚指头都要扣出一个三室一厅了。结果也是正常涨幅吧，给了t13。

这里有个小插曲，因为自己不是一直拖着这边offer还在面其他的，所以也一直没接，到了最终的deadline那天，我的一面面试官（加了微信）找我了，问我怎么考虑的，我也说我还在考虑，其他流程还没走完，还有公司想面吧，然后他说希望我能过去，项目之类的还是挺有挑战的，我去了也能有不错的成长，然后说薪资方面如果觉得低了的话还可以再帮我争取下，我也表示了感谢，然后还是想看看其他的吧，其实我都想过好几次，没有其他好的话还是选携程吧，薪资和作息以及项目都还是自己比较满意的。

拼多多 - offer

其实当时也没准备投pdd的，只是记得脉脉上加了一个拼多多的大佬，然后问我要不要来试试，然后我就说可以，于是约了当天晚上9点还是10点来着，当天是周日，因为那边的作息是周日上班的。

一面

面试倒是视频面，然后问了一些常规八股文，这里就不贴了，当时忘记录音，还手写一道深拷贝，的确要养成好好记录的好习惯，聊得也还可以，于是第二天就约二面了。

二面

先介绍了项目，然后针对项目提了一些问题，然后手写了一个vue实现双向绑定的原理，也就是类似于一个简单的mini-vue，dep、watcher之类的，不过这里的确记得不太清楚了，上一次写还是在一年前校招的时候研究过。

hr面

问了下手里offer情况，已经跟我说了下这边的作息是否能接受之类的，然后让我填了个个人情况，薪资流水相关的表吧，然后也很快就offer了，给的薪资也还可以，base的话跟猿辅导给的一样，加上加班费就还挺多的了（手里offer最高的）。

美团 - 二面挂

一面

• 为什么看机会
• 介绍项目
• 对于工作机会更看重什么方面
• 你觉得你在上家公司成长了哪些
• 然后针对项目问了一些问题
• webpack loader/plugun 原理
• 如何实现组件库的按需引入
• 浏览器事件循环机制
• 一道console的执行顺序题
• 一道primise调度问题，具体是啥忘记了
• 算法题 - 最长上升子序列

这里笔者有点嘴贱，我以为美团这个是写react的，然后我说我下一份工作的期待是想做react生态相关的东西，然后我继续问了下面的这个部门是写什么的，他们说是Vue，我当场裂开。

二面

• 八股
• 问项目
• 为什么看机会
• 一道算法，忘记是啥了，应该是中等吧

字节

一面

• 八股
• 项目
• 算法题，有点像是二叉树的倒序层次遍历吧

二面

• 八股
• 设计一个弹窗组件
• 算法题，好像是hard（没找到原题）

感觉手写题答的都一般，算法题还没写出来，面完感觉就应该是挂了，然后问了hr的确是的。

阿里淘系 - offer

四面技术+HR，流程好像走了半个月吧，人面麻了，问题和上面差异也不大，后面三面好像基本都是项目，没啥可参考性，这里就不贴了。

总结

怎么说呢，最开始自己的想法其实挺单纯的，想看看现在外面的行情，以及说让自己看到自己的不足，让自己多点动力去学习，因为总感觉自己越来越懈怠了，然后面着面着，因为猿辅导给我来了“一刀”，给的太多了，然后我就开始纠结了，不继续面了吧，浪费offer（可以考虑跟别的公司argue），去吧，太远了，所以又投了点其他的，所以从我面试到结束跨度有一两个月，从最开始的试水，到后面的真想跑是因为手里运气好拿了几个涨幅都还可以的offer，导致自己迷失了自我。但同时呢，在整个面试过程中也深深感觉自己还有好多不足的地方，保持危机感的确也挺重要的。

当然了，频繁跳槽肯定不好，我决定现在跳也纠结了很久，毕竟一年就跳了，而且还要损失一波年终奖，不过最终还是在各方权衡下还是选择了跳，所以未来的一段时间只希望能尽快稳定下来吧。