一年半经验参加前端面试作业帮2面&猿辅导3面，道理我都懂，可猿辅导你3面就不能轻点虐嘛?!

前言

如果公司面试难度评估6颗星是最高的，那猿辅导相比作业帮是6颗星直接拉满，没有对比就没有伤害，不信往下看。

作业帮

一面

1、一堆看代码说输出的题
就是this、变量提升、闭包、event loop说输出的那些基础题。这些必须秒答出来且答对，基础一定不能有差错。到了这个阶段，这些题应该是送温暖的
2、项目介绍
3、cache-loader有什么坑，缓存错误怎么解决
面试官提到，他们做一个可视化编辑页面的系统，对组件使用了cache-loader，开发中有时候出现缓存错误的文件的问题。他说他们遇到了这个问题，暂时没有解决，叫我猜想一下，可能是什么原因导致的。我说应该是开发过程中，修改了被引用模块/引用模块、或者切换git分支，需要自己删除掉node_modules/.cache或者重启dev server。
4、编程题，8选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;
})()

• 字符串大小写反转
• 反转链表(常规题)
• 合并数组['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}`));
}

二面

1、说项目，深挖
2、react生命周期和diff算法
新的、旧的，hook替代的。树、组件、列表三种diff(故意引话题，等他问key)
3、key的作用【描述】
复用元素，描述一下有key的列表diff过程(果然问了key)
4、内部系统配置页面不写或少写代码的实现思路
新建页面 => 设置配置、db => 新页面onload => 拉配置，根据db的字段和配置渲染表格 => 配置不能满足的使用装饰器劫持实现个性化 => 业务代码&框架代码分离(微前端架构)
5、多框架、历史页面怎么解决
旧页面iframe、新页面走上面的流程，多框架使用external + 动态引入

感想

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

猿辅导

一面

1、react生命周期介绍，怎么执行。说一下下面的组件生命周期执行顺序
有 这样的组件：

a.willMount 3
b.willMount 1
a.didMount 4
b.didMount 2

2、redux vs context，为什么不用context
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]；

二面

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
6、ES5 实现 B 继承 A

三面

1、项目难点，画一下架构
2、有了解其他权限系统吗，对比下
3、http请求的整个过程
经典题url到页面过程中的一部分——发请求到响应那段
4、怎么知道一个tcp请求数据已经完了呢
5、怎么知道客户端是局域网下哪一个ip
客户端连接服务端的时候会携带自己的ip，服务器接收
6、为什么是tcp而不是udp。tcp丢包怎么办，怎么知道丢包，怎么知道已经重传成功了
TCP三次握手保证可靠性，而UDP就没有了，信息发出后,不验证是否到达，不可靠。丢包就重传。有seq，是连续的，如果收到的是不连续，说明中间缺了包；或者是超时了还没收到。因为有seq吧，所以多一个少一个也是知道的
7、了解http3的quic吗
udp快而不可靠，所以衍生quic。对比http2+tcp+tls，quic减少了tcp、tls握手，改进了拥塞控制，前向冗余纠错
8、quic怎么解决了tcp的问题
9、quic用udp怎么保证了可靠性
用rudp来优化资源的占用率和响应时间，提高系统的并发能力。seq、超时重传、fec前向纠错
10、quic的udp如果不握手，人家随便发请求怎么办
滑动窗口、bbr 拥塞算法
11、函数式编程、纯函数
12、状态管理系统设计，怎么和函数式编程结合
常规react+redux项目举例
13、数组和链表的区别
数组易读取，链表只能一个个读或者需要额外空间才能易读取；数组增删元素需要照顾index，链表不用
14、数组和链表优点缺点，应用场景
数组增删的时候需要维护index，链表不需要考虑，但链表读取某一项就比较麻烦。很多情况下，简单的列表遍历用哪个都一样。数组的优势在于需要index的时候，随时读取某一个。链表可以模拟任何流程，并可以随时中断/继续，比如react的fiber使用链表可以随时回到当前状态

感想

遇到了本次出去社招最难一面，也充分暴露出野生前端的不足，计算机网络知识不系统，零零散散。2面面试官喜欢挖问题继续问还能招架住，3面被虐的好惨，技术不够，胡编来凑。

面试心法

1、精准出击，逐个击破面试题考点

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。
在看面试题的时候，应该从面试题发现考点，然后深入学习考点相关的知识，千万不要陷入背题的误区。毕竟题目是多变的，但考点相对固定。

有需要的朋友可以戳此传送门即可获取完整版的 PDF 哦

这份前端面试题笔记添加上了数据结构和算法，小编发现还是有小伙伴算法这块比较薄弱，后面会专门针对算法的知识、学习方法等方面写篇文章（提前预告下嘿嘿），有需要的朋友可以戳此传送门即可获取完整版的 PDF 哦

扬长避短，但尽量争取

对于那些每个应聘者必备的技能，必须要熟悉再熟悉，不要让基础成为自己的短板，切合上一条注重基础。而对于其它技能，深入学习其中的几个，然后想办法引导面试官提问这些方面的问题。
如果面试官抛出了一个你稍有了解但不熟悉的问题。不要慌，先思考片刻。整合自己知道的，做一些合理的推测。然后在回答的时候，先表明自己不是很熟悉，但在学习其他知识的时候有接触过，简单说说自己的了解和推断。不少面试官会故意提出一些稍微超出面试者能力的问题，考量面试者的临场能力和迁移学习能力。
万一，明确面试官问题后，发现自己丝毫不会，直接表明，把面试官的注意力转移到下一道题，停留的时候长了，可能会放大这道题的影响。从容应对接下来的题目，面试官不会因为一两道题淘汰一个各方面都很优秀的面试者。

结束语

其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。
所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。