惯例先介绍一下背景吧,名校本硕,6年经验,大中厂都有去过,去年年底被裁,寒冬中开始了悲惨的找工作之旅。
- 蚂蚁一次 HR 面挂,一次三面挂
- 滴滴三面挂
- 网易一面挂
- 阿里 AE、闲鱼、淘天等 N 个部门 HR 面挂
还有无数小厂一面-三面不等挂
最终接了一个中等规模公司的 offer
感觉字节的面试相对更有参考价值,和大家分享一下
1. A部门 一面挂
几乎是裸面的,没怎么准备,很多问题都没有答好,一面直接凉了。 其实不是很认同这种面试方式,没有给被面试者展示自己擅长的部分的空间,不过问题也都是常规前端理应了解的,确实也不该答成这样。
问题如下:
- 介绍几种常见的设计模式
- 白板实现一下单例模式,为什么单例模式用 class 的方式实现更合适
- 发布订阅和观察者区别
- 装饰器模式,使用场景
- HTTP 缓存
- 本地存储、第三方 cookie、用户身份标识实现流程
- JWT
- XSS 和 CSRF
- ES6 迭代器、生成器
- TS 联合类型 字面量类型
- pnpm、yarn、npm 的各个版本分别解决了哪些问题、优缺点
- monorepo 优缺点
- lerna 优缺点
- react-router原理、hash 和 history 优缺点
- popstate replacestate 监听实现 (浏览器原生只实现了 onpopstate 的监听,history.go(),history.back(),history.forward() 才会触发 popstate 事件,而 history.pushState, history.replaceState 没有事件触发)
- react18 新特性、fiber、中断更新原理
- tailwind 原理、优缺点、为什么 bootstrap 没落它流行,UnoCSS 解决什么问题
- 微前端
- 路由设计、主子路由调度通信、子路由设置 basename 会影响多主应用嵌套它,如何解决
- js 隔离 proxy 缺点
- css 隔离 shadowdom 缺点,cssmodule
- 遇到过的最难解决的问题
这一轮面完以为彻底凉了,应该是面试官人不错,没有给写很过分的评价,被另一个部门的HR又捞了起来,这次准备的还可以,一直面到了HR面
2. B部门一面
- 判断数据类型 typeof instanceof Object.prototype.toString.call 原理
- 原型链
- 闭包
- 箭头函数
- ES6+
- Map和Object
- Promise、async
- 事件循环
- 输入URL开始完整流程(可以参考这里:segmentfault.com/a/119000001… 这个问题被问到的频率很高,好好准备既可以展示深度广度,还可以耗掉很多面试时间,免得再遇到什么更难的问题)
- HTTPS
- defer async
- 跨域(window.name、postMessage、document.domain、图片)
- 常见安全问题(CSP、SSTI、X-Frame-Options)
- 第三方 cookie,chrome 屏蔽后如何解决(可以参考天哥的这篇文章: www.codesky.me/archives/di…
- 两道笔试题:LeetCode 原题,合并区间、三数之和
3. B部门二面
- 你所在的团队前端发布流程是什么样的,你觉得有哪些问题,什么样的是最完美的
- 埋点 页面曝光、元素曝光、点击事件等分别介绍方案,业内其他方案了解
- 性能监控 白屏时间计算,fcp、lcp、cls指标计算(web-vitals、PerformanceObserver 中拿到多个 LCP 如何处理,可以参考这里:web.dev/articles/lc…
- 错误监控 如何定位错误、错误堆栈的数据结构是什么样的、怎么实现录屏/截图
- 低代码实现、和业内知名方案对比、亮点
- 面向切面编程、依赖倒置原则
- useState、useEffect、useCallback、useLayoutEffect
- 介绍一个业务中做的比较好的部分(说了一下曝光埋点,Intersection Observer 存在的问题,如何处理等,也有很大一部分是天哥的 博客 里学到之后用在项目里的)
- 笔试题:实现 eval 解析 1+2+((3+4)+5)*6 计算器(用逆波兰后缀的思路写了一下,感觉还能再优化一下)
4. B部门三面
- 多个域名维护中会遇到哪些问题 a.b.c.com/d.b.c.com/e.f.c.com
- 域名证书维护工作中做了哪些事
- 性能监控公认最需要关注的指标有哪些,LCP、CLS、FID 介绍,LCP 计算,不用 web-vitals 需要考虑哪些问题
- 埋点 UV 计算,未登录如何统计 UV
- PV 如何计算,pushState popstate replacestate 监听如何实现,写一下 replaceState 的监听
- hash 和 history 路由如何区分
- 如果页面中大片区域是 canvas 绘制的,点击事件如何定位具体模块,如何设计 SDK 使用户容易传递这个定位
- 设计一个埋点 SDK 要考虑哪些方面,性能、稳定性、正确性等如何衡量
- 低代码平台的使用方自定义物料接入,如何防控恶意代码
- 低代码平台表达式定义,可视化配置要不要做,如何取舍
- 低代码表达式解析可以放在定义协议时还是运行时,分别有哪些优缺点,运行时怎么做实时检测错误
- 笔试题:
- 二叉树公共祖先,LeetCode 基础上有一点改动
- 两个正序数组的中位数,LeetCode 原题
5. B部门HR面,挂
6. C部门一面
B部门挂了之后大约半个月,被C部门HR从简历库里捞了起来,这一轮是一个看起来很资深的面试官。 一面一般都是经典八股文,但是这一次没怎么问八股,反倒是笔试题写了很多。
- 埋点 SDK 设计需要考虑哪些方面
- 低代码方案实现、协议结构大致描述、公共组件采用了 npm 包的形式引入,是运行时 cdn 拉取还是其他方式
- 单点登录实现、为什么不用 oauth
- 介绍一下 React 历史沿革(函数组件、hooks、fiber,Scheduler、lane,这个问题刚好是比较熟悉的,从 react 诞生前的背景讲起,一直扯到 react 19 的规划,成功让我耗掉了很多时间)、状态管理、useContext、useLayoutEffect
- 笔试题:
- 下划线驼峰格式互转
- 数组乱序,优化、优化,再优化
- react 函数组件实现计数器,经典的 useEffect 的那几个闭包问题
- 平时怎么学习
- 架构设计经验、难点
7. C部门二面
- 在目前公司主要负责的工作内容
- 做过的觉得最好的项目(埋点 SDK 的实现,从这里参考了很多 juejin.cn/post/712562…
- SDK 插件架构设计,SDK 主体提供给使用方哪些内容
- 其他成熟方案对比(友盟、神策等)
- 前端构建部署流程中做了哪些事,nginx配置更新方式手动or自动?(补充自动证书维护)
- polyfill 方案,babel useBuiltIns 结合 browserslist,polyfill.io
- 低代码方案亮点,AST
- 最近做的最复杂的项目是什么
- 大规模数据虚拟滚动实现原理、其他进一步优化方式(webworker、canvas)
- 主流微前端技术方案优缺点、qiankun 各种模式、主子应用通信
- 有没有带过团队
- 笔试题:
- 岛屿数量,LeetCode 原题
- AST 解析计算 1 + 2 * 3 / 4 (和B部门二面那个一样,但是用 AST 的方式实现)
8. C部门三面
- 自我介绍(要求介绍主要负责哪些项目、遇到哪些挑战、取得哪些成果)
- 性能方面做了哪些专项优化,是你自己发起的吗
- 每一项优化具体都做了什么,成果如何
- 主要是资源大小方面做优化对吧,有其他的吗
- 更关注哪些性能指标,LCP 优化前优化后分别是多少,有关注过 TTI 吗
- 性能提升给业务带来价值有衡量过吗
- 在阿里做的项目具体介绍一下面向的用户、业务流程
- 做的项目业务方更关注哪些指标(DAU、GMV之类的)
- 你做的中后台方向的项目,让你衡量业务价值,有哪些方向(人日、流畅度等)
- 埋点为什么不用现成方案
- 埋点上报方案,页面销毁等场景如何解决
- sendbeacon 兼容性、有没有其他问题
- img 和 xhr 方案有哪些问题
- 为什么要做埋点,是公司重度依赖这个数据吗
- 你们公司主体的这个项目复杂度如何
- 你在现在的公司,接下来一年 top3 要做的事
- 笔试题: LeetCode 原题
- 删除排序数组中的重复项 II (一开始没看清要求以为是简单的数组去重,还是要仔细审题,相似的题也太多了)
- 矩阵中的最长递增路径
9. C部门HR面
10. C部门四面(大BOSS加面),面完后横向对比无结果
- 自我介绍
- 离职原因
- 选工作考虑哪些方面,觉得什么样的工作有技术挑战
- 职业规划是什么样的,觉得前端技术专家应该是什么样的
- 目前公司业务主要做什么,要处理的数据来源是哪里
- 客户数据合规如何保证
- 私有部署会遇到哪些问题,如何解决
- 私有部署性能问题如何采集衡量 (lighthouse、memory ?)
- 从数据库里请求一张表到渲染在页面上都经历了哪些过程
- 做过的最复杂的页面是什么样的
- 目前接触了哪些公司?如果A和B都给你offer你怎么选
- TCP 三次四次,TLS1.2 和 TLS1.3 握手流程,0 RTT 怎么实现
- 平时代码写的多吗,那我们来做两道题吧
- 笔试题: 反转链表 从中间拆分再合并链表(1234567 -> 1234/567 -> 1526374)
这一轮面完之后开始陷入字节经典的横向对比,一周后仍然没有结果,被D部门HR捞起重新面
11. D部门二面(前面的面评还不错,申请省掉了一轮流程,直接开始二面)
这一轮面试官是个特别好看的小姐姐,感觉技术水平也很高
- 微前端使用过程中遇到哪些难点
- qiankun 如何实现 js 和 css 的沙箱隔离
- 多个子应用有哪些需要注意的地方
- proxy 怎么实现快照
- 子应用频繁切换卸载加载如何保证性能(提示:加载的 style link 等标签)
- 微前端方面做过哪些性能优化
- 埋点 SDK 架构设计介绍,提供了哪些生命周期
- MutationObserver 和 IntersectionObserver 的问题,改进
- 业界其他方案有哪些优势(神策 友盟 火山引擎)
- 业务方有没有提出改进需求,怎么做
- lighthouse CI 内部实现原理,有哪些模块,怎么获取的数据
- CLS 计算,web-vitals、PerformanceObserver,这两个也不能用,再自己实现怎么做
- CLS 指标怎么衡量好坏,怎么优化 CLS
- 在客户端内部可以做哪些性能优化(HTTPDNS、HEIC、客户端缓存、容器本身性能等)
- 跨端方面有没有了解
- 单点登录如何实现,标准 SSO 是什么样的
- 你在现在的公司接下来 3 个月的规划
- 来做两道题吧(只写了一道时间就用完了)
- 低代码有没有考虑过 uipass(阿里内部的一个成熟方案)
- 自己设计的低代码协议如何实现复杂的场景比如多个子项联动,如果联动依赖异步请求怎么办
- 笔试题:
- LRU X 秒自动过期 最多存储 n 个对象,超出之后删最旧的存新的
- Promise 并发限制
12. D部门三面,面完后横向对比挂
-
在最近这家公司做的最有体系的项目是什么(埋点 SDK)
-
介绍一下架构设计方案
-
有多少个客户在用,客户的使用场景是什么样的,使用方有哪些指标来反馈使用效果
-
为什么要做这个,推进过程中有没有遇到阻力,如果有阻力你觉得可能是哪些方面的
-
你做过的低代码平台假如要接入你的这个埋点 SDK,要在哪些地方埋点 (用户操作流程关键点、停留时长,计算用户在哪里被卡住,被卡住多久等,计算整体时间判断提效效果,时间特别不对的数据需要排除掉,比如设置 95 或者 99 分位等)
-
清洗数据是后置操作了,脑暴一下,如何区分用户切换了标签页、暂时离开了电脑等场景还是真的被卡住了 (键盘鼠标移动操作事件,需要区分是真的在思考还是人已经走了) (不考虑隐私协议的话摄像头,页面停留位置,如果是编辑区可能是在思考怎么做,无意义区可能是走了)
-
浏览器提供的哪些 API 可以判断用户切换了标签页 (requestIdleCallback、rAF? 浏览器内存控制,知道有一个 API 但是当时没想起来,实际上应该是 visibilityChange)
-
有调研过市面上哪些同类项目吗
-
你对这个系统的规划是什么样的
-
性能和错误监控一般都有现成的了,为什么需要再接入你这个系统
-
你上家公司在XX,来到目前这家公司,失去了什么,得到了什么
-
笔试题:
sum(1,2,3).sumOf(); // 6
sum(2,3)(2).sumOf(); // 7
sum(1)(2)(3)(4).sumOf(); // 10
sum(2)(4,1)(2).sumOf(); // 9
reduce 平时用的少,参数写错了,改成了 forEach 实现出来
被追问性能如何优化(各种循环的性能区别、缓存运算结果等)
13. E部门
大约过了两周,被E部门继续捞,这时候收到了其他公司的 offer,取消了面试
总结
整体感受下来面试比前两年难了N个等级,以前面试问题答个七七八八基本就过了,现在几乎都要答好,最终还有横向对比。字节梦最终还是没有实现,将来再战吧~
面试问题上来看,基本一面都是经典八股文,二面以后都是围绕简历来的,简历还是很重要,需要通过简历的描述引导或者说限制面试官的问题方向到自己熟悉的区域。简历可以参考一下这里:juejin.cn/post/692189… 还有这里: www.zhihu.com/question/23…
笔试题也越来越难,前端都是 easy 的时代已经过去了,身边的朋友也遇到了很多道 hard,“给你出接雨水是想要你给你放个水”已经不是段子了,前端同时还需要额外准备很多经典的 js 手写题比如 promise 的各种方法、柯里化之类的问题。
最后祝大家都能找到满意的工作~