记录一下我的面试之旅

1,022 阅读16分钟

前言

Hi,我是老吴

最近在忙碌于面试,所以疏忽于写文章;已经上岸了,所以后续有时间会再继续完成我的系列文章,如果还没看过的也可以顺便看看我的专栏文章:《vitepress趣玩系列》 《nuxt3拆包剖析》,你们的支持是我更文的最大动力~

省流

我想先介绍下本人的一些情况,让读者有个大概印象

本人双非本科,目前在深圳某公司上班,工作经验4年,主要从事前端工作,也有后端开发经验,公司内大部分工作以全栈为主,也担当过项目经理,顺便也做过测试,还有发布上线经验

总结来说,算是个全干工程师(一份工资。

应该从4月份开始正式找工作,历经3个月上岸,期间投过很多简历都石沉大海,确实感受到行情的凉气,大部分是通过牛客私聊拿内推方式,不回消息的话就自己在官网投,试过一段时间用“boss直骗”,拿到简历就跑。。

个人感受如下:

  • 确实不要轻易裸辞;大部分是简历石沉大海,少部分面到最后涨幅不高
  • 个人使用vue,但公司需要的是react;我这里不是引战,确实是在最后反问面试官技术栈的时候大部分是使用的react
  • 没有八股文;应该说是没有纯八股文的面试,可能年限在那,并且项目写的比较多(4个),基本上都是问项目,然后从项目开始深入挖
  • 算法很重要;连常见js手写题都少见,很经常给你甩个lc题目截图,没有hard,middle居多,easy也有

下面总结下我面试过的公司的问题,其实大部分都是从我项目出发,所以并不是一份通用的面试题帖子

微信

一面

  • 介绍一下你的项目
  • 说一下你这个项目的难点
  • 你这个项目用到的水印功能是怎么处理的
  • 你这个项目的懒加载图片组件是怎么封装的
  • 把图片懒加载组件,再封装成懒加载瀑布流,需要怎么做
  • 怎么统计一个图片的加载时间是否缓慢
  • 说一下你理解的组件封装思路
  • (第二个项目)我看你使用了微前端框架qiankun,有了解过里面的一些原理吗
  • qiankun的js沙箱隔离和css隔离原理
  • qiankun的css隔离有什么问题,需要怎么解决
  • 你的微前端重构,是基于什么方向去进行应用拆分
  • 如何管理微前端的各个应用,为什么不使用monorepo
  • (第三个项目)说下你这个项目遇到的难点,针对这些痛点,如何解决
  • webpack-dev-server如何实现这个拦截,怎么思考到这个拦截处理的方案
    • 这个我可以简单解释一下,我是利用了webpack-dev-server的拦截,实现了本地登录页,解决了本地开发的认证问题
  • (实现方案有借鉴vite的处理)说下对vite的理解,跟webpack的区别
  • (第四个项目)组件库怎么做技术选项
  • 组件库的按需引入功能实现
  • 组件库的主题定制功能实现
  • 对比于市面上的组件库,你的库的优势或者亮点是什么
  • 手撕三道题
    • 给你个对象数组[{age: 18, name: 'xx'}],不使用sort,按年龄由小到大排序,年龄相同就按姓名首字母排序
    • Promise并发处理,要求尽可能快的返回第一个校验不通过的结果,如果都通过,则返回全部通过的结果
    • 深拷贝

小结

由于是第一场面试,导致回答的其实不是很好,也止步于一面

手撕题也没写出最优解,第一题其实就是考察排序方法,快排更佳,第三题也需要考虑多种类型处理,循环引用处理等细节点

tips:面腾讯最好要做好准备再去,如果面评不好,后续再投递可能就不会再收你简历了

朴朴

朴朴有点特殊,一面是两个面试官,一个问完到另一个

一面

  • 介绍下个人技术栈和了解过的比较新的技术
  • 介绍下第一个项目
  • 之前是vue开发的,后续怎么重构成react
  • 说到使用umi重构,能介绍下umi的一些特性吗
  • 如何进行重构,重构过程中的难题如何解决
  • 介绍下权限控制方案,如何对接,权限信息如何传递
  • 为什么使用jwt,jwt的组成部分简述下
  • 如何推广你的这个模板工程
  • 后续如果需要你升级这个模板工程,从哪方面入手
  • 说一下对class组件和function组件的理解
  • 为什么hook不能写在if中
  • 说一下useEffect,多个子组件和兄弟组件,useEffect的执行时机
  • 说一下useEffect和useLayoutEffect区别
  • 说下reconciler的流程
  • 用过ts吗
  • type和interface的区别
  • any和unknown区别
  • 说下xss,实际项目中如何处理
  • 说下csrf,实际项目中如何处理
  • 9个div实现3x3布局的方法
  • 说下了解的数据结构
  • 说下数组转树的思路和步骤
  • 看你重构了多个项目,如何保证重构后的功能稳定
  • 重构的目的是什么
  • 你们这个系统的底层框架为什么选择vue2,而不是使用vue3
  • 如何排查和解决系统重构后带来的生产问题
  • 有了解过监控系统是怎么收集信息的吗
  • 如何进行组件封装
  • 有什么好的开发习惯能介绍下吗
  • 这个开发习惯,能否结合eslint进行代码控制
  • 说一下微前端框架的子应用拆分逻辑
  • 说一下离职原因

小结

两个人一起面属实没遇到过,第一个偏向基础和八股,后面一个偏向实战,也有不错的面试体验,就是没看过八股 :)

快手

一面

  • 有了解过你们公司内部的小程序框架吗
  • 跟微信小程序相比有什么区别呢
  • 能介绍下第二个项目的业务逻辑吗
  • 我看你这个系统涉及到多种业务状态,如何管控好这些状态
  • 你这个系统用户量不小,如何保证系统在海量用户下的稳定性
  • 如何快速定位线上问题
  • 前端的异常是如何收集的,异常信息怎么上送到监控平台
  • 怎么去实现一个监控平台
  • 如何收集生产环境的一些页面数据,比如FCP,CLS
  • 监控系统有告警功能吗,有了解过如何保证高效快速告警吗
  • 介绍下第三个项目中你们公司的底层框架
  • 有进行移动端页面的优化吗
  • 你说到有使用虚拟列表优化业务场景,能说下原理吗
  • 虚拟组件的快速滑动会有白屏情况,如何优化
  • 组件库的按需引入如何实现
  • 按需引入的原理是什么,为什么会有按需引入的做法
  • 有了解过tree shaking的sideEffect吗
  • (第一个项目)你实现的模板工程介绍一下
  • 后续的迭代还能做什么优化,如何保证在每次工程有更新有新功能的时候,对接系统也能使用上新功能
  • 介绍下你写的vue插件,vue插件的原理是什么,你的插件实现了什么功能
  • 水印组件的最佳实现
  • 手撕,三数之和

小结

感觉这面内容虽然不多,但考得比较深,更考察你的知识广度

一开始问到了我小程序框架内容,其实我并没有做过类似的项目,所以我一开始并没有答好,估计是面试官看错了,所以建议项目经历要写清楚一点,不能模棱两可,问错了方向内容后续都回答不好

二面

  • 看你以前是做后端的,为什么后来选择从事前端
  • 前端从什么方向入手学习,现在还如何提升自己的前端技术
  • vue和react的区别
  • 不小心提了嘴solid和svelte,面试官顺便问了下这两个的内容
  • 翻了我的掘金,让我说下我理解的nuxt3
  • nuxt和next的了解
  • 项目中微前端框架的选型,如何进行应用拆分
  • 子应用加载过慢,如何优化
  • qiankun的实验模式css沙箱隔离方案,深入探讨了下其中的css原理
  • 介绍下umi,顺带提了嘴father(阿里的人可真会起名字
  • 说下umi的约定式路由和nuxt的约定式路由
  • 说下给项目中底层框架的痛点解决过程,优化思路,最终落地及推广
  • 手撕,乘积最大子数组

小结

感觉像在聊天,时间不长,但挺愉快

美团

一面

  • 挑一个项目能体现出你的能力和工作水平的项目介绍一下
  • 针对项目中的痛点,如何解决
  • 有没有什么痛点,被你发现了,但还没有解决,后续针对该痛点如何进行学习
  • 在业务开发过程中,如何进行自我提升
  • (看了我的github)发现你每天都有提交,怎么做到的
  • 介绍下github actions
  • 介绍下组件库项目,说下技术选型
  • 组件库开发过程中的一些难点
  • 主题功能,用户如何控制实现他们自己的主题(客制化主题)
  • 后续对组件库的优化,思路
  • 问了个vue2的问题,定义了一个computed,但template中没有使用该computed,那么该computed是否会被计算
  • 什么时候使用vuex,如何管理全局状态,如何处理mutations和actions
  • 手撕,给了个js题
const x = { a: { b: { c: 1, f: 3 } } }
const y = { a: { b: { c: 1, k: 3 } } }
Object.myAssign(x, y) => { a: { b: { c: 1, k: 3, f: 3 } } }

Object.myAssign = (x, y) => {
    // 实现
}

小结

过程比较简短,问题也中规中矩

二面

  • 介绍下你的掘金文章
  • 讲下你的技术栈
  • 介绍下你在公司中的工作内容,B端多还是C端多
  • 问我知道我投的是北京岗吗,为什么想去北京
  • 介绍下xxx系统的整体架构
  • 介绍下重构后系统的前端底层框架内容
  • 针对重构过程中的痛点,如何解决
  • 介绍下对你提升较大的项目
  • 讲下你对底层框架优化的工作内容
  • 用了什么工具封装的脚手架,有什么功能,开发这个功能的目的是什么
  • 讲到了我使用了webpack-dev-server的功能对前端框架提效,拓展到我从看vitepress源码中得到的灵感balabala
  • 还面了什么公司,拿到几个offer
  • 手撕,查找给定数组中出现次数最多的字符并打印输出;示例: [a,b,c,d,d,d,d,e,a,b,c,c,f,g,d],边写边问思路,问能不能优化,问如果xxx结果会怎样

小结

感觉也像闲聊,更多的看你的思维和思考吧

顺带提了嘴他们是react的

金山wps

第一个一面

  • 问了我英语几级(我的天,居然还会看这个
  • 为什么离职
  • 介绍下四个项目
  • 说一下对工程化的理解
  • 说一下组件封装思想
  • 介绍下你风险最大的工作内容,针对这个风险怎么做防范措施,保证风险尽可能不发生
  • 介绍下技术上比较难的内容
  • 针对你说的vitepress文档简陋这个问题,你怎么解决这个难题,不可能每次有问题都查阅源码吧(有可能的。。
  • 说下对vite的理解
  • 说了下基于create-vite封装的小工具的实现内容,讲解了开发这个轮子的原因,遇到的难题的解决方法,修改源码的方式,npm发布问题balabala
  • 说一下常用的性能优化方案,结合具体的项目讲解
  • chrome performance的使用
  • 介绍下微前端的选型到工程落地的过程
  • 为什么要用qiankun(火啊。
  • 说下优缺点(wow,一面也会问吗
  • 说下期望薪资,介绍下目前的薪资结构
  • 说下兴趣爱好(王者
  • 现在几颗星了(突然觉得这家公司不错
  • 讲解下如果让我独立承担大型开发模块,会怎么做

第二个一面

  • 说下用过的打包工具(webpack rollup vite esbuild tsup unbuild
  • 说下这些工具的代码转换过程
  • 有没遇到过代码转换过程中的问题,兼容性问题,针对兼容性问题的解决方案
  • 讲一下业务难题,解决方案
  • 介绍下项目
  • 突然就闲聊了,问我有没有女朋友之类的,然后客套了一下说如果没有我来他们这会挺抢手,金山的妹子多(惊。。

小结

第一次遇到一面还分两部分的,第一部分偏向技术问题,第二部分闲聊多一点,还说到我的简历编排内容不太好,让我回去改改

二面

  • 讲下微前端,应用拆分逻辑和情况
  • 介绍下有挑战性的项目
  • 介绍下组件库,说下技术选型和方案,对比市面上的竞品的优势
  • 有独立开发经验吗,在多人协作的时候怎么安排
  • 后端经验如何
  • 讲解了下前端发展趋势
  • 有没有带人或者管理经验
  • 说下性能优化,尽可能多维度讲解,怎么看指标
  • 手撕,两个栈模拟队列

小结

闲聊

三面

  • 项目讲解
  • 重构系统的思路,如何保证重构后的稳定性
  • 重构过程中的优化,及规范控制
  • 有什么优势
  • 对未来的打算,如果入职了会怎么安排
  • (讲到了静态文档框架)说下实现静态文档框架的思路

小结

闲聊

深信服

一面

  • 让我写一个card组件,并且有三点要求(忘了
  • 说下这个card组件从编译到渲染的整体过程
  • 介绍下组件库,技术选型
  • 如何维护组件库文档,让文档保持最新
  • 如何保证组件多次迭代后的稳定性(单测
  • 介绍下封装webpack的过程
  • 手撕,lazyman

小结

中规中矩,项目问题问的比较少,八股偏多,lazyman也常见

二面

  • 介绍第一个项目xx模板工程,项目的背景和意义
  • 三栏布局的方案用的什么
  • 权限控制方案,使用jwt的优势
  • 懒加载列表的实现,处理什么场景,如何做到更好(虚拟列表
  • 介绍下项目中的vue插件,原理,方案,提效效果
  • 用vue3实现过什么项目,有什么亮点
  • 主题控制
  • 如何实现有有效期的storage,怎么清除全部过期数据
  • 组件库的工程结构,为什么这样划分,使用jsx实现的原因是什么
  • 有使用单测吗
  • 按需引入方案
  • 手撕,反转链表,时间空间复杂度

小结

很八股的感觉,但会深挖一点项目内容

三面

  • 说下最有挑战的项目
  • 如何发现痛点,解决痛点思路
  • 后面都是问项目了

小结

没小结

富途

一面

  • 介绍下第一个项目xx模板工程,拓展到后续的优化改造,结合umi和nuxt的做法进行工程化控制
  • 为什么微前端项目的子应用有vue也有react(因为我突然想写react。
  • react子应用为什么使用umi(qiankun跟umi一家的,这不刚好用一下
  • 说下umi的功能,约定式路由
  • 说下组件库,用的什么打包工具,整体的技术选型
  • 组件库开发过程中的一些难点,如何解决
  • 延伸了市面上的打包工具,聊了下现代前端工具的发展趋势
  • 聊了下nuxt,聊了下unjs小作坊的工具(应该是看到我的掘金文章才问的
  • 聊了下csr,ssr,ssg
  • 对node的使用经验,拓展到现在的脚手架写法,顺便聊了下一些后端框架的封装处理
  • 聊一下公司的前端框架内容,聊到我的共建内容
  • 针对业务场景的痛点,如何解决
  • 聊到移动端h5开发,客户端接口的调用
  • 针对客户端接口的异常处理方法,如何统计客户端接口调用时长,能不能收集缓慢接口数据
  • 如何收集页面的性能指标
  • 微前端项目的技术选型,聊了下qiankun的获取子应用数据原理
  • qiankun对比single-spa的优化点
  • qiankun的js沙箱和css样式隔离方案原理,沙箱隔离的原因
  • 手撕,两个有序数组合并,时间空间复杂度,能不能优化

小结

闲聊,手撕也简单

二面

  • 聊项目,说了下市面上的微前端框架类型,阿里的qiankun,腾讯的wujie,京东的micro-app
  • 问了10分钟就来手撕了。
  • 递归实现两个整数的乘积,要求不使用‘*’号(即乘号)
  • 写一个函数,输入是正奇数n,输出1-n^2的二维数组,要求按照一定规律排列
/**
 * 输入3
 * [
 *     [5,4, 3],
 *     [6, 1, 2],
 *     [7, 8, 9]
 * ]
*/
  • 智力题,抛硬币,先抛的人赢的概率

小结

没见过一上来就直接手撕的面试,第二题因为没接触过螺旋矩阵的处理,完全没思路,面试官也留了很多时间让我写,还是写不出来哈哈

三面

  • 项目介绍
  • 做题(???你们富途都这样操作的吗
  • 给了个场景题,这个页面的布局思路,接口方案,从网络请求开始到拿到数据到展示数据的整个过程,一些异常场景的处理,怎么优化,为什么是这个方案
  • 如何优化客户体验,有没有看过相关的文章
  • 有没有抓过包,为什么抓包工具能拿到https网站的数据,https的流程

小结

二三面都是以做题为主,真是脱一层皮。

总结

还有些面试感觉内容雷同,就不写了

以上内容均出自本人记忆,可能有的问题看着会很奇怪,没关系,你是对的

答案就随缘吧,本来也没想写这么多,写着写着写了三天。。也看出我后面写的越来越敷衍哈哈哈

后续可能会把剩下的面试也补充上,欢迎点赞加收藏~