一年半经验前端社招——字节跳动（已拿offer）

前言

在鹅厂也呆了一年多了，业务一般般，而且很忙（晚上10点+，每天不定时随时oncall）。希望能换个平台寻求更好的发展和更高的技术视野，也希望能找到轻松一些的工作，所以出来看机会了。个人选择的原则：满足工作生活平衡、付出收益平衡、业务未来可观三者之一。近来有一批面试，整理完每一篇后，会持续更新《一年半经验前端社招》系列的文章

下面的题目，都会标明每一题的性质，也会给出一些参考思路

描述：对概念、过程的描述，纯理论性问答题为主
举例：说出应用场景，或者是自己团队实践的情况
伪代码：写代码，但不需要跑起来，甚至可以随便写伪代码，主要目的是描述思路
编程：真正的写代码，需要跑起来，有测试用例，要看到效果

往期回顾:

一年半经验前端社招——拼多多（已面完hr）

hr面的话，是一些日常、项目回顾（技术细节少说）、职业规划、为什么跑路、为什么选择这边、目前薪资和职级、期望薪资。hr面基本类似，后面会出一个hr面专题

公司面试难度评估：✭✭✭✭✭

1面

面试官之前也是腾讯的，面试过程像聊天一样，互相交流技术，后面也扯了一些在腾讯的旧事

项目难点【描述】
如何设计权限系统，如何维护和定义、表的数据结构是怎样的【举例】【描述】
我们的项目是rbac1类型的权限系统。展示是树形结构，但权限是扁平化的，只需要勾选权限，可以达到灵活修改权限
中间人劫持，怎么防止。x-frame-option?白屏的喔，怎么办？也不一定嵌入iframe啊，可以嵌入脚本、图片，怎么阻止【描述】
x-frame-option、重定向、https，请求前加密（https、加密代理）、请求中规避（请求拆包）、请求后弥补（前端做一些逻辑）。嵌入非iframe的，如果已经突破了前面两关，走前端逻辑：触发DOMNodeInserted、DOMContentLoaded、DOMAttrModified事件。或者是给能src的标签加上自己的data-xx属性标记区分
class组件和function组件对比。写过安卓吗，那对class组件有什么看法【描述】
各自特点对比罗列一下。我也不知道有什么很好的，问题都放在这里，说明对方倾向于class组件的，所以一定不能说太多class组件不好，吹捧hook
hook缺点，hook代码难维护怎么解决【描述】
这种开放性和经验积累的题目真的是最难的，平时大家知道标准答案的题目和这种对比起来，没得比的。这个需要团队的积累，我们这边暂时没什么很大问题，所以感受不到。最基本的，eslint一定要开启，不然会莫名其妙的dep导致更新。其次是根据情况来说一下，function的场景。经验之谈，这里可以讲一篇文章
redux为什么每次reducer要返回一个新对象，面对大量节点如何优化【描述】
新的props导致更新。大量节点使用immutable
immuatable和shouldupdate配合、immuatable数据一些对比问题【描述】
这是黄金搭配的方案了，用过的人应该能理解到。几个看代码判断 === 是否是true的问答题，原则：只要一个节点变了，那么从他开始回溯的父节点全都是变的
http缓存、离线包原理、移动端首屏幕加载速度优化、webview冷启动、预热【描述】
很基础的了，送分题
一个很牛逼很多功能的class组件，里面有业务生命周期（获取数据前后、弹出窗口前后...），怎么在函数组件里面直接复用它【举例】
先注入到函数组件的props，再到useeffect关键节点里面执行业务生命周期
给定一个整数数组 a，其中1 ≤ a[i] ≤ n （n为数组长度）, 其中有些元素出现两次而其他元素出现一次。【编程】
找到所有出现两次的元素。你可以不用到任何额外空间并在O(n)时间复杂度内解决这个问题吗？(限时5分钟)
输入:
[4,3,2,7,8,2,3,1]
输出:
[2,3]
这种题，其实看见不用空间、o(n)时间，通常潜台词就是，用原地哈希来做。做过这题的肯定是秒杀，没做过的慌得一逼，我当时就是没做过的。遍历的时候把数字放到index下（比如数字4放在数组的第4个位置），如果发现后面的数的n,arr[n]已经满足了arr[n] === n那就结果算一个。lc标准答案：和我交换位置不一样，lc的是让那个数变成负数，如果后面发现arr[n]是负数那就算一个，比我的交换index简单很多

2面

收获很大，了解到了一些很强的技术和全球化相关的技术。途中暴露了一些计算机基础不行的缺点了，面试官也给了我一些提示才答出来。因为我非科班出身，所以计算机基础方面就明显不行了，他也建议我回去补一下

cdn原理【描述】
答案很容易搜到
为什么多域名部署【描述】
http1和浏览器的问题，同一时间6个连接
单元测试、e2e测试【描述】
概念性，容易搜到
event loop【描述】
送分题
项目介绍一下【描述】
客户端mock怎么支持【描述】【举例】
客户端 => 协议转换服务 => 中转服务 => mock服务（接入mockjs）
怎么mock真数据，我需要真的id怎么办，除了写死【描述】
反向抓包，无需自己填充数据。或者全链路监控里面捞出一个id
什么情况用ts、什么时候不用【描述】
公共组件、库一定要，不重要的业务代码、节奏快的业务代码不用
单元测试和ts结合【描述】【举例】
有ts的话，输入参数很容易可以知道有没有问题
全球远程调度机器实现自动化测试【描述】
请求 => 分发 => 海外机器 => 调起当地机器 => 自动化脚本(如puppeteer) => 跑ui流程 => 上报结果 => 系统展示
cjs实现esm【伪代码】
参考webpack把esmodule的import转成wepack_require的样子

3面

是北京那边的人面的，感觉到很老练的气质，气场很强

项目介绍。权限系统业界内怎么设计，常见的几种【描述】
rbac0～3、前端简单判断、后端按需返回
工作量体现到什么地方，现在工作量大吗【描述】
重构、树结构组件、各平台数据适配、技术轮子的推广
最困难的环节【举例】
一个能光速开发内部系统的公共组件设计、推广自己做的平台给公司其他团队用
优点缺点、未来规划
怕被人挑战吗，怎么应对

加面

很亲切，之前也是腾讯的，在2、3面被虐后，加面突然像是如沐春风的感觉，很轻松惬意

经过前面对了解，你知道我们这边做什么了吗，描述一下【描述】
我们的技术栈差不多，如果你来上班，如何快速过渡和上手适应【描述】
内部系统 => todev系统，针对人群不一样，技术栈类似，容易解决。
对b和c端业务对理解【描述】
简单来说，b端ui要求低、架构复杂；c端ui要求高、架构简单。详细的点，引申出去还有很多很多
tob业务架构设计、技术选型【举例】
先出结构图、流程图，再给出表结构设计，确定了方案，组件、模块划分。技术选型一般就是三大框架+配套的标准ui了，如vue与ele-ui，react与antd，加上状态管理、路由等。如果复杂的混杂多项目多系统，使用微前端，spa或者iframe两种取其一，如果没有历史包袱可选spa、如果有历史包袱使用iframe嵌入，但需要和其他前端进行对协议（前端和前端联调😊）这里可以讲20分钟
项目开发流程、生命周期【举例】
自动化测试设计思路【描述】
用例、断言、输出结果