一年半经验前端社招——猿辅导（已拿offer）

前言

在鹅厂也呆了一年多了，业务一般般，而且很忙（晚上10点+，每天不定时随时oncall）。希望能换个平台稍微轻松一些的，并寻求更好的发展和更高的技术视野，也希望能找到轻松一些的工作，所以出来看机会了。个人选择的原则：满足工作生活平衡、付出收益平衡、业务未来可观三者之一。近来有一批面试，整理完每一篇后，会持续更新《一年半经验前端社招》系列的文章

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

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

往期回顾:

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

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

const obj = {‏‎ ‎
  f1:‏‎ ‎() => console.log(this),
  f2‏‎ ‎() { console.log(this) },
};
obj.f1() // global
obj.f2() // obj
new obj.f1; // instance
new obj.f2; // instance

Map/Set、WeakMap，什么作用【描述】
map可以用对象做key，set做集合使用。WeakMap弱引用，防止内存泄露

用setTimeout实现setInterval【编程】

(() => {
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;
})();

Node { value: number; children: Node[] }，算出树每一层节点和，输出数组【编程】
```
     2         => 2
2      3      5  => 10
1   2  3   4   7 8 => 25
// 每一层的和 [2, 10, 25]；
```
使用bfs可秒杀

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

2面

节流、和防抖的区别，均匀的节流怎么实现【编程】
一下子写了最简单的出来，然后他要各种改需求，加功能。要支持配置马上执行、要防抖节流两个结合起来、要均匀
http缓存、强制缓存里面expire和cache-control作用，什么坑【描述】
重点题，频率很高。expire需要保证时间准确
前端路由实现。history什么坑，怎么解决【描述】
哈希和history，监听事件、切换元素。history会导致一些新路径404，nginx重定向到首页走js逻辑
var、let、const区别，() => {} vs function () {}【描述】
基础送分题
一副扑克牌，随机抽 5 张，判断是否是顺子，大小王可以替代任意牌。【编程】
['A', '2', '3', 'S', 'B'] true
先把AJQK映射成数字，然后把大小王S、B换成其他(我直接用symbol代替了)。排序去掉大小王的数组。遍历排序后数组，前一个数和后一个数字差距大于1，减少大小王数量来补。临界条件：前一个数和后一个数字差距大于1且大小王不够补，return false；成功遍历所有的元素，return true
这里有点尴尬，忘记转数字类型了，很快写完了，但一直有问题，傻乎乎的debug，牛客网打印出来的结果也不知道是什么类型，都是黑色字。后面猜测是类型问题，typeof一看，哦果然是类型问题，加一个+号转数字，解决
ES5 实现 B 继承 A【编程】
为了表现，肯定是直接写寄生组合继承啦

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

3面

项目难点，画一下架构【举例】
临时给了一个在线文档地址，然后手绘了架构图
有了解其他权限系统吗，对比下【描述】
纠结了一阵我做的权限系统究竟是rbac几。前端控制、后端按需返回
http请求的整个过程【描述】
经典题url到页面过程中的一部分——发请求到响应那段
怎么知道一个tcp请求数据已经完了呢【描述】
微博的@的下面出现一个提示怎么实现(pc上，类似群里讲话按下@，旁边有一个名字下拉框的那个功能)。不是editable喔，基于textarea怎么实现【伪代码】【描述】
一下子说了editable，他说你看看，他是textarea。接着有两种方式，隐藏元素+getboundingclientrect和canvas的mesuretext量长度。他后面说量长度不太行，而且很麻烦
怎么知道客户端是局域网下哪一个ip【描述】
客户端连接服务端的时候会携带自己的ip，服务器接收
为什么是tcp而不是udp。tcp丢包怎么办，怎么知道丢包，怎么知道已经重传成功了【描述】
TCP三次握手保证可靠性，而UDP就没有了，信息发出后,不验证是否到达，不可靠。丢包就重传。有seq，是连续的，如果收到的是不连续，说明中间缺了包；或者是超时了还没收到。因为有seq吧，所以多一个少一个也是知道的
了解http3的quic吗【描述】
udp快而不可靠，所以衍生quic。对比http2+tcp+tls，quic减少了tcp、tls握手，改进了拥塞控制，前向冗余纠错
quic怎么解决了tcp的问题【描述】
使用udp作为基础，瞎讲一通拥塞控制、前向冗余纠错、bbr，所知道的概念都甩出去了
quic用udp怎么保证了可靠性【描述】
用rudp来优化资源的占用率和响应时间，提高系统的并发能力。seq、超时重传、fec前向纠错
quic的udp如果不握手，人家随便发请求怎么办【描述】
滑动窗口、bbr 拥塞算法
函数式编程、纯函数【描述】
先喘一口气，终于不问网络协议了。纯函数无副作用，同样的输入同样的输出。那我在里面定义变量和函数，里面做一些事情做一些修改这些变量的操作，还纯吗？一样的。
状态管理系统设计，怎么和函数式编程结合【描述】【举例】
常规react+redux项目举例
rxjs介绍一下【描述】
以前玩过，异步流程控制，流、管道操作符概念
数组和链表的区别【描述】
数组易读取，链表只能一个个读或者需要额外空间才能易读取；数组增删元素需要照顾index，链表不用
数组和链表优点缺点，应用场景【举例】
数组增删的时候需要维护index，链表不需要考虑，但链表读取某一项就比较麻烦。很多情况下，简单的列表遍历用哪个都一样。数组的优势在于需要index的时候，随时读取某一个。链表可以模拟任何流程，并可以随时中断/继续，比如react的fiber使用链表可以随时回到当前状态

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

最后

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

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

猿辅导是个很不错的公司，技术也挺强的，而且一般78点下班。还有，别忘了猿辅导是传说中开发实习生800一天的公司，除了这个，福利也挺多、挺到位的

#猿辅导##社招##前端工程师##面经#