前言

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

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

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

往期回顾:

• 一年半经验前端社招——拼多多（已面完hr）
• 一年半经验前端社招——字节跳动（已拿offer）
• 一年半经验前端社招——作业帮（offer call）
• 一年半经验前端社招——虾皮（已拿offer）

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

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

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【编程】

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

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一天的公司，除了这个，福利也挺多、挺到位的