字节跳动前端面经

已经过去8个月了， 勉强回忆起了大部分的内容。我的面试偏话痨风， 时常带节奏， 反面教材， 适度参考。

一面

一面是交叉面， 一个超级有气质的小姐姐hhh， 瞬间对头条充满了憧憬。 一上来先做了一下自我介绍， balabalabala~

问题1： 签到题

1. Q： vue的双向绑定是怎么实现的？
2. A： 旧版本是defineProperty， 新版本是proxy。 defineProperty可以设置对象的一个属性的setter和getter， 以及是否冻结等等， 通过这样的方式来给赋值运算注入更多的操作， 比如触发更新事件。
3. 马后炮： 大概看过defineProperty的API， 目测是通过getter实现触发更新的， 更多细节还真没有看过代码。 还有proxy也没有研究。
4. Q: vue的生命周期？
5. A: 马马虎虎答上来了， 半年多没用vue， 忘了~

问题2： 真没想到会问这个

1. Q： 如何debug?
2. A： console.log打日志，但是一般效率比较低下。 然后主要是打断点。
3. Q： 怎么打断点排查？
4. A： 如果涉及网络请求， 要先排查是否是前端问题， 是否请求错误或者返回的数据格式不符合预期。 打断点的话有个二分打断点的思路很巧妙。 但其实主要是在整个页面的主逻辑打断点， 看进入各个外层的函数的参数 以及它们的返回值是否符合预期， 发现问题后进一步再看这个函数/调用栈内的细节。 这样一层层定位到问题。

问题3： 综合知识

1. Q: 知道网页从打开到展示的全过程吗？
2. A: 首先是DNS解析， 这个过程是先访问本地的DNS服务器， 如果有缓存会直接返回对应域名的ip地址， 如果没有缓存会先到对应的根DNS服务器， 比如.com的DNS服务器， 查询到对应的域名的DNS服务器， 这样迭代查询之后得到ip地址， 然后访问对应的端口， 如果没有写， 默认是80端口。 这时候服务器上的http服务器， 比如nginx，监听着这个端口， 接到请求后根据命中的host的规则， 一般会再转发给node.js的服务， 或者php等服务的端口去处理后端路由， 静态资源就可以直接返回了。 这里就根据路由规则去命中， 如果都没有命中一般会配置默认规则， 走到统一的404错误页。 到了具体的前端页面之后， 还会有前端路由， 类似的机制去渲染页面。 前端的head里的css、js会阻塞渲染， 然后渲染页面
3. 马后炮： 没有好好准备， 应该先讲整体的步骤， 再细说， 页面渲染的部分才是前端的重点， 反而也没有答好。 再补一下浏览器渲染的相关知识比较好。

问题4： 写道题

1. Q: 写一道数据结构题吧， 给一个二叉树和一个目标值， 写一个函数返回这个树中是否有一条路径等于目标值。 （）给的例子节点都是正值）
2. A: 路径的话就是从树根到任何一个结点了， 包括非叶子结点？ 结点值会出现0或者负值吗？
3. Q: 不会。
4. A: 有些紧张， 不追求最优解了， 写了一个递归深搜然后剪枝， 递归调用返回true时返回ture, 否则返回false。 遍历到某个节点的时候路径值等于target就返回true， 这样逆着调用栈就会一直弹出true， 终止函数。 如果到底某个节点的路径值大于目标值， 则直接返回false剪枝， 不再往下搜索（太懒了， 代码略）。 大概写了15分钟， 差不多的时候面试官说了过。
5. 马后炮： 马马虎虎吧~ 太紧张了， 不过不追求最优解比较稳扎稳打， 不然可能由于太紧张答不出来。 边写代码边讲自己思路， 免得最后翻车面试官不知道你在干嘛。 自我感觉答的还行。

问题5： 问项目1 -> websocket

1. Q：说说南大马拉松做的那个项目吧。
2. A：大概类似雨课堂， 就是上课的时候学生可以签到， 老师可以在线提问题， 学生在线回答， 统计正确率等等。
3. Q: 有什么技术难点吗？
4. A: 用到了websocket。
5. Q: 为什么用websocket， 不用轮询？
6. A: 如果轮询间隔太短服务器压力会比较大， 如果轮询时间太长延迟比较高？
7. Q: 说说websocket和轮询的区别？
8. A: 轮询的话就是使用ajax， 每次都是一个基于TCP的HTTP请求， 需要三次握手， 传播时延和传输时延都比较长， 就算数据量很小， 带上TCP的请求头， HTTP的请求头， 数据报还是很长。 websoket的话大概四个套接就可以进行一次通信， 了解是否有数据更新。 （遍不下去了hhhh）
9. Q： balabalabala（知识盲区， 大概就是进一步问websocket的知识）？
10. A： 不了解， 我当时是马拉松的时候临时上网快速看了一下websocket的demo， 了解不深。 （战略放弃， 快点抄作业， 大神不用管， 什么都懂）
11. 马后炮： 做足准备哈朋友， 裸面不可取， 不熟悉的技术弱化一下甚至不提比较好。

问题6： 问项目2

1. Q: 这个财务系统的项目有什么难点？
2. A: 一张订单我们会有展示、编辑和新建几种行为， 我开发的时候为了减少复制粘贴， 将这三种都实现在一个页面组件里。
3. Q: 具体说说？
4. A: 每一行的数据增加一些虚拟参数， 比如id， 新建的时候用-1做常量， 编辑的时候已经从后端读到了数据， 有一个editable属性， 标识是否处于编辑状态。 然后视图上做相应的展现， 进入页面根据path生成一个局部变量action表示是新建还是编辑， 在提交的时候根据这些信息做不同的数据处理， 主要是每一行在提交的时候回去掉虚拟参数， 然后调用对应的接口等等。
5. 马后炮： 没准备好难点， 其实还有个表单配置化没说， 哭了。

轻松环节：

1. Q: 有什么想问我的吗？
2. A: 技术栈会有要求吗？ 我看岗位描述上主要使用react。
3. Q: 这边有vue也有react的， 过来会有导师带你。
4. A: 实习多久可以转正？
5. Q: 40天后可以转正答辩。

二面

一面背景还是一排排工位， 二年背景是面试间的白墙， 一上来就感觉比较有压力。 一面结束后休息了半个小时开始的二面， 有点点累。 惯例先自我介绍， balabala。
面试官：嗯？ 你准备考研？ （眼睛里放出了光芒）， 然后开始虐我。

问题1： 网络知识

1. Q: 说一下慢启动和快重传?
2. A： 一开始是两倍两倍地增加传输的帧数， 发现拥塞后。 慢启动是一种保守的策略， 认为刚刚发生了拥塞， 就从指数增长改成了线性增长， 慢慢增加传输的帧数。 快重传是一种乐观的策略， balabale~
3. Q： 说一下RIP协议和ospf协议的区别？
4. A: RIP适用于小型网络，比较简单， OSPF适用于大型网络 ， 内部又分为若干个自制系统~ （还回答了一两句， 记不清了）
5. Q： 我想知道他们的区别？
6. A: (开始胡诌) RIP是根据跳数来度量距离的， 没有考虑传输时延， 不太准确。 OSPF是利用Dijkstra（又百度了一下这个怎么拼有没有） 算法用时间作为度量的， 比较准确。 RIP追求精确，得到的是根据度量的最短路，但是遇到不可达网络的时候收敛会比较慢。 OSPF通过划分为一个个自治区域， 不追求最短路， 先大致得到一条路径， 收敛比较快。
7. …此处省略两三个问题， 磕磕绊绊答了一些， 概念记不清， 不过都按自己的理解胡诌了一下。不过居然没有问TCP的三次握手四次挥手。
8. 马后炮： 当时答的应该更好一丢丢， 由于考研学了点， 虽然考研后期都在看数学~

问题2： 操作系统

1. Q: 说一下进程和线程的区别？
2. A: 线程是系统调度的最小单位， 进程是系统资源分配的最小单位。 同一个进程的线程可以共享内存资源， 不需要调度机调度， 不同的进程间的线程切换以及不同的线程切换需要调度机调度， 开销比较大。 线程的实现比进程灵活， 可以在操作系统内核实现也可以在编程语言层面实现。
3. Q: 怎么实现一个LRU算法？
4. A：(忘了怎么答的了， 应该还行

问题3： 再写个题

1. 忘了， 大概跟一面差不多难度， 比预想的轻松。

问题4： 来， 翻个车

1. Q： 知道防抖节流吗？
2. A： 不知道… 是指某个时间多少秒内只执行一次吗
3. 马后炮： 其实是知道的(强行狡辩， 在做游戏的时候类似的手法用的非常多~

问题5： 浏览器渲染 && JS基础

1. Q： 知道BFC吗？
2. A： 不知道。
3. Q： 知道重排和重绘吗？
4. A： 不知道。
5. Q: 说一下bind、call和apply。
6. A: 老经典题了， 原理就是利用的是闭包和arguments实现的。 此处省略基本实现。 附赠了， 实现了call或者apply其中一个， 再封住一层就实现了另一个。
7. Q: 说一下typeof和instanceOf的区别？
8. A: 又是老经典题。 typeof返回的的是字符串， 对于数组会返回“Object”。 instanceof是在原型链上一层层往上查找 balabala
9. 马后炮： 前端知识确实不扎实， 让你二把刀前端~

问题6： 人生题？

1. Q: 为什么选前端？
2. A: 有了解过Java， Java的swing和awt做UI很蛋疼， 布局能力太差。 后来用python的pyqt写UI的时候， 它也实现了一套类似CSS的机制， 远远不如CSS强大。 特别是现在的electron这么强大， github的客户端、atom、vscode、cocos creator都是用它写的， 对比之下前端确实很强。 还有TS和JS混写， 非常舒服， 底层的一些兼容处理之类的可以用js来写， 上层逻辑用TS来写， TS的类型推断、自动向上转型等等。 强类型和弱类型结合起来， 体验非常好。balabala， 还有说学的PHP， 现在大厂都不用了， 算法转后端怕简历投不进的现实~

轻松一下

1. Q: 有什么想问的吗？
2. A: 我答的还行吗， 能进入下一轮吗（慌了慌了） 是不是前端基础部分比较差， 网络之类的还可以。
3. Q: 对自己定位还挺准确的， 我觉得还不错， 你说的挺有意思。

三面

听说三面都是leader， 非常紧张， 特别害怕像阿里那种压力面。 还好leader看起来很随和。 先自我介绍， 都会背了hhh

问题1： promise

1. Q: 知道promise吗
2. A： 忘了怎么答的了， 马马虎虎。
3. Q: 来， 写个题， 我现在一张图用很多CDN， 怎么知道哪个先加载完成（大概是类似的问题 ，具体忘了）
4. A: 一直听不懂image是什么， 哑巴英语吃亏了。 promise用的不熟， 用回调混过这道题了。
5. 马后炮： 平时只是简单地使用promise的all之类功能， 没有深究。 在《深入浅出node.js》这本书里对这个非常详细的介绍， 不过当时没有太关注。

问题2: cookie

1. Q: 知道cookie、session和localstorage吗？
2. A: 常规回答, 具体忘了， balabala， 马马虎虎。
3. Q: cookie有哪些字段？
4. A: cookie作为一个字符串存储， 要自己实现一个kv的机制， 我一般用cookiejs这个库， 然后cookie有过期时间等等。
5. Q: 知道cookie的samesite字段吗？
6. A： 不知道。
   到这里其实很慌了， 感觉要凉了， 还好后半段还行。

问题3： 安全问题

1. Q: 知道CSRF吗？
2. A: 知道， 这个是为了防止绕过页面， 直接像我们的服务端发送接口的一种防御机制。 它是生成一个token存储在后端， 然后我们打开一个表单页的时候这个token会放在表单里作为一个隐藏的字段或者请求的header， 提交的时候带过去， 这样就知道这个请求是从我们的页面来的， 而不是跳过我们的页面直接发过来的请求。
3. Q: 还知道什么安全的问题？
4. A: XSS攻击和SQL注入
5. Q: 具体说说？
6. A: XSS攻击是指向我们页面直接注入一段javascript脚本， 然后别的用户访问的时候就会被攻击到。 SQL注入是指一些请求比如直接在GET写的参数， 后端进行sql查询的时候直接拼接sql语句， 导致的安全漏洞， 比如在参数里写一个or 1 = 1。不过现在的JAVA的JDBC和PHP的PDO之类的都自带了防御。
7. Q: XSS攻击再具体说说怎么攻击的， 怎么防御的，举个例子？
8. A: 比如一个留言板， 如果我们没有对HTML标签进行过滤， 用户可以插入js脚本。其他用户访问这个页面的时候就会直接执行JS标本。 这个脚本可能是把页面上的一些信息直接发送出去， 泄漏用户隐私。 更危险的是如果我们没有验证码和CSRF的机制， 这个脚本直接帮用户发请求修改密码等等。
9. Q: 就只是过滤HTML标签吗？
10. A: 想不到别的了。

问题4： 场景题

1. Q: 实现一个搜索框， 类似百度那种， 要考虑什么问题？
2. A: 首先要有缓存机制， 用户可能输入四个字再删掉两个字这种会重复搜索， 加个缓存机制减少服务器的压力。 其次是要节流， 停止输入一定间隔才会触发自动的去获取相关的搜索词。 然后是数据的转换， 比如空格隔开关键词和使用+隔开， 这种是一样的， 要做数据的反序列换， 转换成后端容易处理的数据， 比如数组， 当然常见的数据处理还有去掉首尾空格之类的。
3. Q：要支持从不同的来源搜索， 这些来源的数据格式也不同？ 怎么设计？
4. A: 首先有一个服务注册的概念， 每一个来源是一个服务， 它有服务id， 请求的url等一些信息， 最主要的是有一个parse函数， 输入是获取到的原始数据， 返回的值是经过转换的， 我们搜索页面能识别的最终格式， 这样把不同来源数据转换过来。 然后注册的服务会存储在一个数组中， 主逻辑就读出这些服务， 去生成界面， 主逻辑大概这样balabala 写了点代码表示。

问题5： 项目1

1. Q: 财务系统的难点在哪？
2. A： ~又回答了一次。

问题6： 项目2

1. Q: 二手交易那个项目？
2. A： 那个技术栈比较老。
3. Q: 哪个项目比较复杂？
4. A: 游戏引擎和塔防游戏吧。 游戏引擎的话要实现动画系统、精灵系统之类的，当时看了cocos-js和erget的源码 用到很多设计模式， 解决一些浏览器兼容性问题。 比如有的浏览器不支持暂停播放的api， 只能通过记录上次暂停的时间节点， 通过停止再重新播放模拟暂停， 封住后屏蔽底层的兼容，给上层调用。塔防游戏也是， 用到享元模式、有限状态机之类的。
5. Q： 说说有限状态机吧， 哪里用到了？
6. A: 主要是怪物的状态， 有等待中、发现目标的行进中和攻击中这几种状态。 有限状态机主要就是定义进入状态 、 更新 、 离开状态的一些操作。
7. Q: 写一下有限状态机的实现。
8. A： 大概写了十多分钟， 还实现了钩子函数， 每个状态机的子类在对应阶段会自动调用父类钩子函数， 可以封住一些公共行为。
9. Q: 说一下怪物的状态， 这个状态流转是一定要遵循一定的次序还是可以任意切换？
10. A: 不能任意切换。 必须按照一定的次序， 这样每一个状态的前一个和后一个就确定了， 实现的时候不容易出现bug， 否则状态越多， 排列组合有非常多的可能。 比如需要从等待状态切换到攻击中， 其实可以在同一帧里完成等待->行进中， 下一桢进入攻击中， 这样在玩家看来是直接从等待中到了攻击中， 游戏逻辑没有影响， 代码逻辑更健壮。

轻松一下

1. Q: 为什么做前端？
2. A： 省略了前端和 java GUI、python GUI的对比， 直接说了PHP就业前景， 前端的前景等等。
3. Q： 有什么想问我的吗？
4. A: 如何成为一个合格的前端工程师。 然后成为一个优秀的前端工程师呢？
5. Q： 这个问题有点大，来了之后问你导师吧。 加个微信吧， 有别的问题也可以问我。
6. A: （愣头青提问 ）， 我通过了吗， 如果没有通过多久能知道结果呢？
7. Q: 现在不能告诉你， 不过我都暗示的这么明显了…
8. A: 谢谢~

后记

有点点愣头青， 不过应届生嘛， 也不能表现的太圆滑。 当晚开始上知乎研究和HR谈薪的技巧， 不过校招安排的明明白白， 白白和空气斗智斗勇。
总体不是很难， 面试官都很nice， 主要是自己前端基础不太扎实， 有些很简单的问题被卡住就比较有压力。 后续还是先专注前端的学习。