金九银十:一年前端的字节三面面经

背景

最近裸辞也写了一篇金九银十:一年前端的面试分享,时隔多日,终于鼓起勇气复盘字节的面试,之所以把字节的面经单独写一遍出来,是因为面试大厂真的需要提前知道一些大厂面试经验,这次出现的问题还是在于缺少或者说没有大厂面试经验,所以借此单独总结出一遍,避免以后再重复犯这样的错误

过程

接下来我们尽可能详细的描述当时一二三面的面试场景对于缺少大厂面试经验的同学做一个借鉴

面试周期

听别人说字节的面试效率挺高的,但是我遇到的情况却是不同,一二三面大概花了一个月左右,二面结束的时候我知道自己应该过了,然后还特意让面试官催HR加快进度哈哈,因为前后一个月周期太长了,时刻保持面试的状态挺难的

字节面经

一面

面试官会先介绍下自己·属于哪个组担任什么职位·,然后按照面试的套路让你先·介绍下自己·,一般我觉得这个时间段是面试官了解你和看你的简历的时间段,所以我的介绍通常是介绍自己来自于某某公司,担任什么职位熟悉某某技术栈,熟练某某技术栈,然后对社区的贡献产出简单介绍下(大概一分钟就行)

接下来面试官开启了一系列的灵魂拷问

  • 面试官:你简历上写了组件库项目,介绍下你这个组件库吧
  • 我:先说了组件库之前用create-react-app搭建但是觉得太臃肿,然后自己搭建了一个,介绍了组件库用到的的技术栈,支持的三种模块方式按需加载功能自定义主题色功能tsconfig的配置,commit规范和代码格式规范等等
  • 面试官:竟然你组件支持了三种模块规范,那么我引入import组件的时候怎么知道引入哪种模块化方式的组件
  • 我:刚开始没反应过来面试官问的啥哈哈,但是很快的我灵机一动是想到了package.json的main字段
  • 面试官:你组件库用了ts,那么我使用组件库的时候是怎么引用你的声明文件的
  • 我回答到了package.json的typings字段,当时因为紧张说不出来,然后还好是牛客网视频面试的,我直接手打了出来哈哈哈
  • 面试官:比如我想要明明引入的模块是我们的实际写的类,但是为什么提示的时候是一个ts类型声明
  • 我:当时想到的回答是,ts实际给IDE用的,但我们实际动态运行代码的时候还是使用了我们的类的,然后简单用一句ts很智能概括了,我记得这个问题当时请教了ssh大佬
  • 面试官:说说你组件的按需加载吧
  • 我:通过支持es模块,这个模块就是简单babel编译成es5语法但是对import export字段不进行编译,然后package.json声明sideEffect字段来声明副作用文件,防止被tree-shaking掉,项目中我们可以利用打包工具的tree-shaking功能做到按需加载
  • 面试官:你们怎么做样式按需加载?
  • 我:一开始想不起来,然后面试官提示了babel-import-plugin,这时候才想起来,跟面试官解释了自己的组件内不会引入样式,而是基于glup流式构建单独处理less文件,这样做的好处就是支持babel-import-plugin
  • 面试官:你们组件库的规范怎么样?
  • 介绍了eslint,(顺便说了不选择tslint的原因)prettier,以及commit规范,另外说到了git-hook,提交前会进行检查并且格式化(format)
  • 面试官:说说你组件库如何支持ts的
  • 我:提供两份tsconfig,特别说的buildConfig只是导出声明文件使用,并不会去编译我们的代码
  • 面试官:如何做版本号管理?
  • 我:我当时忘记了semver版本规范(语义化规范)这个规范,当时跟面试官说有个se啥啥的规范,顺带了解释大中小版本号的使用场景,就蒙混过关了哈哈哈
  • 面试官:本地引用你们的组件库做开发展示怎么支持的
  • 我:打包后通过相对路径引入dist文件,内部提供example的服务
  • 面试官:那还有其它方式吗
  • 我:确实没了解到,表现出萌新求教的表情,面试官提到了npm link,之后问了其它大佬,确实是自己孤陋寡闻了,估计是这个问题终于被问倒了,面试官就结束了组件库的问题了哈哈
  • 面试官:他想举一个ts场景的 噼里啪啦想要引出一个概念,但是说不清楚,后面索性就说你知道泛型吗?(其实那时候我已经知道他要问啥,但是不能打断面试官)
  • 我:解释了为什么使用泛型,使用泛型之前首先得要支持泛型,比如泛型接口,泛型类等等
  • 面试官:接下来,我们来问点基础的吧,讲了一个例子,不认真听是有点懵逼,后面就是问(怎么通过实例拿到构造函数

  • 我:很简单,原型对象的constructor属性(尽量在牛客网那边手打出来,我基本每回答一个问题都会手打出来,但是三面的时候这个技巧被锁住了哈哈哈,具体往下看
  • 面试官:说说继承的原理(extend 原理)
  • 我:很详细的分析几种原理,然后透过现象看本质给面试官分析了其实就是借助call或者原型链一系列组合而成,然后最后手写了出了这个extend
  • 面试官:看你extend原理用到了Object.create,那你实现一下吧
  • 我:非常简单,三两下就手写出来了,顺便提到了Object.create(null)
  • 面试官:眼神提留在简历几秒钟,开始问,你项目使用的虚拟列表技术,自己实现的吗?
  • 我:外面有现成的轮子,可以直接用了,然后跟他讲了源码里固定高度和非固定的情况如何实现的
  • 面试官:说说浏览器缓存原理吧?
  • 我:很简单 说了强缓存和协商缓存以及场景(比如webpack文件指纹策略),在牛客网手打了对应的请求头
  • 面试官:什么 csrf 攻击?
  • 我:解释了csrf概念和本质,然后说了几种解决方法cookie的samesite和csrfToken
  • 面试官:csrftoken 怎么获取,存到哪里?
  • 我:获取的话可以在服务端返回的页面中获取,存放在哪里,我当时觉得在localStorage,因为放在cookie还是会自动携带过去
  • 面试官:我看时间还有,来道手写题吧
实现JS限流调度器,方法add接收一个返回Promise的函数,同时执行的任务数量不能超过两个
class Scheduler {
    async add(promiseFunc: () => Promise<void>): Promise<void> {
    }
}
const scheduler = new Scheduler()
const timeout = (time) => {
    return new Promise(r => setTimeout(r, time))
}
const addTask = (time, order) => {
    scheduler.add(() => timeout(time))
        .then(() => console.log(order))
}
addTask(1000, 1)
addTask(500, 2)
addTask(300, 3)
addTask(400, 4)
// log: 2 3 1 4
  • 我:不会,说了思路,感觉凉了哈哈,后面等了很久才收到一面过的通知(内推我的人说可能这是加分题)

❗️至此经历了字节一轮的面试感觉到了难度,对整体知识的把握,绝对不可能靠背的,同样给一面的面试官点赞

二面

大概隔了很久收到了二面的邀请,二面的面试官开头也是一面的面试套路一样
  • 面试官:说说你项目的亮点?
  • 我:噼里啪啦说了webpack方面,自己封装apis库,大的老项目如何引入ts进行迭代等等,看面试官的反应应该是满意😊的
  • 面试官:说说react和jquery的区别?
  • 我:说了数据驱动视图的概念,然后虚拟dom和diff算法方面的优化等等,吹了很多
  • 面试官:说说虚拟dom和diff算法?
  • 我:说了自己熟悉vue,可以讲vue的吗,面试官说可以,然后噼里啪啦讲了一大堆,就过了
  • 面试官:说说对fiber的理解?
  • 我:大概讲了他解决啥问题,然后说了自己没看过react底层源码
  • 面试官:说说函数组件和类组件的区别?
  • 我:这个还好,也是说了一大堆,不过没提到关键的this然后问了面试官,那时候心里确实想到了没说出来,然后跟面试官解释了为啥这样,同样引入了闭包陷阱这个概念
  • 面试官:ts如何声明全局模块?
  • 我:不是很明白这个意思,说了declare(应该不对,这道题是三面噩梦的开始,继续往下看吧)
  • 面试官:熟悉事件循环吗,来做道题然后解释给我听
  • 我:一开始没进入状态,解释的时候错了一下,然后冷静再看了下就答对了顺序了 然后很系统了解释了事件循环
  • 面试官:我们继续做题,请看下面这道

  • 我:一开始用滑动窗口解答,但是写到一半写不出来,面试官引导了下,其实他解释的那时候我根本听不懂,冷静下来,我用动态规划解决了,哎,自己算法真没刷多少,还好做出来了
  • 面试官:再来继续写道题,比较简单,柯里化的题目
  • 我:好死不死,忘记咋写了,最后靠着debug写出来了,期间面试官很安静的看着我调试,哈哈哈哈非常nice
  • 面试官:你有啥要问的吗?
  • 我:然后反应了面试进度慢,求求他跟HR反馈下加快下进度哈哈,面试官这很好,不过我感觉加快进度也是自己踩坑的开始

三面

二面过了后,很开心的跟内推的老哥说应该过了,然后隔天确实收到了电话,本来约定在下周,我要求推前了(HR反应这几天面试官没空,然后帮我尝试安排下),过后我觉得有点不妙,毕竟可能会给面试官带来困扰,毕竟他们也忙,后来越想越乱,问了内推的老哥,他鼓励我说不要多想,一般三面不会随便挂的,而且三面一般问项目多一点,问题应该不大

当时我也觉得是,三面问的最多的就是项目或者闲聊其它方面的,但是小心使得万年船,我两方面都准备了,但是结果却出乎意料,三面的面试官是女面试官,领导级别人物,气场非常强,一开始也不是遵从一二面的面试套路,直接上来就问了项目亮点

  • 面试官:说出你做过的项目的两个亮点?
  • 按照一二面的话答案说出来(面试官:质疑脸)
  • 面试官:你的库封装用到了Promise,来手写Promise.all吧
  • 我:手写出来了(面试官说确定??),我非常紧张,以致于忘记写测试用例了,可以拖一下时间的哈哈,但是过后我专门去看答案了,完全一样(enenen...好奇为啥质疑)
  • 面试官:说说你webpack如何做优化的
  • 我:很系统分析速度和体积两个方面的(方案)加上实际的项目分析(很不舒服,每说一句话面试官全程质疑脸)
  • 面试官:停顿了下,复问了二面拿到ts如何声明全局模块?
  • 我:凉了,没有做及时复盘,其实当她问出这道题的时候,很明显答错了`
  • 面试官:来继续手写题吧(算法题:矩阵顺序打印)
  • 我:没做过,有点思路,但是写不出来,这次氛围特别压抑,自己的随机应变能力好像不行了,然后讲了思路
  • 面试官:好了,就到这里了,你有什么想问的吗?
  • 我:没。(知道自己挂了,面试官关掉视频了,我一脸茫然的留在原地,哈哈哈拜拜来没得及说)

😞三面的期待和实际天差地别,面完后整个信心都没了一蹶不振

面试过后

面试过后我狠狠抽了自己三巴掌,哎不争气,最后一题做出来就过了,查了下还是leetcode简单题,归根结底就是自己算法和数据结构不系统的学习,然后心情就是感觉比赛(3-1被翻篇的感觉,参考掘金VS快船),不过总体来说三面的面试体验感觉是高压面试了,每说一句话,都能看到面试官的脸上丰富的表情,后面我都低头回答了,不敢直视,其实换位思考一下,每个面试官都有其对应的风格,你能在这种压力下扛过去,那抗压能力确实很强,是一个加分点,另外一点就是及时复盘这是教训啊,没办法的事情,所以总结如下:
  • 适应面试官的风格,知识体系系统学习
  • 及时复盘,很重要❗️❗️

总结

求职阶段已经结束,笔者也顺利入职了360金融,后面的文章也不会再发类似面经这种非技术的文章啦,得好好沉淀自己,争取为社区输出优质深度的文章(不要打我哈哈哈),另外自己的学习笔记也得到了许多同事的反馈,也收到了10-200的赞赏很开心,当然了面经也是要有硬核的内容,我司还有HC需要内推的简历给我,实时跟进进度

感恩粉丝的赞赏

哈哈哈这是收到最大的红包啦,感谢李奕威大佬的赞赏

笔记和简历

❗️笔记📒被挺多同学夸了,受到了不少赞赏,很开心哈哈,后序会持续更新,因为有两三个系列并不是很系统,比如数据结构和算法系列(没时间准备哈哈哈)

有同学需要笔记和简历的,可以通过公众号获取,平时是微信办公,所以没办法一一回复,😭就不要再限流了,真的没精力一个一个点通过

为啥是golang的logo

解答下疑惑哈哈,因为笔者喜欢golang这门语言,这个logo还是我用心找了超级久才找到的哈哈

内推

360金融在深圳这里,招h5开发工程师,简历找我内推哈,联系方式可以通过👆上面微信公众号加我获取

最后

安慰下自己:缘分未至,多多努力

阅读 91

推荐阅读