一年半经验前端社招7家大厂&独角兽全过经历 | 掘金技术征文

前言

在鹅厂也呆了一年多了，业务通常，主要是太忙，没有时间喘气，没有时间规划人生。但愿能换个更轻松的工做，因此出来看机会了。我的选择的原则：至少知足工做生活平衡（硬性条件）、付出收益平衡、业务将来可观

此次近3个星期，面了7家（拼多多、虾皮、做业帮、猿辅导、商汤科技、快手），全都是线上视频面试的，通常是晚上回家面试或者周末。过程仍是挺顺利的，全都过了。时间很紧凑，几乎没什么时间准备和复盘，一环接着一环的，因此就所有凑到一块儿一次性总结了

下面的面试题，会给出一些参考思路，也会标明每一题的性质，以下：

• 描述：对概念、过程的描述，纯理论性问答题为主
• 举例：说出应用场景，或者是本身团队实践的状况
• 伪代码：写代码，但不须要跑起来，能够随便写，主要目的是描述思路
• 编程：真正的写代码，须要跑起来，有测试用例，要看到效果

拼多多

公司面试难度评估：✭✭✭✩✩

1面

pdd用的是他们本身家的面试系统，该有的功能都有，和牛客相似，web-ide体验稍微差一些。

1. react16新生命周期，有什么变化【描述】

两个static、一个didcatch捕获错误的、一个getsnapshot

2. react16以前的那些很差的生命周期怎么过分到react16的新生命周期【描述】【举例】

getDriverStateFromProps替代componentWillReceiveProps，加上逻辑对比上次state和props来决定state。willupdate换成getSnapshotBeforeUpdate，willmount直接写成初始state（react16的state不先写出来是null，你须要先在class组件里面写一下state = {...}）

3. componentWillReceiveProps用到了this，getDriverStateFromProps也要用，怎么办【伪代码】

把this.xxx存到state里面，第二个参数是state，里面有xxx（有点挫，懂的人应该都有一样的感觉吧，若是是函数组件，一个useRef保存一下便可）。另外的方法，若是和内部变量无关，把它抠到class组件外面去

4. 编程题：求最大公共前缀，如['aaafsd', 'aawwewer', 'aaddfff'] => 'aa'(ide没有调试功能，也不能打开控制台，我只能写好了让面试官去运行。无调试，靠想象)【编程】

5. 编程题：求最大公共路径前缀，['aa/bb/sd', 'aa/bb/wwewer', 'aa/bb/ddfff'] => 'aa/bb'(无调试，靠想象)【编程】 接上题改一下，不用一分钟便可解决

6. 怎么理解ts【描述】

类型检查、ide友好提示、文档、利于维护

7. ts的type和interface什么区别【描述】

经典问题，网上可搜，主要是列举出二者的特色，对比一下

8. ssr怎么实现，大家怎么作【描述】【举例】

将动态渲染逻辑作到后端去，并把最终html结果直接返回。咱们这边是数据动静分离+部分ssr直出，重要的数据ssr，比较慢的接口仍是放前端

9. 大家有没有统一构建的cli，怎么实现【描述】【举例】

基于react全家桶，ts、eslint、埋点上报、sw均可配置，根据配置生成代码模版，开箱即用

10. 大家项目有ci吗，怎么作，提交的时候会作什么事情【描述】【举例】

经过接入公司内部某ci，配置yaml文件，每次监听git hook，并做出对应的行为如安装、lint、部署、搬运、生成change log等等。提交的时候，检查lint、修复autofixable的问题，存在修不了的问题报错，提交失败

11. e2e测试、自动化测试【描述】

概念性问题，网上容易搜到。端对端测试，模拟用户行为对网页进行全流程测试；自动化测试，包含不少了，范围更高一个维度

12. git rebase什么做用【描述】

概念性问题

一面的面试官很友好，虽然戴口罩，但也能够感受到满满的笑容。面试过程当中，个人问题还没问够，他说你能够问2面面试官

2面

面试官说系统有问题，开不了摄像头，因而加了微信，微信电话+系统在线写代码结合。不得不说，pdd这个系统很严格，我拖一下窗口就说做弊警告，而后接了一下面试官微信电话又做弊警告，面试官说问题不大，不慌。面试官很严格，全程一本正经，虽然没看见人，但强大的气场让我有一点心凉的感受

1. 项目介绍【描述】

2. 项目难点【描述】【举例】

必定要拿出最熟悉最自信最能体现本身的项目，这一块是肯定面试表现的关键环节。面试中这里能够问个半小时以上。包装假项目的、吹牛的，到这里基本就能够区分出来了。还有项目比较浅的，到这里若是进入尬聊或者冷场，极可能就挂了的。反正我是能够保证本身掌控主动权的，让面试官跟我思路走

3. 实现一个redux【编程】

仍是那10几行经典redux，途中会顺便问一下函数式编程、纯函数、反作用这些，网上搜“函数式编程”便可知道这些概念了

4. 若是是用ts写，怎么写【编程】

改为ts版本，若是比较熟悉redux+ts的，很快写出来。若是不太熟，熟悉泛型也能够根据表现，很快写出近似的。我说我没有ide提示，不能保证裸写没问题。面试官说没事，只是看看你ts熟悉程度

小结

pdd钱给的不少，算是top水平的了，base低的能够去pdd搞一波，快速提高base和pkg。可是pdd单休，平时加班很晚，项目节奏很快很紧凑，因此仍是看我的取舍吧。

虾皮

公司面试难度评估：✭✭✭✩✩

1面

1. 项目突出点，挖项目细节问题【描述】

2. 各类状况下的proto指向，多道问答题【描述】

有一个class A {},问他的实例a的__proto__和A.prototype的关系，a.__proto__.__proto__是什么，a.__proto__.__proto__.__proto__是什么。而后再问普通对象、function的。这里须要注意一下Function.prototype === Function.__proto__和a的三次proto是null。一开始就问三次取a的proto，其实潜意识是null的，但刚刚下班赶车回家，心跳都没有恢复正常就进入面试，没什么状态，“em～”了10秒钟，面试官说：哎，你别打开控制台喔，别偷偷的运行哦。我说这确定是原型链终点了，我想一想，确认一下——null！犹豫就会败北，开门一波丢脸

3. 页面10张img，http1是怎样的加载表现，怎么解决。那多域名又为何能够解决呢【描述】

这个是面试重点高频率问题之一，http1下，浏览器对一个域名下最大tcp链接数为6，因此10张图片表现为6+4。因此能够用多域名部署解决。5个a域名，5个b域名就能够实现一瞬间所有出来了(或者6个a，4个b，融会贯通)。若是是1个a域名，9个多域名，会表现为(6 + 1) + 3

4. http缓存是怎样的。etag和last modify分别什么优势缺点，适合什么场景【描述】【举例】

缓存、304基本问题。etag适合重要量小的资源，last modify适合不重要的量大的资源。注意last modify须要保证服务器时间准确

5. 接上题，10张img，http2是怎样表现【描述】

一瞬间所有

6. http2为何快，多了什么特性，头部压缩算法是怎样【描述】

背书，搜http2答案都有了。头部压缩是HPACK算法

7. react性能优化【描述】【举例】

scu生命周期、memo；usememo & usecallback记住一些值不用从新计算；虚拟列表；immutable+scu/memo；原生js；（这块聊了好久了）

8. 长列表优化，多种方案及对比【举例】

虚拟列表、intersectionobserver、监听滚动长列表+raf（经验之谈，聊了好久）

9. diff算法、key做用，不要key会怎样【描述】

树diff、组件diff、元素diff；key能够原地复用，没有key无脑会更新（此时你能够发现，index作key其实会形同虚设）

10. react的usememo原理【描述】

闭包、缓存、memorize

11. 编程题：对象扁平化【编程】(30min)

{
  "a": {
    "b": {
      "c": {
        "d": 1
      }
    }
  },
  "aa": 2,
  "c": [
    1,
    2
  ]
} =>
{ 'a.b.c.d': 1, aa: 2, 'c[0]': 1, 'c[1]': 2 }
复制代码

我一听到30分钟，内心暗暗的想，给30分钟是否是以为我很菜啊。无论他，先撸为敬。reduce递归+ ...，写+debug总共4分钟就秒杀了，面试官说你怎么不写了，我说已经ok了。他看了一下，嗯，ok

主要是一开始问proto冷场了10秒，这么基础的题都犹豫了，有点丢脸了，还好后面力挽狂澜把局面拉回来了。后面由于提早作完题目，和面试官聊了好久其余事情了，业务、技术、团队、公司方向之类的，到了7点了，他说后面其余的你问hr吧(潜台词:你过了)。总的来讲，面试官是那种逗比类型的，面试过程当中和一我的闲聊同样，有说有笑，挺爽的

2面

1. 项目相关，细问【描述】【举例】

这里仍是问项目。对方之前也是腾讯的，咱们也聊了不少腾讯内部相关的事情，挺多共同话题的

2. 若是我接入你作的平台，怎么接入【举例】

项目继续挖。咱们互相之间说了不少腾讯人特有黑话，拉近感情

3. jsbridge了解么，说一下【举例】

没作过，就我以前作少许内嵌webview的经验，我猜一下吧，大概就是两种：注入全局方法通讯、监听url协议(如abc://，而后触发请求的地方能够作拦截如img、iframe、xhr、fetch等)。回去查了一下，发现我猜的的确是差很少，只是专业名词没到位，口头话不少

4. addeventlistener第三个参数做用【描述】【举例】

控制冒泡/捕获阶段执行。或者是一个对象{ passive: true }，针对的是Safari的，禁止/开启使用滚动的时候要用到

5. cjs和esm区别【描述】

概念性问题

6. 为何浏览器不用cjs而用了esm【举例】

我的观点类问题。cjs都是require系统本地文件，时间不用考虑。若是在浏览器使用相似cjs的require，实现过程无非就是建立script标签、发请求。这个发请求的过程就没法保证同步了，你要写成callback/promise/async-await，这样子写页面门槛又高了

7. es6了解不，说一下let、const的暂时性死区【描述】

概念性问题。没变量提高了，提早用会报错

8. set、map有什么好处，map和通常的对象有什么不同【描述】

概念性问题。map能够用复杂数据类型作key

9. 跨端的方案【描述】

内嵌webview、客户端内嵌js引擎、将js编译为客户端语言运行

10. 编程题：字符串相乘【编程】

实际上你能够理解为大数相乘。整体很快写出来，可是本身debug的时候，花了很长很长时间，由于在debug的时候console了一下index，发现index竟然错位，疯狂怀疑人生，尴尬。最终找到了缘由（啼笑皆非）——每次面试牛客网编辑器有一个console.log('hello world')的，我通常不会删掉。此次我竟然删了，致使什么现象呢，就是这样：

输出结果: 0
1
复制代码

而我指望的是

输出结果: 
0
1
复制代码

若是你不删掉系统默认的一句hello world，用的时候0在第二行开始，不会以为有什么问题

输出结果: hello world
0
1
复制代码

忽然删掉console.log('hello world')，目光直接到第二行，第一个index是1！那种心情。。。写代码几分钟，傻乎乎debug20分钟。面试官说，看你coding挺欢乐的，不错。我说看错这个console了，害得我白搞那么久。他说没事，问题不大

二面面试官，每次我说完一个问题，他都会说“谢谢”，挺有意思的。后面闲聊了好久，到7点了，我说虾皮下班时间到了，差很少了吧。他说陪你继续聊聊，没事的(暗示：你过了)。而后又多聊了20分钟，最后他再次重复了他们的业务，而后我也问了一下语言、app国际化方案怎么作，收获挺大的

小结

虾皮是毕业一两年内性价比最高的了，工资高，福利好，天天7点下班，并且在海外电商方面颇有潜力。目前我所看见的虾皮，在你们口中几乎是没有差评的

做业帮

公司面试难度评估：✭✭✩✩✩

1面

1. 一堆看代码说输出的题【描述】

就是this、变量提高、闭包、event loop说输出的那些基础题。这些必须秒答出来且答对，基础必定不能有差错。到了这个阶段，这些题应该是送温暖的

2. 项目介绍【描述】

3. cache-loader有什么坑，缓存错误怎么解决【描述】【举例】

面试官提到，他们作一个可视化编辑页面的系统，对组件使用了cache-loader，开发中有时候出现缓存错误的文件的问题。他说他们遇到了这个问题，暂时没有解决，叫我猜测一下，多是什么缘由致使的。我说应该是开发过程当中，修改了被引用模块/引用模块、或者切换git分支，须要本身删除掉node_modules/.cache或者重启dev server。

4. 编程题，9选3（15min）【编程】

• 实现bind(送分)
• 防抖&节流(送分)
• settimeout实现interval(注意和普通的要无差异体验)

;(() => {
  const list = new Set();
  function myInterval(fn, ms) {
    const ref = {};
    const exec = () => {
      return setTimeout(() => {
        fn.apply(null);
        const timer = exec();
        ref.current = timer;
      }, ms);
    };
    ref.current = exec();
    list.add(ref);
    return ref;
  }

  function myClearInterval(ref) {
    clearTimeout(ref.current);
    list.delete(ref);
  }
  window.myInterval = myInterval;
  window.myClearInterval = myClearInterval;
})()
复制代码

• 字符串大小写反转(送分)

节点是否是属于某个节点下(当时我写了一个不带parentid的版本，要本身一层层搜。若是带parentid的，就简单不少了，测试用例你本身写，他们也没有给出)

• 反转链表(常规题)
• 合并数组['a', 'b'], [1, 2, 3] => ['a', 1, 'b', 2, 3] (送分)
• 合并有序数组 [1, 5], [2, 5, 6, 8] => [1, 2, 5, 5, 6, 8] (常规题，并且比合并有序链表还要简单一些)
• 一堆数字字符串组成最大数是多少[50, 2, 5, 9] => 95502 (字典序+贪心)

function getMaxNumber(arr) {
  return arr.sort().reduce((acc = '', cur) => Math.max(+`${acc}${cur}`, +`${cur}${acc}`));
}
复制代码

都属于比较简单的且经典的，能够看成练练手。绝不夸张的说，实现interval和最后一题稍微能扛多一阵，其余的那些经典的题，若是你们平时了解过的均可以秒杀的。

编程题说9选3，可是做为有追求的人，除了面试过了拿offer，还应该追求高评价，拿到更多的薪水和更高的定级。那么，15分钟内甚至10分钟内，把它们所有写了吧。平均每题不用1分钟，单链表和判断节点祖先花了一点时间写测试用例。我是从最后一题开始倒着作的，面试官看着都呵呵笑了，说继续干，有时间就继续，能够能够！最后口头问了一下如何判断链表有没有环，我说快慢指针。

2面

1. 说项目，深挖【描述】

2. react生命周期和diff算法【描述】

新的、旧的，hook替代的。树、组件、列表三种diff(故意引话题，等他问key)

3. key的做用【描述】

复用元素，描述一下有key的列表diff过程(果真问了key)

4. 内部系统配置页面不写或少写代码的实现思路【描述】【举例】

新建页面 => 设置配置、db => 新页面onload => 拉配置，根据db的字段和配置渲染表格 => 配置不能知足的使用装饰器劫持实现个性化 => 业务代码&框架代码分离(微前端架构)

5. 多框架、历史页面怎么解决【举例】

旧页面iframe、新页面走上面的流程，多框架使用external + 动态引入

后面我问问题的时候，发现他们的基础设施、开发流程有一些能够优化的地方，我说了一些本身的见解，面试官挺开心的样子，说回去看一下

小结

此次社招面试中最简单的一家了，全程很轻松，而且掌握了主动权把控面试节奏。cache-loader有什么坑，缓存错误怎么解决，这个问题我也没遇到过，面试的回答只是根据做用来猜测的，路过的有人知道或者遇到的话能够分享一下。

猿辅导

公司面试难度评估：✭✭✭✭✭

1面

1. react生命周期介绍，怎么执行。说一下下面的组件生命周期执行顺序【描述】有<A> <B /> </A>这样的组件：

a.willMount 3
b.willMount 1
a.didMount 4
b.didMount 2
复制代码

2. redux vs context，为何不用context【描述】

随意修改，莫名其妙的bug。redux将这个过程规范化，单向数据流

3. react 17要作什么规划，concurrent mode【描述】

concurrent mode、去掉危险的生命周期。concurrent mode是react重点面试题了，基于requestidlecallback实现(考虑兼容性，官方本身实现了一个)——浏览器空闲的时候作事情

4. SSR，打开大家的SSR页面看看，具体逻辑、实现方式【描述】

发了一个咱们的连接给他，并描述了流程

5. promise.then(f1, f2)``和promise.then(f1).catch(f2)区别【描述】

捕获所有上游和捕获本次then

6. () => {} vs function () {}【描述】

送分。无argument、this是定义那一层、箭头能够指向返回值

7. 说输出【描述】

const obj = {
  f1: () => console.log(this),
  f2() { console.log(this) },
};
obj.f1() // global
obj.f2() // obj
new obj.f1; // instance
new obj.f2; // instance
复制代码

8. Map/Set、WeakMap，什么做用【描述】

map能够用对象作key，set作集合使用。WeakMap弱引用，防止内存泄露

9. 用setTimeout实现setInterval【编程】

又问到了，频率有点高

10. Node { value: number; children: Node[] }，算出树每一层节点和，输出数组【编程】

2         => 2

2      3      5  => 10

1   2  3   4   7 8 => 25

// 每一层的和 [2, 10, 25]；
复制代码

使用bfs可秒杀

1面中规中矩，面试官语速比较慢，听起来无压力，很轻松。后面问问题发现我作的一些东西和他们的差很少，感受也是无缝衔接。而后了解到了公司下班时间也很早，福利也很好

2面

1.节流、和防抖的区别，均匀的节流怎么实现【编程】

一会儿写了最简单的出来，而后他要各类改需求，加功能。要支持配置立刻执行、要防抖节流两个结合起来、要均匀

2. http缓存、强制缓存里面expire和cache-control做用，什么坑【描述】

重点题，频率很高。expire须要保证时间准确

3. 前端路由实现。history什么坑，怎么解决【描述】

哈希和history，监听事件、切换元素。history会致使一些新路径404，nginx重定向到首页走js逻辑

4. var、let、const区别，() => {} vs function () {}【描述】

基础送分题

5. 一副扑克牌，随机抽 5 张，判断是不是顺子，大小王能够替代任意牌。【编程】

['A', '2', '3', 'S', 'B'] => true 先把AJQK映射成数字，而后把大小王S、B换成其余(我直接用symbol代替了)。排序去掉大小王的数组。遍历排序后数组，前一个数和后一个数字差距大于1，减小大小王数量来补。临界条件：前一个数和后一个数字差距大于1且大小王不够补，return false；成功遍历全部的元素，return true

（这里有点尴尬，忘记转数字类型了，很快写完了，但一直有问题，傻乎乎的debug，牛客网打印出来的结果也不知道是什么类型，都是黑色字。后面猜想是类型问题，typeof一看，哦果真是类型问题，加一个+号转数字，解决）

6. ES5 实现 B 继承 A【编程】

为了表现，确定是直接写寄生组合继承啦

2面面试官喜欢挖问题继续问，防抖节流硬生生写成了一个几十行的轮子了，不过我挺喜欢这种面试模式，临时造轮子改需求，随意天马行空地发挥，很好玩

3面

1. 项目难点，画一下架构【举例】

临时给了一个在线文档地址，而后手绘了架构图

2. 有了解其余权限系统吗，对比下【描述】

纠结了一阵我作的权限系统到底是rbac几。前端控制、后端按需返回

3. http请求的整个过程【描述】

经典题url到页面过程当中的一部分——发请求到响应那段

4. 怎么知道一个tcp请求数据已经完了呢【描述】

本身知道的，没有长度了

5. 微博的@的下面出现一个提示怎么实现(pc上，相似群里讲话按下@，旁边有一个名字下拉框的那个功能)。不是editable喔，基于textarea怎么实现【伪代码】【描述】

一会儿说了editable，他说你看看，他是textarea。接着有两种方式，隐藏元素+getboundingclientrect和canvas的mesuretext量长度。他后面说量长度不太行，并且很麻烦

6. 怎么知道客户端是局域网下哪个ip【描述】

客户端链接服务端的时候会携带本身的ip，服务器接收

7. 为何是tcp而不是udp。tcp丢包怎么办，怎么知道丢包，怎么知道已经重传成功了【描述】

TCP三次握手保证可靠性，而UDP就没有了，信息发出后,不验证是否到达，不可靠。丢包就重传。有seq，是连续的，若是收到的是不连续，说明中间缺了包；或者是超时了还没收到。由于有seq吧，因此多一个少一个也是知道的

8. 了解http3的quic吗【描述】

udp快而不可靠，因此衍生quic。对比http2+tcp+tls，quic减小了tcp、tls握手，改进了拥塞控制，前向冗余纠错

9. quic怎么解决了tcp的问题【描述】

使用udp做为基础，瞎讲一通拥塞控制、前向冗余纠错、bbr，所知道的概念都甩出去了

10. quic用udp怎么保证了可靠性【描述】

用rudp来优化资源的占用率和响应时间，提升系统的并发能力。seq、超时重传、fec前向纠错

11. quic的udp若是不握手，人家随便发请求怎么办【描述】

滑动窗口、bbr 拥塞算法

12. 函数式编程、纯函数【描述】

先喘一口气，终于不问网络协议了。纯函数无反作用，一样的输入一样的输出。那我在里面定义变量和函数，里面作一些事情作一些修改这些变量的操做，还纯吗？同样的。

13. 状态管理系统设计，怎么和函数式编程结合【描述】【举例】

常规react+redux项目举例

14. rxjs介绍一下【描述】

之前玩过，异步流程控制，流、管道操做符概念

15. 数组和链表的区别【描述】

数组易读取，链表只能一个个读或者须要额外空间才能易读取；数组增删元素须要照顾index，链表不用

16. 数组和链表优势缺点，应用场景【举例】

数组增删的时候须要维护index，链表不须要考虑，但链表读取某一项就比较麻烦。不少状况下，简单的列表遍历用哪一个都同样。数组的优点在于须要index的时候，随时读取某一个。链表能够模拟任何流程，并能够随时中断/继续，好比react的fiber使用链表能够随时回到当前状态

这是部门前端老大了，也是最难的一面了，被虐到狗血淋头。面试官人挺温柔的，前面的题答出来的时候也感受很舒畅。后面各类被虐，由于不是科班出身，这些知识细节漏了太多，我只能尽本身所了解的都吐出去了，可能说了不少含含糊糊的、没有系统性的东西，知道什么和那个点相关的都讲了。我看见他在旁边笑了(感受是"你仍是太年轻了"的那种笑)，突然感受局面很凉，第一次完全的慌了，而后到了完全的崩溃。回去我也默认本身三面挂了，也和朋友说我三面挂了，人家晚上还安慰了我一波。结果过了几天，说offer到了。。。

小结

遇到了本次出去社招最难一面，也充分暴露出野生前端的不足，计算机网络知识不系统，零零散散。这一块后面得补回来了

他们部门用的是ng全家桶，自动化测试也作得很到位。至于为何用ng，他们老大说：“由于react生态太丰富了，咱们作技术选型或者开发到后面会常常要考虑对比各类方案、要调研，不想花太多时间纠结生态，直接上ng一了百了”。这个理由，挺有道理的，我在咱们团队也作过一些系统的前端架构设计、作过技术选型、带头作过升级react，也取得让我引觉得傲的效果，但就没有往这个方面去思考过，面试官这个思考角度让我豁然开朗——原来事情能够这样思考。另外，如今ng的ivy也挺出彩的，你们有时间能够去了解一下

猿辅导是个很不错的公司，技术也挺强的，并且通常78点下班。还有，别忘了猿辅导是传说中开发实习生800一天的公司，除了这个，福利也挺多、挺到位的，员工关怀像腾讯同样到位

商汤科技

公司面试难度评估：✭✭✭✭✩

1面

1. 看见你写的文章，还很深的，说一下这几篇【描述】

挺surprise的，竟然有人那么用心看我文章，还看细节。因而带着兴奋的心情火烧眉毛和他介绍了

2. react的class组件和函数组件有什么不一样【描述】

class组件有生命周期有状态、函数组件就看返回值无状态(如今有hook了)

3. class组件存在问题，函数组件的问题【举例】

又是经典问题，class组件随着项目变大生命周期逻辑过于耦合、庞大，函数组件能够更细粒。class组件须要走实例化流程，但可使用装饰器。函数组件就不能使用装饰器了，函数组件ref须要forwardRef，不用纠结this。若是代码量都不少，函数组件可读性高一些

4. class组件和函数组件diff、渲染、挂载过程差别【描述】

实际上是同样的，最终结果有点不同，能够看打包后代码

5. em、px、rem【描述】

6. rxjs在复杂异步管理的做用【举例】

没有在项目用过，他们那边是挺须要rxjs这种异步管理的，把流程视为时间轴，使用管道操做符操做异步数据流。一切异步流程你均可以画在弹珠图上清晰看见

7. websocket和http协议区别【描述】

http无状态、被动；ws一次握手，知道状态，能够双向通讯

8. 彻底不一样的域名共享localstorage的方案【描述】

公共服务器双工通讯(比较简单暴力)、嵌套iframe并双向通讯(只要一个变了，立刻通知另外一方，保证他们的localstorage如出一辙)

9. 若是react项目要接入redux，每一步要怎么作【举例】

从api的使用到源码的实现。源码流程：provider传入store，connect要return一个组件，使用mapstatetoprops和mapdispatchtoprops扩展props，而后subscribe一下store，每次变化更新组件

10. 对象、引用类型、immutable、...、Object.assign【描述】

放松一下，咱们聊些简单的......

11. 写一个你熟悉的吧，antd的tree渲染这个数据结构【伪代码】

在面试的页面上直接写jsx，高亮看得难受，也没代码提示。真的是放松题了，一个递归，tree包一下treenode，完事

一面仍是挺轻松的，一种和人家交流技术的感受。后面聊了好久他们的业务，作ai编程的，提交程序放到一个平台上跑，全程websocket双向通讯，此时页面上有各类程序和图表，各类异步混杂起来，大概能够理解为何用rxjs了

2面

1. 项目深挖，反问一些问题【描述】

这里问了作数据mock的时候，若是有鉴权逻辑怎么办。可能有的人就立刻动手了：作一个鉴权服务。其实不须要，你要清楚你的目的是什么，你只须要mock鉴权失败的时候返回的内容就行，到时候你能够随意切换mock数据

2. settimeout(a, 3000); ...同步代码执行好久 settimeout(b, 1000)多少种状况，临界值【描述】【举例】

同步代码执行时间 <= 3000，顺序。> 3000先b再a

3. 为何会这样，说一下event loop【描述】

背书

4. 浏览器底层对线程冲突的实现【描述】

不知道了。对方说由于有一个watcher，你能够看一下Chrome底层实现，比死记硬背宏任务微任务更好

5. 一个页面，有图片、文字等各类内容，要求不能打乱排版和比例，如何兼容全部端【举例】

rem方案。但仍是要看状况，通常状况下，手机是竖着的，电脑是横着的，总要对其中一个补白，否则很难看

6. 浏览器缓存在spa的应用。html要不要缓存，为何？其余资源呢，为何【举例】

html不缓存，都是引用js，要保证最新。其余能够缓存，每次发布文件名都有md5保证不同，并且也是增量部署的

7. react性能优化【举例】

又是老问题了。scu生命周期、memo；usememo & usecallback记住一些值不用从新计算；虚拟列表；immutable+scu/memo；原生js；

8. 100条香蕉，猴子离家50米，猴子每走一米要吃一根香蕉，猴子最大负重是50条香蕉。问猴子怎么作，能够作到拿回家香蕉最大化，最大能够拿到多少条回家【伪代码】

结果是啥不重要了，主要是思路。他问用dp仍是贪心，我说都行吧，dp确定是能够，贪心也算得上是。写了一段伪代码，在离家n米处有s条香蕉，每次选择回头或者前进，回头的话会损失2 * (50 - n) + 1，并补全到50条(库存能支持的状况下，至关于新增量减去损失量);选择前进，只会减小1。每一步选择最多剩余的，等于下一步的s值。临界点：离家0米，s就是答案; 离家50米，s就是50

2面是有一点挑战的，由于setimeout那道题，面试官建议我看一下浏览器底层和v8，这样子深刻能够看到更多的东西。他说，只抱着一个mdn能学好前端吗？他们的业务是有作底层的，作直播+wasm的，技术仍是挺牛逼的。国内作这方面的人也很是少。还有我问了一下如何经过wasm让浏览器支持h265，他说只要你看视频编码解码，加上wasm基础，一个月内就能够了，这些东西外行人以为牛逼，其实只要你深刻看一下浏览器底层一些东西，看一下Chrome底层是怎么运行的，就一目了然了。面试官在听我项目的时候，说我产品sense很好。由于在个人一些项目中，除了身为开发，还要作项目规划、定方案、架构设计，还要作一名技术产品经理提需求并争取一些人力。后面还聊了不少其余的，他最后还介绍了一些国外优秀的文档资源给我，惋惜因为面试讨论得太兴奋，忘记加面试官微信了，有点亏

3面

1. 项目深挖、提问【描述】

2. 你项目怎么接入ci的，整个流水线是怎样【描述】

git提交 => lint执行 => 触发hook => 读取yml文件执行命令 => 部署 => 调用机器人接口发布企业微信群周知

3. 设计一个短连接系统【描述】

页面连接映射 => 关键字符串 => 映射到时间戳 + 数字序号转高进制 => 得到短连接。第一次映射是为了知足多对一，第二次映射是一对一，进制转换为了简化字符串

应该是技术老大了，知识面很广，和他交流我只回答我懂的那些，他也没有刁难，专门找我熟悉的来问。最后再次重复了一下他们的业务，ai编程、提交到一个平台运行、异步数据流很复杂

小结

知道了须要学一下底层，能够看到一些事情的本质，也了解了一些冷门领域和其余领域的东西。技术仍是玩得挺深的，可能比一些大厂的部门还要深

快手

公司面试难度评估：✭✭✭✩✩

1面

1. react升到16，有什么坑须要解决【描述】
2. 16后性能好多少，测过吗，你怎么测的。顺便问一下各类测速上报【描述】
3. 为何16的性能好，fiber流程是怎样的【描述】
4. 为何两个will生命周期要被标记为danger【描述】
5. 用了react的哪些新特性，带来什么收益【举例】
6. 浏览器http缓存那一套【描述】
7. from memory cache、from dist cache什么区别，性能对比【描述】
8. 根据什么而选from memory cache、from dist cache这两种缓存方案【描述】
9. service worker怎么理解【举例】
10. 输出一个字符串全排列【编程】

2面

1. 项目深挖，反问一些问题【描述】【举例】
2. react的setstate过程【描述】
3. 说一下几种状况的setstate的输出，为何【描述】
4. react的合成事件【描述】
5. 收到新state怎么更新，发生了什么事情【描述】
6. ssr过久，你以为什么缘由致使【举例】
7. ssr优化措施【举例】
8. react的ssr和传统的模版引擎渲染对比【描述】
9. ssr兜底容灾措施、降级措施【举例】
10. 如何选择csr仍是ssr，设计一套方案切换，让尽可能多的用户获得最好的体验【举例】
11. 有一个请求函数request，封装一下这个函数，使得多个相同的请求过来的时候不发请求，直接读取第一个的结果【编程】
12. 有一个排序数组，返回第一个比目标数字小的数，要求log(n)【编程】

3面

4个砝码，一个天平，问能称出多少种重量（砝码能够两边都放，砝码重量本身随便定）【写出运算过程】

砝码重量本身随便定，就定一个理想化的状况，四个不同的、且加起来也不存在重复的就行。若是你要考虑存在重量同样的两个砝码或者某些组合的和有相等的过程，那分类讨论够你折腾几个小时的。但面试只有20分钟，因此直接看理想状态的就行

小结

技术栈比较搭，基本用过的东西都是如出一辙的。快手终面喜欢问智力题、数学题，以前校招也是终面问智力题，你们要准备一下一些经典智力题和数学题。若是排列组合、几率论这些基础忘了，建议回去补一下

最后

面试过程总结

自我介绍

稳定一套台词，介绍我的基本信息，作了什么业务和什么技术栈，言简意赅最好控制20秒内

问项目

自我介绍完了，通常就是介绍项目。有时候是默认自我介绍带项目详情，此时要看面试官是否是这个意思。时间很少，因此必定要讲一个具备表明性的、能最好的突出本身的项目

正式问题

熟悉的领域，必定要争取机会表现，而不是仅仅为了讲出答案。你甚至能够临时换位思考，这我的要怎么回答你才以为他和其余人不同。若是是本身不怎么会的不熟悉的，要根据表现来猜想过程，这个是靠积累的。面试比之前考试好多了，起码不会的能够靠猜，由于不少东西都是相通的、相似的。反正我屡次都是猜的，回头查答案发现仍是蒙对了

你有什么想问个人吗

首先问对方业务、技术栈、团队是必须的，你也能够放到二面去问也行。其次是能够看成一个和你闲聊的人，聊一下其余的事情，好比一些其余技术、为何这样这样、公司方向、晋升、kpi、okr怎么定、考核之类的，或者加个微信。固然，必须根据对方性格来问，不能乱来说、乱来问。要时刻记得一个事情，这个过程，除了面试以外，应该是要有一些其余收获的。若是这半小时甚至两三小时，你只有面试没有收获，那就亏了

hr面

若是hr还问你项目，技术方面的能够简单跳过。若是是问人生规划、为何离职、怎么选择、怎么评价领导之类的，必定要说好话、说正能量的。背景都老实说吧，若是造假了，后面入职谁尴尬？背景调查查到了怎么办？你撒谎一句，那就须要再撒多几句慌来圆第一句。建议把本身想去的公司放最后去面，到时候问你你有其余offer吗，此时你就能够拿来抬价了。通常公司还会让你提供流水的，会根据上家的价和面试表现来定最终offer开多少价钱

鸡汤

只要一件事情能给你成长，不管过程，都是赚的了，最怕的就是一无所得，这样子只会浪费时间。看见不满意的、很差的，不要只看他很差的一面并没有限吐槽，而是尽力挖掘它的价值，并吸取为本身的经验。我作的一些项目也是和你们同样，搬砖，普普统统，但我不但愿普普统统，总会找机会搞点事情，尝试一下新的技术、新的方案、新的设计，并普及给团队其余小伙伴，这样子既能表现本身又能互利双赢。

不管作什么，不止前端，都应该要有本身的想法和思考，这样子才能把事情作好，作得更深。不然这就像一场梦，醒来仍是很感动。但愿各位读者，看上面的题目并非背答案，而是理解它，并能活用，之后作相似的事情，有参考的思路。若是遇到和我同一个面试官，题目固然是不彻底同样的，此时须要临场发挥本身的积累和灵活运用了。

最后再补充一点，若是你见过了广泛状况，了解到了广泛现象，那要是什么都和人家同样，最后不就是也成为广泛水平了吗？若是想脱离当前现状，实现突破，那么目标应该是成为有个性、有特点的、有区分度的人，成为一名不同的前端，不同的人。

全文花了比较长的时间，从规划到复盘、整理、输出，全是我的心血、真实经历，因此本文不转载，望谅解。关注公众号《不同的前端》，以不同的视角学习前端，快速成长，一块儿把玩最新的技术、探索各类黑科技