1、初创小厂
一面
- 做一下自我介绍(据说我说了两分钟)
- 对微前端的理解(追问微前端样式隔离)
- 对sandbox的理解(后知后觉可以说eval的)
- 浏览器事件循环
- NodeJS的事件循环
- 箭头函数和普通函数的区别(太久没复习只想起this...)
- JS事件代理
- Vue2和Vue3的区别(实际上个人更多是用React...)
- 组合式API和选项式API
- 组合式API的生命周期(只说了个Hook,不晓得欸)
- 数组常见的方法,其中哪些会改变原数组。
不是挂了,是真的只有一面
咳咳,太久没面试有点紧张,自我介绍太长了需要压缩一点。
不过上来问微前端也给我整得有点懵,没答好,但是这之后几天我也没把微前端放在心上。(埋下伏笔)
2、三线大厂
一面
没问我八股,自我介绍结束之后直接就扔一个设计图,让用React实现界面和功能...
什么?让我堂堂切图仔写界面,这简直就是什么金风玉露一相逢,胜却人间无数!
写了我一个半小时,终于给写完了,跟坐牢似的。
写完就算过了。
晚上又给我打电话口头聊了会,大概谈了下技术方向,个人成长等等。
hr面
- 自我介绍(压缩到了40s左右)
- 上一次实习的业务、薪资等
- 为什么这次选北京(这能为啥啊,这哪里是我能选的啊)
- 如果发offer,大概啥时候能来(学校还有考试要处理,最晚月底前)
- 有什么想问的(技术栈、业务方向、可否转正、有无导师)
说实话当时已经心动了,据说过去是架构大佬带着猛干
我的天啊,我都不敢想,架构师这几个字在我眼里都是冒金光的!
但是最后还是没去。
3、一线大厂
一面
- 自我介绍(40s)
- 第一段实习经历介绍
- 对微前端的理解(不是吧,又问这个,不过这次至少比上次答得好些)
- 身份认证(cookie,session,token)
- cookie有什么问题(存储,安全)
- 介绍token,为什么token可以解决前面的问题(忘了jwt原理,但是我说我通过https类比猜测一手,事后一看果然差不多)
- 跨站脚本攻击(token在头部,而cookie可以被获取并传递)
- vue、react解决了什么问题,说说理解(解决了我的吃饭问题)
- nodejs模块和es6的区别
- 用nodejs做了哪些东西(花里胡哨的玩具项目)
- http/1.1 http/2 websocket
- websocket之外,还有什么解决方案
- 项目中比较难的技术点,亮点(经典八股)
- 浏览器事件循环机制(强行扯上了八竿子打不着的尾递归)
- promise解决什么问题,async/await的优劣
- 观察this指向,严格模式class
- 手写题1:不传参,也不使用全局变量,实现一个函数,第n次调用则返回第n个质数
- 手写题2:扁平数组转树状
- 你有什么想问我的吗(如何成为编程带师,从拿来主义变为自我创造)
我的天神啊,面了90分钟,直接把另一家的面试挤掉了
由于时间太长了,中间可能还问了一些问题我也忘了...
不过经过这次我才发现我还挺能聊的...
二面
- 自我介绍
- 对微前端的理解(是什么,解决什么问题,怎么实现)
- 沙盒怎么实现(说了iframe,with和eavl,别的不知道)
- 样式隔离怎么实现(没答上来,后来才想起加个前缀不就完了,进一步还可以用传说中的影子dom)
- 现代微前端有哪些实现方案(只记得中心基座了...)
- React中useCallback和useMemo有什么区别,useCallback的应用场景(我说我忘了,面试官多次质疑我,说我肯定知道...)
- TS中type和interface有什么区别(啊,好经典的问题,然而我没复习只随便应付了两句)
- 动画实现,用transform和position: absolute两种哪个更好,为什么
- GPU加速的具体过程(不会)
- 浏览器接收到html文件后渲染的过程
- 生成render tree之后具体是做了什么(不会)
- 是只有WebGL相关的渲染才会用到GPU吗(当时答的所有渲染都会用到GPU的栅格化线程,不知道对不对)
- 题目1:this指针指向
- 详细说说箭头函数的this(上次面试不是问过吗...)
- 题目2:函数的参数传递策略(JS的传参策略)
- 题目3:柯里化
- 题目4:实现一个请求函数request,每次最多能并发max个请求,且要求尽可能快地完成它们(废了,没写出来)
- 你有什么想问我的吗(技术栈)
害怕极了,之后好几天都没消息,我大概是的确是寄了
结果没寄,后来去查了下GPU相关的内容,原来是层合成之类的内容
事后我仍然心有余悸...
之后好好猛学了准备了一波
三面+HR面
HR和leader一起来了,leader在另一场面试,HR先问了一些内容,然后leader才来的
面了一个小时,很多问题记不清了
- 自我介绍(压缩到30s了)
- 上次实习业务介绍
- 上次离职的原因(还得回去读书的嘛,不然怎么拿学位证捏)
- 有读研的打算吗(找不到工作那就只能读研了)
- 【leader上线】上次实习的业务针对什么用户,这些用户有什么特征(完全不懂啊...)
- 对于用户相关指标的理解(额,那个,其实我业务理解不太深入...)
- 前端性能指标,以及性能优化(Perfomance对象上的都是)
- xss攻击是什么,怎么防范(经典问题,然而我没背)
- BFF开发和前端开发的思维有什么不一样(当时说的是安全风险的来源)
- 当时的BFF是前端负责运维的吗,如果上线后BFF报错,怎么排查bug(其实我也不知道是谁在运维...而且没遇到过线上问题...)
- 微前端的理解,和iframe有什么区别(啥?iframe不算微前端吗?)
- Monorepo的好处
- 之前实习的作息时间,能实习多久
- 题目:正则实现数字字符串,在千位,十万位等以此类推的位置加上逗号
- 上次实习的最大的收获和挑战是什么(就是自己太菜)
- 在校最喜欢的课程是什么(物联网信息安全)
- 上次实习的leader对你的评价是什么(没有评价,他平时太忙,我走得太仓促)
- 上次实习周围的同事对你有没有什么建议(“你还是去读研吧”)
- 上次实习遇到过block case没有,怎么解决的(抱大腿)
- 能实习多久
- 你有什么想问我的吗(产品思维相关)
当时是阳了的第二天,感觉自己状态不太好,很多问题也没回答好。
但是万幸还是过了。/
4、独角兽
一面
- 自我介绍
- 第一段实习的业务亮点(就是业务竟然能奇迹般地上线了)
- SVN和Git的区别,对Monorepo的理解
- NodeJS的事件轮询机制
- Vue和React更擅长哪个,为什么需要虚拟DOM
- 说说Vue的diff算法吧(我寻思这我要怎么说,难道背代码? 最后大概说了一下硬暴diff、双指针diff再到四指针diff)
- 题目: 乱序数组,A+B问题(开始没注意不保证有序,我反手一个二分查找,然后发现要排序,直接又是一个sort,再然后发现输出下标但是输出的是排序后的下标,最后再来个O(n^2)循环map映射一下,整体下来丑陋得一比。写完面试官问我,“一定要排序吗?”。我灵机一动改用map优化到O(n)了。不得不说虽然二分写得丑,但是也确实表现到位了。)
- for和forEach有什么区别
- 上次为什么离职,能实习多久
- 有什么想问我的吗(技术栈,之前提到的模块联邦是什么)
没怎么刷过力扣,后来才知道这是第一题...
难道说,我在面试官心里就只有这种水平吗,他和我看对眼了所以给我放水了?
二面
- 自我介绍
- . 说一说思路:打印一个二叉树的左视图
- 之前的项目或实习有什么挑战性的经历
- 上一段实习的收获是什么,这一次的实习的预期是什么
- 有什么想问我的吗(技术栈,部门业务,您关注的前端方向的新技术)
当时已经在等上一家大厂的面试结果了,想的是要是上一家挂了我就去杭州了。
有个认识的学长也在杭州,让他带着我猛学+健身也挺不错的。
可惜最后还是没去,所以健身就搁置了。/
5、一线大厂
一面
- 自我介绍
- 上次实习是做什么,介绍一下其业务交互相关的东西(做牛做马)
- 如果让你实现一个图片上传,你要考虑哪些东西(直接参考HTTP报文怎么传的)
- 大文件分片上传怎么实现,分片上传,断点续传,何时开始合并,丢包又怎么办(说了将近10分钟)
- ES6更新了哪些东西
- 细说promise
- 浏览器事件循环机制
- 经典的var声明变量,for循环里装一个setTimeout作为值,问输出结果,又有哪些办法能让输出结果变得符合预期
- 输入url之后到页面渲染之间的过程(分析到缓存的时候感觉面试官听背书听免疫了,我就开始快进了)
- 页面首次渲染时,可以进行用户交互的时机是什么(盲猜的DomLoaded)
- 如果dom已经挂载完毕,script还在加载,此时能够执行点击事件吗(我做了一波分析觉得可以,但是他后来说我理解有偏差)
- 题目:乱序数组,A+B问题,输出多对解(我傻了呀,怎么就又给我来这种题啊,简直是看不起我啊!我总不能又像上次一样强行写个二分吧。这种题直接给正经答案那我怎么表现自己啊,我反手一个node模式代码,终端标准输入流一把梭——面试官甚至一开始没看懂我写的是什么,确实狠狠装到了。)
- 还有什么想问我的吗(怎么指定复习计划比较合理,技术栈是什么)
最后说如果有消息会通知我,我感觉多半是寄了
但是还是收到了下一面的邀请... 让我非常震惊
二面
- 自我介绍
- 说一下对微前端的理解(又来是吧)
- 说一下electron的理解(只是用过,不了解原理)
- bind,call,apply有什么区别
- 现场写个小游戏:黑桃红桃A-8共计16张牌,4*4居中排列布局,开局洗牌随机分布。开始都是背面在上(蓝色),点击后翻牌,翻开两张牌后如果相同则消去,但布局不能改变;不相同则又翻回背面;(有点慌,没写完...)
最后还是过了,本来想着是大厂,去那里一定是会有非常多的收获。
当时我感觉还是非常向往的,直到看了一下北京一个月的房租.../
6、普通小厂
HR面
非常有特色,竟然是先HR面过了才会有技术面
之前约面问我九点可以吗——当时我就知道这家公司多半是八点钟就上班了...
- 自我介绍
- 最早学习的框架
- 页面渲染时,vue2的生命周期触发哪些(除了created都忘了)
- 绩点排名,高考成绩,高考全省排名(瞬间我就怂了)
- 目前投递了哪些公司,有没有拿offer(投了一堆,拿了哪些不告诉你嘿嘿)
- 88*98是多少(大早上不太清醒愣是算了十秒左右,但是你这是问的什么啊)
- 8个外观一样的小球,其中有1个更重,最坏的情况下至少称几次能找到最重的这个(猜的二分, 3次)
- 预期薪资多少
- 你有什么想问我的吗(并没有)
这是唯一一家挂了的...
总结回顾
之后摆了几天大烂,天天通宵打游戏到早上七八点....
个人感受
全网共计发起400+应聘,30+次查看简历,6家面试。
还有一家面试被上一家90分钟超长占线给挤掉了
后面在我入职的时候才又收到了几个简历通过的消息,就拒绝了,虽然很可惜,不过也没办法。
总的来说,失败是常态,成功只是无数失败中的偶然。
重要的题目
面试官根据简历上的技术问问题,
综合我个人和其他同学的面试经历,一些问题经常出现:
- 【高频】对于微前端的理解
概念/作用
粉碎巨石,一个主应用+多个子应用,技术栈、打包构建等都是完全独立的,负责不同应用的团队可以选取最合适自身情况的技术栈,这样不仅可以提高开发效率,也可以降低团队人员学习的成本,也便于各个应用的技术栈更新(比如QQ,假设以前用的JQ,现在要用React,以前就只能直接推翻重写。而用微前端的话,重写子应用就行,减少破坏的范围)。
实现方式
主体框架:iframe,后端路由分发,模块联邦,中心基座
样式隔离:css选择器加hash前缀,...(其他的忘了)
JS隔离:函数作用域,eval作用域,with关键字
- 【高频】事件循环机制
浏览器
调用栈、宏任务队列、微任务队列,比较经典,顺着说一遍就完了
V8
和浏览器大体类似,只是宏任务分了6个类型,每次宏任务阶段,要执行6个类型(不用记完6个,记住timer类型和poll类型就行了)
- 【较多】设计文件分片上传
(input类型设置为file,多文件还要额外写multiple,结合JS的fileReader来获取上传的内容,要对其类型做校验,并且要对超过大小阈值的文件进行切片再重新封装)
转为二进制,然后按长度截断,封装成对象,维护两个值 当前对象的序号 和 切片总数,发送给后端后,要及时确认是否丢包,参考TCP的操作,如果丢包了,那么在下一次成功请求的响应体里需要给出相应的信息。
为了防止是最后一个包丢了,还要额外发起一次请求询问是否接收到了所有包,如果是,那么后端开始合并文件;如果不是则根据响应内容重新发送。
(另外,HTTP报文里面有个range字段好像可以结合利用一下,但是我没有继续研究这一块了)
- 【高频】ES6相关
- Promise之类的一大把
- map和set之类的容器
- 迭代器——这个可以挖很深,比如深入一下Reflect对象(实际上从来没用过)
- 【较多】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相关的技术,感觉这真是一个很奇妙的语言,可以做很多有意思的事情。