2021年：字节跳动前端面经(已接offer~) |
您所在的位置：网站首页 › 字节跳动前端工资待遇 › 2021年：字节跳动前端面经(已接offer~) |
|
履历
本人19年双非本科毕业，无大厂背景加持，借着上一年自研前端监控系统的经历认真写了简历。目前监控SDK已开源：mitojs（已有部分公司开发者正使用该SDK在构建自己的监控平台），为了更好的开源，将老版SDK迁到新版mitojs，迁到新的MITO组织，后续会在MITO组织里开源前后端项目、docker私有化部署、免费saas服务等等，敬请期待~ 如有意想一起共建的小伙伴可私聊我~ 字节跳动 - web infra 一面视频面 讲下你的MITO（前端监控系统）的主要功能 你的SDK中用户行为栈是怎么获取和更新的 埋点SDK是怎么实现新开页面并携带原页面的信息（至少两种方式） 简述react fiber的作用，以及实现原理 react hook出现的意义什么？解决了什么问题？ Vue.use这个函数在源码里面做了哪些事情，主要用来干嘛的？ 手写代码：实现一个函数，监听浏览器所有的事件（不可枚举）并上报该事件名称 有写过plugin吗，说说webpack的plugin是怎么获取hook入参的？ 手写代码：用react hook实现计时器 手写代码：实现类似webpack plugin的管道函数（具体题目忘记了）全程耗时：50分钟 二面视频面（web infra 组长二面） 讲讲你和普通前端，你的亮点有哪些？ 我看了你开源（mitojs），你的代码风格是借鉴sentry，你出发点是什么？为什么不直接用sentry私有化部署，而是自研前端监控？ 简单讲讲你的SDK的架构、和sentry的SDK对比，有哪些优势？（行为栈更精确、hooks更完善） 简单讲讲你的性能监控SDK（同事开发，借鉴google官方api） 为什么要二次开发google开源的性能监控SDK？ SDK怎么采集用户行为栈（面包屑）？ 你是怎么录制页面并回放页面（用开源包rrweb，并在此基础之上二次开发，说明其录制回放原理） 没用浏览器的官方api，你是怎么检查当前用户电脑CPU的性能？（只有达到某个性能指标才开启录制，因为录制过程需要不断序列号dom节点，所以比较耗CPU） 网页上报数据量高并发，你用node是怎么处理的？（redis+rocketMq） 有没有进行压测过你的服务器？最高的QPS是多少？ 服务端有没有做错误事件聚合，聚合的方式是怎样的？ 收集错误时有没有进行采样控制？ 如果让你来设计单页应用的性能指标，你会怎么设计？（可以理解成怎么拿到路由间切换和路由间接口返回的时间差） 什么因数会导致FCP、FMP等等指标的变化？ 了解过long task，有没有监控这个指标？ 手写代码：打印一下斐波那契数列：1 1 2 3 5 8 .... 书写代码：实现深拷贝函数 手写代码：写个单例模式 手写代码：写个节流函数 你如果离职的话，最快的入职时间是什么时候？ 你最有成就的事是什么我们可以再聊一聊（开源SDK：别人使用开源再公司线上环境使用、文章） 把你自己产出文章地址发一下二面当场通过，约三面~ 全程耗时:1小时5分钟 三面视频面（web infra leader三面 (记不全了)） 简单介绍一下你的监控系统 为什么不直接用sentry私有化部署，而是自研前端监控？ 用飞书画一下整个架构图，画的过程中会问为什么会这样设计？ 怎么优化FCP这个性能指标？ 在做的过程中有没有遇到难点，然后是怎么解决的？ 你是怎么检查当前用户电脑CPU的性能？（只有达到某个性能指标才开启录制，因为录制过程需要不断序列号dom节点，所以比较耗CPU） 手写代码：实现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面 为什么离职？ 你期望什么样的团队和工作内容？ 期望薪资？ 期望工作地点：上海还是杭州？过了一周后，上海hr打电话过来说：你目前不符合我们这上海的web infra的资深前端工程师的岗位（具体原因不是很清楚），考虑到前面三面面试官对你评价不错，所以将你转到杭州字节-研发体系岗位，问我转岗过去需要加面一面，是否接受，当天下午安排了加面。 五面-转岗杭州加面（研发体系） 手写题目： /* 请实现抽奖函数rand，保证随机性 输入为表示对象数组，对象有属性n表示人名，w表示权重 随机返回一个中奖人名，中奖概率和w成正比 */ let peoples = [ { n: 'p1', w: 100 }, { n: 'p2', w: 200 }, { n: 'p3', w: 100 }, ] let rand = function (p) {} 复制代码 简单讲讲你的前端监控？ 服务端的整体架构是怎么样的，从技术选型开始讲 仔细讲下你的上报数据后的处理过程 为什么不直接用ES，而是采用阿里云的sls（日志服务） 为什么不直接消费MQ，而是将MQ消费到redis，然后再消费redis？ 你的QPS大概是多少？ 你的服务器数量和服务器配置是多少，服务端的资源使用率是多少？(面试官说不谈配置讲吞吐量都是耍流氓) 你的SDK在收集指标时相对于别人有所创新吗（保障用户行为顺序性，暴露hooks供使用者自定义收集信息和上报结构） unhandledrejection是怎么触发的？这个事件触发了就一定要上报吗？ 说说你的前端页面跟业界监控对比有哪些差异点吗？ 后续你如果让你继续开发你的监控，你未来对它的规划是什么？ 你本次看工作的话，你希望新的工作是什么样的？ 你平时是怎么学习新技术的？ 你认为自己是有责任心的人吗？ 你是偏向于走各个方向探索还是一直向某个方向研究下去？当场通过~ 全程耗时：1小时5分钟 offer邮件等了一周多的时间，收到叫我提交流水的邮件，提交流水后，过了两天hr电话简单和我讲了薪资和福利，问我是否接受，再过了一周，发了正式offer邮件~ 从一面到offer邮件花了：35天 涂鸦-效能平台技术面共三面，拿到口头offer，整体都是问一些js、react、vue的基础相关。 哈啰出行-两轮出行技术面共三面，拿到口头offer，除了问一些js、vue、react，还有问leetcode的简单算法，http2、ssl协议等等。 深圳腾讯-PCG 一面视频面 面试官自我介绍：腾讯PCG主要做些什么事 讲下你的MITO（前端监控系统）的主要功能 简单讲讲你的用户行为是怎么收集的、怎么拿到xhr的请求状态 react和vue的使用情况、怎么编写一个vue插件、Vue.use函数里面具体做了哪些事 手写代码：简单实现下promise 手写代码：实现promise时的then函数不要return一个新的promise对象，直接复用当前this 二面电话面（记不全了） 讲下你MITO对业务的价值，为什么会这个系统的出现、为什么不直接用sentry私有化部署？ react class 和 hook的区别，hook存在的意义是什么 简述下react受控和非受控组件 react高阶组件的几种实现方式 Charles为什么可以劫持和更改https的请求，它的原理是什么？ 简单讲讲SSL的协议？ 你有什么要问我的吗过了四天，短信通知不合适，个人感觉二面聊得还行，挂的有点莫名其妙 来未来科技-资深前端工程师 一面电话面由于没有录音，所以过程记得不太清楚，只记得面试官是个女的，声音还蛮好听得~ react和vue的使用上面的区别 vue的双向绑定原理，为什么数组不能直接更改下标更新？ vue中this.$set这个函数做了什么事 简述一下babel和ast？可以用ast做一些什么事？ 讲一下你的MITO（前端监控系统）做哪些事 为什么需要用你的MITO，给业务带来了哪些价值 说说你是怎么推广SDK到各个业务线使用 为什么想离职，未来三年的规划是什么 你有什么想要问我的吗挂完电话半小时后，小姐姐面试官主动加我微信，给我做题的链接地址。 二面笔试题 //============= 测试代码 ============== 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 复制代码实现千分位格式化函数 用class或hook实现ant的input效果，可以不写css 用了一小时写完，并隔天约电话面 二面电话面 简单讲讲你对三道笔试题的思路 聊聊你的项目 react中受控和非受控组件 react fiber的作用，简述下fiber实现过程 为什么想要离职，如果进一家公司继续让你做你觉得没有技术难度的工作你会怎么样（搭建低代码平台等等效率工具） 三面hr面个人原因没有选择去现场面，婉拒 北京美团 一面视频面 Vue2的双向绑定以及Vue3的双向绑定 Vue2源码中大量节点更新时的策略 聊聊你是怎么收集用户行为栈的 手写代码：用数组实现栈 手写代码：写出快速排序 二面由于过了字节的web infra四面，所以婉拒，但后续还是加了美团前端leader的微信~ 开源目前监控SDK已开源：mitojs（已有部分公司开发者正使用该SDK在构建自己的监控平台），为了更好的开源，将老版SDK迁到新版mitojs，迁到新的MITO组织，后续会在MITO组织里开源前后端项目、docker私有化部署、免费saas服务等等，敬请期待~ 如有意想一起共建的小伙伴可私聊我~ 总结当你的简历里面有不错项目或经历，可以试着将面试官引导到你比较有优势的那一面。如果简历没有比较可观的项目，也可以将面试官引导到你比较在行的源码、js基础、算法当中的某一块，当你在其中的某一块有突出表现，就能给面试官留下不错的印象~ 最后，祝大家都能收到心仪的offer~ |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |