金九银十：一年前端的字节三面面经-CFANZ编程社区

背景

过程

面试周期

字节面经

一面

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

面试官：你简历上写了组件库项目，介绍下你这个组件库吧
我：先说了组件库之前用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还是会自动携带过去
面试官：我看时间还有，来道手写题吧

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反馈下加快下进度哈哈，面试官这很好，不过我感觉加快进度也是自己踩坑的开始

三面

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

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