2021年：字节跳动前端面经(已接offer~)

cjinhuo
14,546 阅读10分钟

履历

本人19年双非本科毕业，无大厂背景加持，借着上一年自研前端监控系统的经历认真写了简历。目前监控SDK已开源：mitojs（已有部分公司开发者正使用该SDK在构建自己的监控平台），为了更好的开源，将老版SDK迁到新版mitojs，迁到新的MITO组织，后续会在MITO组织里开源前后端项目、docker私有化部署、免费saas服务等等，敬请期待~

如有意想一起共建的小伙伴可私聊我~

字节跳动 - web infra

一面视频面

  1. 讲下你的MITO（前端监控系统）的主要功能
  2. 你的SDK中用户行为栈是怎么获取和更新的
  3. 埋点SDK是怎么实现新开页面并携带原页面的信息（至少两种方式）
  4. 简述react fiber的作用，以及实现原理
  5. react hook出现的意义什么？解决了什么问题？
  6. Vue.use这个函数在源码里面做了哪些事情，主要用来干嘛的？
  7. 手写代码：实现一个函数，监听浏览器所有的事件（不可枚举）并上报该事件名称
  8. 有写过plugin吗，说说webpack的plugin是怎么获取hook入参的？
  9. 手写代码：用react hook实现计时器
  10. 手写代码：实现类似webpack plugin的管道函数（具体题目忘记了）

全程耗时：50分钟

二面视频面（web infra 组长二面）

  1. 讲讲你和普通前端，你的亮点有哪些？
  2. 我看了你开源（mitojs），你的代码风格是借鉴sentry，你出发点是什么？为什么不直接用sentry私有化部署，而是自研前端监控？
  3. 简单讲讲你的SDK的架构、和sentry的SDK对比，有哪些优势？（行为栈更精确、hooks更完善）
  4. 简单讲讲你的性能监控SDK（同事开发，借鉴google官方api）
  5. 为什么要二次开发google开源的性能监控SDK？
  6. SDK怎么采集用户行为栈（面包屑）？
  7. 你是怎么录制页面并回放页面（用开源包rrweb，并在此基础之上二次开发，说明其录制回放原理）
  8. 没用浏览器的官方api，你是怎么检查当前用户电脑CPU的性能？（只有达到某个性能指标才开启录制，因为录制过程需要不断序列号dom节点，所以比较耗CPU）
  9. 网页上报数据量高并发，你用node是怎么处理的？（redis+rocketMq）
  10. 有没有进行压测过你的服务器？最高的QPS是多少？
  11. 服务端有没有做错误事件聚合，聚合的方式是怎样的？
  12. 收集错误时有没有进行采样控制？
  13. 如果让你来设计单页应用的性能指标，你会怎么设计？（可以理解成怎么拿到路由间切换和路由间接口返回的时间差）
  14. 什么因数会导致FCP、FMP等等指标的变化？
  15. 了解过long task，有没有监控这个指标？
  16. 手写代码：打印一下斐波那契数列：1 1 2 3 5 8 ....
  17. 书写代码：实现深拷贝函数
  18. 手写代码：写个单例模式
  19. 手写代码：写个节流函数
  20. 你如果离职的话，最快的入职时间是什么时候？
  21. 你最有成就的事是什么我们可以再聊一聊（开源SDK：别人使用开源再公司线上环境使用、文章）
  22. 把你自己产出文章地址发一下

二面当场通过，约三面~

全程耗时:1小时5分钟

三面视频面（web infra leader三面 (记不全了)）

  1. 简单介绍一下你的监控系统
  2. 为什么不直接用sentry私有化部署，而是自研前端监控？
  3. 用飞书画一下整个架构图，画的过程中会问为什么会这样设计？
  4. 怎么优化FCP这个性能指标？
  5. 在做的过程中有没有遇到难点，然后是怎么解决的？
  6. 你是怎么检查当前用户电脑CPU的性能？（只有达到某个性能指标才开启录制，因为录制过程需要不断序列号dom节点，所以比较耗CPU）
  7. 手写代码：实现transform函数，将对象转成类似树结构的数组
transform({
  0: {
    username: '0',
    department: 'A-B-C',
  },
  1: {
    username: '1',
    department: 'A-B-D',
  },
  2: {
    username: '2',
    department: 'A-X-Y',
  },
})
// 打印结果：
[
  {
    name: 'A',
    path: 'A',
    children: [
      {
        name: '0',
        path: 'A-B',
        children: [
          { name: '0', path: 'A-B-C', children: [] },
          { name: '1', path: 'A-B-D', children: [] },
        ],
      },
      { name: '2', path: 'A-X', children: [{ name: '2', path: 'A-X-Y', children: [] }] },
    ],
  }
]

全程耗时：1小时

四面-hr面

  1. 为什么离职？
  2. 你期望什么样的团队和工作内容？
  3. 期望薪资？
  4. 期望工作地点：上海还是杭州？

过了一周后，上海hr打电话过来说：你目前不符合我们这上海的web infra的资深前端工程师的岗位（具体原因不是很清楚），考虑到前面三面面试官对你评价不错，所以将你转到杭州字节-研发体系岗位，问我转岗过去需要加面一面，是否接受，当天下午安排了加面。

五面-转岗杭州加面（研发体系）

  1. 手写题目：
/*
请实现抽奖函数rand，保证随机性
输入为表示对象数组，对象有属性n表示人名，w表示权重
随机返回一个中奖人名，中奖概率和w成正比
*/
let peoples = [
  { n: 'p1', w: 100 },
  { n: 'p2', w: 200 },
  { n: 'p3', w: 100 },
]
let rand = function (p) {}
  1. 简单讲讲你的前端监控？
  2. 服务端的整体架构是怎么样的，从技术选型开始讲
  3. 仔细讲下你的上报数据后的处理过程
  4. 为什么不直接用ES，而是采用阿里云的sls（日志服务）
  5. 为什么不直接消费MQ，而是将MQ消费到redis，然后再消费redis？
  6. 你的QPS大概是多少？
  7. 你的服务器数量和服务器配置是多少，服务端的资源使用率是多少？(面试官说不谈配置讲吞吐量都是耍流氓)
  8. 你的SDK在收集指标时相对于别人有所创新吗（保障用户行为顺序性，暴露hooks供使用者自定义收集信息和上报结构）
  9. unhandledrejection是怎么触发的？这个事件触发了就一定要上报吗？
  10. 说说你的前端页面跟业界监控对比有哪些差异点吗？
  11. 后续你如果让你继续开发你的监控，你未来对它的规划是什么？
  12. 你本次看工作的话，你希望新的工作是什么样的？
  13. 你平时是怎么学习新技术的？
  14. 你认为自己是有责任心的人吗？
  15. 你是偏向于走各个方向探索还是一直向某个方向研究下去？

当场通过~

全程耗时：1小时5分钟

offer邮件

等了一周多的时间，收到叫我提交流水的邮件，提交流水后，过了两天hr电话简单和我讲了薪资和福利，问我是否接受，再过了一周，发了正式offer邮件~

从一面到offer邮件花了：35天

涂鸦-效能平台

技术面共三面，拿到口头offer，整体都是问一些js、react、vue的基础相关。

哈啰出行-两轮出行

技术面共三面，拿到口头offer，除了问一些js、vue、react，还有问leetcode的简单算法，http2、ssl协议等等。

深圳腾讯-PCG

一面视频面

  1. 面试官自我介绍：腾讯PCG主要做些什么事
  2. 讲下你的MITO（前端监控系统）的主要功能
  3. 简单讲讲你的用户行为是怎么收集的、怎么拿到xhr的请求状态
  4. react和vue的使用情况、怎么编写一个vue插件、Vue.use函数里面具体做了哪些事
  5. 手写代码：简单实现下promise
  6. 手写代码：实现promise时的then函数不要return一个新的promise对象，直接复用当前this

二面电话面（记不全了）

  1. 讲下你MITO对业务的价值，为什么会这个系统的出现、为什么不直接用sentry私有化部署？
  2. react class 和 hook的区别，hook存在的意义是什么
  3. 简述下react受控和非受控组件
  4. react高阶组件的几种实现方式
  5. Charles为什么可以劫持和更改https的请求，它的原理是什么？
  6. 简单讲讲SSL的协议？
  7. 你有什么要问我的吗

过了四天，短信通知不合适，个人感觉二面聊得还行，挂的有点莫名其妙

来未来科技-资深前端工程师

一面电话面

由于没有录音，所以过程记得不太清楚，只记得面试官是个女的，声音还蛮好听得~

  1. react和vue的使用上面的区别
  2. vue的双向绑定原理，为什么数组不能直接更改下标更新？
  3. vue中this.$set这个函数做了什么事
  4. 简述一下babel和ast？可以用ast做一些什么事？
  5. 讲一下你的MITO（前端监控系统）做哪些事
  6. 为什么需要用你的MITO，给业务带来了哪些价值
  7. 说说你是怎么推广SDK到各个业务线使用
  8. 为什么想离职，未来三年的规划是什么
  9. 你有什么想要问我的吗

挂完电话半小时后，小姐姐面试官主动加我微信，给我做题的链接地址。

二面笔试题

//============= 测试代码 ==============
const list = [
  { id: 1001, parentId: 0, name: 'AA' },
  { id: 1002, parentId: 1001, name: 'BB' },
  { id: 1003, parentId: 1001, name: 'CC' },
  { id: 1004, parentId: 1003, name: 'DD' },
  { id: 1005, parentId: 1003, name: 'EE' },
  { id: 1006, parentId: 1002, name: 'FF' },
  { id: 1007, parentId: 1002, name: 'GG' },
  { id: 1008, parentId: 1004, name: 'HH' },
  { id: 1009, parentId: 1005, name: 'II' },
]
// 实现printTree函数
printTree(list)

// 输出：
// AA
//    BB
//      FF
//      GG
//    CC
//      DD
//        HH
//      EE
//        II

  1. 实现千分位格式化函数

  2. 用class或hook实现ant的input效果，可以不写css

用了一小时写完，并隔天约电话面

二面电话面

  1. 简单讲讲你对三道笔试题的思路
  2. 聊聊你的项目
  3. react中受控和非受控组件
  4. react fiber的作用，简述下fiber实现过程
  5. 为什么想要离职，如果进一家公司继续让你做你觉得没有技术难度的工作你会怎么样（搭建低代码平台等等效率工具）

三面hr面

个人原因没有选择去现场面，婉拒

北京美团

一面视频面

  1. Vue2的双向绑定以及Vue3的双向绑定
  2. Vue2源码中大量节点更新时的策略
  3. 聊聊你是怎么收集用户行为栈的
  4. 手写代码：用数组实现栈
  5. 手写代码：写出快速排序

二面

由于过了字节的web infra四面，所以婉拒，但后续还是加了美团前端leader的微信~

开源

目前监控SDK已开源：mitojs（已有部分公司开发者正使用该SDK在构建自己的监控平台），为了更好的开源，将老版SDK迁到新版mitojs，迁到新的MITO组织，后续会在MITO组织里开源前后端项目、docker私有化部署、免费saas服务等等，敬请期待~

如有意想一起共建的小伙伴可私聊我~

总结

当你的简历里面有不错项目或经历，可以试着将面试官引导到你比较有优势的那一面。如果简历没有比较可观的项目，也可以将面试官引导到你比较在行的源码、js基础、算法当中的某一块，当你在其中的某一块有突出表现，就能给面试官留下不错的印象~

最后，祝大家都能收到心仪的offer~

avatar
文章
阅读
粉丝