金九银十：一年前端的字节三面面经（下）

背景

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

过程

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

面试周期

听别人说字节的面试效率挺高的，但是我遇到的情况却是不同，一二三面大概花了一个月左右,二面结束的时候我知道自己应该过了，然后还特意让面试官催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和scrfToken

• 面试官：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需要内推的简历给我，实时跟进进度

感恩粉丝的赞赏

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

笔记和简历

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

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

为啥是gloang的logo

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

内推

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

最后

安慰下自己：缘分未至，多多努力