- 作者：阿吉
- 整理&点评：lucifer
为什么要写这个面经？
lucifer 说让我写一下秋招面经，但我很菜，一开始不想写的。最主要的是不想暴露自己的菜，虽然群佬都知道我比较菜。
lucifer 的群大概是我唯一一个每时每刻都能得到响应的群吧。很开心当时只是随便加了一下，但认识了好多大佬，经常在群里问一些很没头脑的问题，但总有人会艾特我回答，尽可能去触摸自己的知识边界帮我解答，大家都在交流（技术+扯皮）。
比较遗憾没偷学到 lucifer 的算法能力，也没能白嫖到小漾的美图。在 lucifer 群里开群语音，还有幸白嫖过川川(若川大佬)的声音 hhhhhh。大概我挺希望小漾看到这个文章能主动点晒照一下 hhhh（感觉第二天我就没了）。
面试体验
好未来的四位面试官给予的面试体验很舒服。四面面试官说话一直用“您”。四面面试快结束的时候：
-
我：“我们的时间价值并不对等，所以很感谢您愿意抽时间面试我”
-
面试官：“不，我们的时间是对等的，我们今天只是在平等的交流”。
好未来的面试体验可能是目前秋招面试最舒服的，因为平时喜欢看很多闲书（面试很少会问的那种），把那些知识都有机会和面试官进行了分享。
❝
面试官的问题用 Q 表示， 我的回答用 A 表示，序号表示第几个。 比如 Q5 表示面试官的第五个问题， A8 表示我对第八个问题的回答。
❞
一面（男）
面试内容
- Q1: 聊项目，聊实习公司，问什么时候开始学前端
- A1: 大二
- Q2: 说一下排序算法。手撕冒泡，快排及其优化
- A2: blabla
❝
lucifer 小提示: 要可以手撕才行哦。
❞
-
Q3: TCP 和 UDP 区别。TCP 为什么是可靠的？
-
A3: 《计网 自顶向下》，同时说了应用场景。
-
Q4: 三次握手，四次挥手
-
A4: 过程，字段，为何两次不行，各自作用。SYN 半连接攻击。
-
Q5: 谈一下 HTTP
-
A5: 详细说 HTTP 1.0 1.1 2 3 细说文本格式和二进制格式（这个很感谢 feiker 大表哥在群里说了下），以及 HPACK，应用层和传输层的队头阻塞，多路复用和多路分解 瞎扯了一下 302 303 307 在 RFC 规范中的发展历史，其实是跟浏览器大战年代相关的。
-
Q6: 浏览器缓存
-
A6: 四级：Service Work, Memory Cache, Disk Cache, Push Cache HTTP 控制的缓存位于 Disk Cache，即强缓存和协商缓存。二者中间的启发式缓存。
-
Q7: CDN
-
A7: content dispatch newwork。 《计网 自顶向下》
-
Q8: 从 URL 到浏览器渲染，仅围绕 HTTP 相关展开
-
A8: 因为仅涉及 HTTP，除了常规回答，谈了下 webkit 里的三类资源加载器，以及网络栈。
-
Q9: 编译性语言 和 解释性语言的区别
-
A9: java，js。引申 JVM 和 V8。以及 V8 在早些年间拒绝采用中间码（《了不起的 nodejs》那本书比较老，里面就是无中间码），后来又采用了。其实最开始的原因就是考虑到移动端存储量。
-
Q10: 单线程的原因，好处
-
A10: JS 多线程对 DOM 的坏处。引申 webkit 多线程，看面试官比较感兴趣，又分析了浏览器的多进程架构，以及 Renderer 进程的四个配置项。
二面-男
面试内容
- Q1: 聊项目，前端倒计时，IOS 兼容等
- A1: ...
- Q2: 各种排序的时间复杂度
- A2: ...
❝
lucifer 小提示: 不要死记硬背。
❞
- Q3: 手撕代码
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">`function tpl(template, data){
}
// 输入
tpl('<div class={%className%}>{%name%}</div>', {className:'hd', name:123})
// 输出
<div class="hd">123</div>
// 面试时编码思路：根据浏览器的词法分析去做，用stack。但存在问题。` </pre>
-
A3:...
-
Q4: 看代码说输出，作用域
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">var a = 2; function fn1() { var a = 1; console.log(this.a + a); } function fn2() { var a = 10; fn1(); } fn2(); // 扯了一下this指向，以及C++中作用域的_variable表默认添加。 </pre>
-
A4: ...
-
Q5: 你对闭包的理解
-
A5: 函数执行的保护机制。围绕函数执行机制（后来 lucifer 男神讲可以从词法作用域说，但毕竟是面试，感觉从函数执行来讲比较 ok），结合 V8 生成 AST 角度去谈何为闭包。具像为作用域链，及其 2 个表象。优缺点。理论应用：在 Vue 中的应用 Dep()，React 中的应用 Redux dispatch，设计模式中单例模式。项目应用：H5 前端自拟倒计时 destroyed 销毁引用。
三面-女
面试内容
- Q1: 自我介绍
- A1: 叫 AJ，来自 X，能干活。
- Q2: 聊点你的学校经历吧
- A2: 在校职务...
- Q3: 为什么选择前端
- A3: 经过大一尝试过 java,py,cnn 后决定，前端作为当下的生存技能。兴趣不局限于此。
❝
lucifer 小提示: 不要把自己局限到前端。
❞
- Q4: 为什么不现在就去学后端
- A4: 我明白自己每个阶段想要的是什么，当下秋招的我应该找一份匹配自己的工作。
- Q5: 未来三年的职业规划
- A5: 业务崽。
- Q6: 实习公司，对比百度、腾讯、小米，最不喜欢哪一个？
- A6: 从不同的层面去说最喜欢哪家。
- Q7: 你觉得你的缺点有什么
- A7: 不喜欢跟人争执，浪费时间且无趣。
- Q8: 为什么会投我们公司，了解我们吗
- A8: 很好的朋友在开课吧(然哥)，给我说好未来还挺不错的。秒投了。
- Q9: 我们的业务有...你喜欢哪个业务啊
- A10: 直播吧
四面-男
面试内容
- Q1: Vue 那种左右界面，中间的竖线可以滑动，左右布局跟着变化，怎么去做优化，可以从哪些角度触发
- A1: 不会。尝试从 Vue Object.freeze() 和 提升图层角度去说。
- Q2: GPU 硬件加速渲染说下原理
- A2: 不会。从 CSS3 触发的角度说了下。
- Q3: HTTPS 性能损耗在哪里？
- A3: TLS 握手。从《计算机网络 自顶向下》那本书里提的角度简单说了下。同时认为非对称加密算法对服务端资源消耗比较大。
- Q4: 你如何去解决前端人员被需求压满，然后做业务觉得没有技术成长
- A4: 不局限在功能点的开发，真正理解业务，理解业务流程中的数据流向以及坑点。当在当前环境遇到技术瓶颈要跳槽时，带着已有经验去下一个环境。
- Q5. 谈谈 WebSocket，然后怎么去改造。
- A5: 简单说了一点理论，直言没实践过。
❝
lucifer 小提示: 可以自己实现一个 WebSocket 玩玩就啥都知道了。
❞
- Q6: 直播业务中，常用的协议是什么
- A6: 仅知道 webRTC。
- Q7: 海量数据找出最大的 K 个，怎么找？时间复杂度是多少？
- A7: lucifer 之前的文章应该有过，没记牢固。简单说了下。
❝
lucifer 小提示：我们只需要建立一个大小为 K 的小顶堆，N 个数分别入堆，最后堆顶的元素就是第 K 大的。 时间复杂度
❞
- Q8: 了解好未来吗？为什么要来？
- A8: 做教育的。我哥推荐的。
PS: 面试白菜起步。SP 面是四面。
lucifer 点评
由于是校招的原因，整个面试过程比较注重的是基础知识以及思考和学习方式。并且可以看出侧重点依然是：
- 网络（TCP，DNS，HTTP，HTTPS，浏览器缓存等）
- 浏览器渲染（GPU 硬件加速， webkit 原理等）
- 数据结构与算法（排序算法，复杂度分析，堆的应用等）
对于每一个部分，我们首先要做的是建立大局观，这样即使错，也不会错到哪去。大局观建立好了，相当于基本的知识框架有了，接下来就是填充知识框架了。这个阶段最主要的就是巩固复习和查缺补漏。经过这样的一个学习，相信你也能够在面试中崭露头角，获得心仪的 offer。
大家也可以关注我的公众号《脑洞前端》获取更多更新鲜的前端硬核文章，带你认识你不知道的前端。
image
公众号【 力扣加加】 知乎专栏【 Lucifer - 知乎】
点关注，不迷路！
网友评论