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

前言

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

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

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

往期回顾:

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

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
  1. Map/Set、WeakMap,什么作用【描述】
    map可以用对象做key,set做集合使用。WeakMap弱引用,防止内存泄露

  2. 用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;
    })();
  3. 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一天的公司,除了这个,福利也挺多、挺到位的

#猿辅导##社招##前端工程师##面经#
全部评论
tql 向大佬学习
1 回复
分享
发布于 2020-04-07 20:17
大佬最后去哪了
点赞 回复
分享
发布于 2020-04-07 20:36
阿里巴巴
校招火热招聘中
官网直投
&膜
点赞 回复
分享
发布于 2020-04-07 21:01
感谢分享! 欢迎大佬参加我们的社招面经征集活动呀!有京东卡可以拿~社招面经征集|参加过社招的牛友,来发面经吧,拿京东卡~:https://www.nowcoder.com/discuss/374207 #社招面经#
点赞 回复
分享
发布于 2020-04-08 15:27
膜拜大佬,大佬面的是高级前端工程师么?好难的题😂
点赞 回复
分享
发布于 2020-04-09 22:43
为啥我投了猿辅导,直接显示不符合
点赞 回复
分享
发布于 2020-04-10 16:14
师兄好厉害!
点赞 回复
分享
发布于 2020-04-13 08:09
QUIC前几天还看了,都没你回答的全,想问一下资料在哪学习吗
点赞 回复
分享
发布于 2020-04-14 11:15

相关推荐

9 65 评论
分享
牛客网
牛客企业服务