受年初疫情影响，今年各大学校纷纷开启线上教学，这也使得线上教育赢来了爆发期。随之而来的是线上教育机构用人需求的激增，今天要为大家分享的面试经验是来自猿辅导前端面试题，该同学目前已经拿到offer，包含1、2、3面。希望能够为正在找工作的你，带去一些启发：

猿辅导一面

1

1.react生命周期介绍，怎么执行。说一下下面的组件生命周期执行顺序【描述】

<A> <B /> </A>

a.willMount 3

b.willMount 1

a.didMount 4

b.didMount 2

react16前是递归的，是这个顺序。react16后改成fiber架构，是反过来的了，没有像栈那样fifo

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. 说输出【描述】

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

map可以用对象做key，set做集合使用。WeakMap弱引用，防止内存泄露

9.用setTimeout实现setInterval【编程】

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

使用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使用链表可以随时回到当前状态。

总结：3面是部门前端老大面的，也是最难的一面了。面试官人挺温柔的，前面的题答出来的时候也感觉很舒畅。后面各种被虐，因为不是科班出身，这些知识细节漏了太多，我只能尽自己所了解的都吐出去了，可能说了很多含含糊糊的、没有系统性的东西，知道什么和那个点相关的都讲了。我看见他在旁边笑了，忽然感觉局面很凉。回去我也默认自己三面挂了，结果过了几天，说offer到了。

想要高薪掌握一门技术，这是最便捷的一条通道！千锋12大学科紧跟IT发展脉搏，名师大咖指点迷津让你少走弯路，更有企业内推大厂名额，关注千锋教育知乎账号即可领取千锋教育所有的视频学习教程，包括HTML5大前端、JavaEE+分布式开发、Python全栈+人工智能、全链路UI/UE设计、云计算、全栈软件测试、大数据+人工智能、智能物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言开发等学科学习资料和免费试听网课选择。