关于前端:一年半经验参加前端面试作业帮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

• 3 5 => 10

• 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、精准出击，一一击破面试题考点

面试实质也是考试，面试题就起到很好的考纲作用。想要获得优良的面试问题，刷面试题是必须的，除非你样样精通。
在看面试题的时候，应该从面试题发现考点，而后深刻学习考点相干的常识，千万不要陷入背题的误区。毕竟题目是多变的，但考点绝对固定。

这份前端面试题笔记增加上了数据结构和算法，小编发现还是有小伙伴算法这块比拟单薄，前面会专门针对算法的常识、学习办法等方面写篇文章（提前预报下嘿嘿），而这份材料就请点击这立刻获取噢

取长补短，但尽量争取

对于那些每个应聘者必备的技能，必须要相熟再相熟，不要让根底成为本人的短板，切合上一条重视根底。而对于其它技能，深刻学习其中的几个，而后想方法疏导面试官发问这些方面的问题。
如果面试官抛出了一个你稍有理解但不相熟的问题。不要慌，先思考片刻。整合本人晓得的，做一些正当的揣测。而后在答复的时候，先表明本人不是很相熟，但在学习其余常识的时候有接触过，简略说说本人的理解和推断。不少面试官会成心提出一些略微超出面试者能力的问题，考量面试者的临场能力和迁徙学习能力。
万一，明确面试官问题后，发现自己丝毫不会，间接表明，把面试官的注意力转移到下一道题，停留的时候长了，可能会放大这道题的影响。从容应对接下来的题目，面试官不会因为一两道题淘汰一个各方面都很优良的面试者。

结束语

其实在面试筹备阶段，集体的播种是很大的，我也认为这是一种不错的学习形式。首先，面试问题大部分根底而且深刻，这些是平时工作的根底。就如同咱们之前始终不明确学习语文的意义，但它的意义就在每天的谈话间。
所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使咱们更分心更深刻地去学习一些常识，也何尝不是一种坏事。