2023前端实习生面试记录

10,739 阅读16分钟

2023前端实习生面试记录

关于我

掘友们大家好,我是碳苯,一个编程学习时长两年半的前端仔。

接触掘金快一年了,碍于水平有限,一直没敢发文。

但用舍由时,行藏在我,今天我也摩拳擦掌斗胆来一手班门弄斧!

或许我的文章水平不足以被你收藏,但是如果可以的话,还请我一个鼓励的赞吧!

这对我来说我莫大的支持!非常感谢!

冬天刚刚过去,但是环境也还是非常寒冷。这种情况下,我们更需要抱团取暖才能坚持下去,下面是本人23年前后找实习的一些面试总结,希望能帮到大家:

初创小厂

一面

  1. 做一下自我介绍(据说我说了两分钟)
  2. 对微前端的理解(追问微前端样式隔离)
  3. 对sandbox的理解(后知后觉可以说eval的)
  4. 浏览器事件循环
  5. NodeJS的事件循环
  6. 箭头函数和普通函数的区别(太久没复习只想起this...)
  7. JS事件代理
  8. Vue2和Vue3的区别(实际上个人更多是用React...)
  9. 组合式API和选项式API
  10. 组合式API的生命周期(只说了个Hook,不晓得欸)
  11. 数组常见的方法,其中哪些会改变原数组

不是挂了,是真的只有一面

咳咳,太久没面试有点紧张,自我介绍太长了需要压缩一点。

不过上来问微前端也给我整得有点懵,没答好,但是这之后几天我也没把微前端放在心上。 (埋下伏笔)

三线大厂

一面

没问我八股,自我介绍结束之后直接就扔一个设计图,让用React实现界面和功能...

什么?让我堂堂切图仔写界面,这简直就是什么金风玉露一相逢,胜却人间无数!

写了我一个半小时,终于给写完了,跟坐牢似的。

写完就算过了。

晚上又给我打电话口头聊了会,大概谈了下技术方向,个人成长等等。

hr面

  1. 自我介绍(压缩到了40s左右)
  2. 上一次实习的业务、薪资等
  3. 为什么这次选北京(这能为啥啊,这哪里是我能选的啊)
  4. 如果发offer,大概啥时候能来(学校还有考试要处理,最晚月底前)
  5. 有什么想问的(技术栈、业务方向、可否转正、有无导师)

说实话当时已经心动了,据说过去是架构大佬带着猛干

我的天啊,我都不敢想,架构师这几个字在我眼里都是冒金光的!

但是最后还是没去。

一线大厂

一面

  1. 自我介绍(40s)
  2. 第一段实习经历介绍
  3. 对微前端的理解(不是吧,又问这个,不过这次至少比上次答得好些)
  4. 身份认证(cookie,session,token)
  5. cookie有什么问题(存储,安全)
  6. 介绍token,为什么token可以解决前面的问题(忘了jwt原理,但是我说我通过https类比猜测一手,事后一看果然差不多)
  7. 跨站脚本攻击(token在头部,而cookie可以被获取并传递)
  8. vue、react解决了什么问题,说说理解(解决了我的吃饭问题)
  9. nodejs模块和es6的区别
  10. 用nodejs做了哪些东西(花里胡哨的玩具项目)
  11. http/1.1 http/2 websocket
  12. websocket之外,还有什么解决方案
  13. 项目中比较难的技术点,亮点(经典八股)
  14. 浏览器事件循环机制(强行扯上了八竿子打不着的尾递归)
  15. promise解决什么问题,async/await的优劣
  16. 观察this指向,严格模式class
  17. 手写题1:不传参,也不使用全局变量,实现一个函数,第n次调用则返回第n个质数
  18. 手写题2:扁平数组转树状
  19. 你有什么想问我的吗(如何成为编程带师,从拿来主义变为自我创造)

我的天神啊,面了90分钟,直接把另一家的面试挤掉了

由于时间太长了,中间可能还问了一些问题我也忘了...

不过经过这次我才发现我还挺能聊的...

二面

  1. 自我介绍
  2. 对微前端的理解(是什么,解决什么问题,怎么实现)
  3. 沙盒怎么实现(说了iframe,with和eavl,别的不知道)
  4. 样式隔离怎么实现(没答上来,后来才想起加个前缀不就完了,进一步还可以用传说中的影子dom)
  5. 现代微前端有哪些实现方案(只记得中心基座了...)
  6. React中useCallback和useMemo有什么区别,useCallback的应用场景(我说我忘了,面试官多次质疑我,说我肯定知道...)
  7. TS中type和interface有什么区别(啊,好经典的问题,然而我没复习只随便应付了两句)
  8. 动画实现,用transform和position: absolute两种哪个更好,为什么
  9. GPU加速的具体过程(不会)
  10. 浏览器接收到html文件后渲染的过程
  11. 生成render tree之后具体是做了什么(不会)
  12. 是只有WebGL相关的渲染才会用到GPU吗(当时答的所有渲染都会用到GPU的栅格化线程,不知道对不对)
  13. 题目1:this指针指向
  14. 详细说说箭头函数的this(上次面试不是问过吗...)
  15. 题目2:函数的参数传递策略(JS的传参策略)
  16. 题目3:柯里化
  17. 题目4:实现一个请求函数request,每次最多能并发max个请求,且要求尽可能快地完成它们(废了,没写出来)
  18. 你有什么想问我的吗(技术栈)

害怕极了,之后好几天都没消息,我大概是的确是寄了

结果没寄,后来去查了下GPU相关的内容,原来是层合成之类的内容

事后我仍然心有余悸...

之后好好猛学了准备了一波

三面+HR面

HR和leader一起来了,leader在另一场面试,HR先问了一些内容,然后leader才来的

面了一个小时,很多问题记不清了

  1. 自我介绍(压缩到30s了)
  2. 上次实习业务介绍
  3. 上次离职的原因(还得回去读书的嘛,不然怎么拿学位证捏)
  4. 有读研的打算吗(找不到工作那就只能读研了)
  5. 【leader上线】上次实习的业务针对什么用户,这些用户有什么特征(完全不懂啊...)
  6. 对于用户相关指标的理解(额,那个,其实我业务理解不太深入...)
  7. 前端性能指标,以及性能优化(Perfomance对象上的都是)
  8. xss攻击是什么,怎么防范(经典问题,然而我没背)
  9. BFF开发和前端开发的思维有什么不一样(当时说的是安全风险的来源)
  10. 当时的BFF是前端负责运维的吗,如果上线后BFF报错,怎么排查bug(其实我也不知道是谁在运维...而且没遇到过线上问题...)
  11. 微前端的理解,和iframe有什么区别(啥?iframe不算微前端吗?)
  12. Monorepo的好处
  13. 之前实习的作息时间,能实习多久
  14. 题目:正则实现数字字符串,在千位,十万位等以此类推的位置加上逗号
  15. 上次实习的最大的收获和挑战是什么(就是自己太菜)
  16. 在校最喜欢的课程是什么(物联网信息安全)
  17. 上次实习的leader对你的评价是什么(没有评价,他平时太忙,我走得太仓促)
  18. 上次实习周围的同事对你有没有什么建议(“你还是去读研吧”)
  19. 上次实习遇到过block case没有,怎么解决的(抱大腿)
  20. 能实习多久
  21. 你有什么想问我的吗(产品思维相关)

当时是阳了的第二天,感觉自己状态不太好,很多问题也没回答好。

但是万幸还是过了。

独角兽

一面

  1. 自我介绍
  2. 第一段实习的业务亮点(就是业务竟然能奇迹般地上线了)
  3. SVN和Git的区别,对Monorepo的理解
  4. NodeJS的事件轮询机制
  5. Vue和React更擅长哪个,为什么需要虚拟DOM
  6. 说说Vue的diff算法吧(我寻思这我要怎么说,难道背代码? 最后大概说了一下硬暴diff、双指针diff再到四指针diff)
  7. 题目: 乱序数组,A+B问题(开始没注意不保证有序,我反手一个二分查找,然后发现要排序,直接又是一个sort,再然后发现输出下标但是输出的是排序后的下标,最后再来个O(n^2)循环map映射一下,整体下来丑陋得一比。 写完面试官问我,“一定要排序吗?”。我灵机一动改用map优化到O(n)了。 不得不说虽然二分写得丑,但是也确实表现到位了。)
  8. for和forEach有什么区别
  9. 上次为什么离职,能实习多久
  10. 有什么想问我的吗(技术栈,之前提到的模块联邦是什么)

没怎么刷过力扣,后来才知道这是第一题...

难道说,我在面试官心里就只有这种水平吗,他和我看对眼了所以给我放水了?

二面

  1. 自我介绍
  2. . 说一说思路:打印一个二叉树的左视图
  3. 之前的项目或实习有什么挑战性的经历
  4. 上一段实习的收获是什么,这一次的实习的预期是什么
  5. 有什么想问我的吗(技术栈,部门业务,您关注的前端方向的新技术)

当时已经在等上一家大厂的面试结果了,想的是要是上一家挂了我就去杭州了。

有个认识的学长也在杭州,让他带着我猛学+健身也挺不错的。

可惜最后还是没去,所以健身就搁置了

一线大厂

一面

  1. 自我介绍
  2. 上次实习是做什么,介绍一下其业务交互相关的东西(做牛做马)
  3. 如果让你实现一个图片上传,你要考虑哪些东西(直接参考HTTP报文怎么传的)
  4. 大文件分片上传怎么实现,分片上传,断点续传,何时开始合并,丢包又怎么办(说了将近10分钟)
  5. ES6更新了哪些东西
  6. 细说promise
  7. 浏览器事件循环机制
  8. 经典的var声明变量,for循环里装一个setTimeout作为值,问输出结果,又有哪些办法能让输出结果变得符合预期
  9. 输入url之后到页面渲染之间的过程(分析到缓存的时候感觉面试官听背书听免疫了,我就开始快进了)
  10. 页面首次渲染时,可以进行用户交互的时机是什么(盲猜的DomLoaded)
  11. 如果dom已经挂载完毕,script还在加载,此时能够执行点击事件吗(我做了一波分析觉得可以,但是他后来说我理解有偏差)
  12. 题目:乱序数组,A+B问题,输出多对解(我傻了呀,怎么就又给我来这种题啊,简直是看不起我啊!我总不能又像上次一样强行写个二分吧。这种题直接给正经答案那我怎么表现自己啊,我反手一个node模式代码,终端标准输入流一把梭——面试官甚至一开始没看懂我写的是什么,确实狠狠装到了。)
  13. 还有什么想问我的吗(怎么指定复习计划比较合理,技术栈是什么)

最后说如果有消息会通知我,我感觉多半是寄了

但是还是收到了下一面的邀请... 让我非常震惊

二面

  1. 自我介绍
  2. 说一下对微前端的理解(又来是吧)
  3. 说一下electron的理解(只是用过,不了解原理)
  4. bind,call,apply有什么区别
  5. 现场写个小游戏:黑桃红桃A-8共计16张牌,4*4居中排列布局,开局洗牌随机分布。开始都是背面在上(蓝色),点击后翻牌,翻开两张牌后如果相同则消去,但布局不能改变;不相同则又翻回背面;(有点慌,没写完...)

最后还是过了,本来想着是大厂,去那里一定是会有非常多的收获。

当时我感觉还是非常向往的,直到看了一下北京一个月的房租...

普通小厂

HR面

非常有特色,竟然是先HR面过了才会有技术面

之前约面问我九点可以吗——当时我就知道这家公司多半是八点钟就上班了...

  1. 自我介绍
  2. 最早学习的框架
  3. 页面渲染时,vue2的生命周期触发哪些(除了created都忘了)
  4. 绩点排名,高考成绩,高考全省排名(瞬间我就怂了)
  5. 目前投递了哪些公司,有没有拿offer(投了一堆,拿了哪些不告诉你嘿嘿)
  6. 88*98是多少(大早上不太清醒愣是算了十秒左右,但是你这是问的什么啊)
  7. 8个外观一样的小球,其中有1个更重,最坏的情况下至少称几次能找到最重的这个(猜的二分, 3次)
  8. 预期薪资多少
  9. 你有什么想问我的吗(并没有)

这是唯一一家挂了的...

总结回顾

之后摆了几天大烂,天天通宵打游戏到早上七八点....

个人感受

全网共计发起400+应聘30+次查看简历6家面试

还有一家面试被上一家90分钟超长占线给挤掉了

后面在我入职的时候才又收到了几个简历通过的消息,就拒绝了,虽然很可惜,不过也没办法。

总的来说,失败是常态,成功只是无数失败中的偶然。

重要的题目

面试官根据简历上的技术问问题

综合我个人和其他同学的面试经历,一些问题经常出现:

  1. 【高频】对于微前端的理解

    概念/作用

    粉碎巨石,一个主应用+多个子应用,技术栈、打包构建等都是完全独立的,负责不同应用的团队可以选取最合适自身情况的技术栈,这样不仅可以提高开发效率,也可以降低团队人员学习的成本,也便于各个应用的技术栈更新(比如QQ,假设以前用的JQ,现在要用React,以前就只能直接推翻重写。而用微前端的话,重写子应用就行,减少破坏的范围)。

    实现方式

    主体框架:iframe,后端路由分发,模块联邦,中心基座

    样式隔离:css选择器加hash前缀,...(其他的忘了)

    JS隔离:函数作用域,eval作用域,with关键字

  2. 【高频】事件循环机制

    浏览器

    调用栈、宏任务队列、微任务队列,比较经典,顺着说一遍就完了

    V8

    和浏览器大体类似,只是宏任务分了6个类型,每次宏任务阶段,要执行6个类型(不用记完6个,记住timer类型和poll类型就行了)

  3. 【较多】设计文件分片上传

    (input类型设置为file,多文件还要额外写multiple,结合JS的fileReader来获取上传的内容,要对其类型做校验,并且要对超过大小阈值的文件进行切片再重新封装)

    转为二进制,然后按长度截断,封装成对象,维护两个值 当前对象的序号切片总数,发送给后端后,要及时确认是否丢包,参考TCP的操作,如果丢包了,那么在下一次成功请求的响应体里需要给出相应的信息。

    为了防止是最后一个包丢了,还要额外发起一次请求询问是否接收到了所有包,如果是,那么后端开始合并文件;如果不是则根据响应内容重新发送。

    (另外,HTTP报文里面有个range字段好像可以结合利用一下,但是我没有继续研究这一块了)

  4. 【高频】ES6相关

    1. Promise之类的一大把
    2. map和set之类的容器
    3. 迭代器——这个可以挖很深,比如深入一下Reflect对象(实际上从来没用过)
  5. 【较多】cookie,session和token

    cookie和session这个可以牵扯出浏览器存储相关的内容,如果擅长这方面的回答,可以试图引导面试官往这个方向靠。

    token可以类比SSL/TLS相关的内容,反正都差不多,就是围绕机密性、完整性和身份认证三个方面进行作答。

    cookie和session

    可以前端主动设置,也可以由后端的响应报文set-cookie来通知前端设置——sessionID就是后端产生,通过set-cookie来保存的。cookie有7个字段,比如expires过期时间、httpOnly限制JS不能获取等。cookie默认情况下会被请求自动放到cookie字段被带上。

    (但是实际上httpOnly一点都不安全,有很多奇技淫巧可以操作cookie,具体内容参考《前端黑客技术揭秘》和——虽然年代比较久远了,但是写得还是挺好)

    但是cookie的问题是跨域困难,且在分布式应用中,sessionID在多个服务器之间难以共享。

    JWT

    JSON Web Token,Token有三个部分:header,body和signature,header和body结合私钥签个名就有signature了,最后三个拼一块就成了token。

    由前端生成,header里写了用的什么签名算法。

    这里只需要保证数据的来源,即证明请求者的身份,所以只需要私钥加密签名。

    如果还需要保证内容不被篡改,那么还需要有内容摘要。

之后的打算

继续学一学JS相关的技术,感觉这真是一个很奇妙的语言,可以做很多有意思的事情。

另外也多看一看各种非技术类书籍,感觉还是要丰富一下业余生活,多看看屏幕外的世界。