一年半经验参加前端面试作业帮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、精准出击,逐个击破面试题考点

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

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

这份前端面试题笔记添加上了数据结构和算法,小编发现还是有小伙伴算法这块比较薄弱,后面会专门针对算法的知识、学习方法等方面写篇文章(提前预告下嘿嘿),而这份资料就请点击这立即获取噢

扬长避短,但尽量争取

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

结束语

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

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