【字节跳动】一年经验前端社招面经
## 前言
在现在的公司待了一年左右，做了不少项目，自己感觉也有一些成长，想投一些简历看看市场上的情况，也评估一下现在自己的水平，还有哪些不足，如果有适合的机会就跳槽。
结果发现不知道是不是怼在了校招的枪口上还是因为年限太少了，投出去的简历回应的公司很少，找了很多牛客的大佬内推，进入了内推流程，但最终都没有参加面试。
最后靠着牛客的社招投递渠道，被字节的HR捞起来了，不得不说字节的效率真高，我刚刚投了简历，第二天就电话联系我让我参加面试~😄，所以说只要你愿意尝试，字节都会给你一次机会的~
如果有需要内推的同学可以私聊我～
## 一面
面试的形式走的是牛客上的视频在线面试，可以直接敲代码~。
面试开始，一上来面试官为了缓解你紧张的情绪，会先问一些你熟悉的问题，先跟你建立起沟通的渠道：
1. 自我介绍一下吧
2. 你项目中遇到过最难的一个问题是什么？你是怎么解决的？
第二个问题建议事先准备一下😉， 如果答的不好不会扣分，但是如果回答的好会给面试官比较好的印象，可以体现出你是有用心做过项目的，平常也会总结遇到的问题，积累一些自己的解决方案。
这里我答的不好，我说我感觉没遇到特别难的问题，大部分时间都花在了 debug 身上，最后都忘了解决的是什么问题了😅
然后面试官看话题进行不下去了，话锋一转，说那我问你一些常规的问题吧~。毕竟就算社招一年，字节比较重基础，本质上还是按照校招的要求来的，再加上一些项目的实践经验，而且由于在一面，项目不会问的特别多。
3. 有了解过强缓存和协商缓存吗？强缓存和协商缓存返回的状态码一样吗？分别是什么？
这个网上资料太多了就不细说了：
浏览器缓存机制：Memory Cache、Service Worker Cache、Push Cache、HTTP Cache
HTTP 缓存包含强缓存和协商缓存
强缓存：expires、cache-control: max-age=xxx
协商缓存：Last-Modified(If-Modified-Since)、Etag(If-None-Match)
强缓存命中了状态码是 200，协商缓存命中了是 304，没命中重新走请求结果也是200
4. HTTPS 协议了解吗？里面用了哪些算法？非对称加密和对称加密分别用在HTTPS握手的哪个阶段？
我这里讲了下 SSL 3.0 到 TLS v1.3 的发展历史，面试官说你不要给我讲故事，直接讲重点🤣
5. HTTPS 存在安全性问题吗？有什么办法可以解决吗？
中间人攻击
6. 平常有遇到跨域的问题吗？如何解决的？
我举了 JSONP、CORS、NGINX正向/反向代理、websocket 等工作中常用的跨域方式
7. 详细说说 JSONP 的实现原理？
这里最好会手写JSONP的实现，面试官有可能让你手写实现一下
8. 事件循环机制
考点：宏任务/微任务
做题，判断打印顺序，这个题考的频率有点高，最后做完后说下一你的分析思路~
9. 给一道题判断 this 指向，然后写出打印的结果
10. 给一道闭包的题目，然后写出打印的结果
11. XSS和CSRF攻击知道吗？如何预防，常见预防方式有哪些？
（小伙子看你js还行，问问样式吧）
12. 未知宽高元素如何居中？不能用 flex
至少说出3种左右吧，能写出最好。
13. flex: 1 1 0; 的三个值分别指的是什么？
手写算法：
14. 实现一下深拷贝，注意数组、对象、函数的深拷贝，注意处理深拷贝中对象原型丢失的问题，注意处理类型判断的问题
坑点1：对类型判断的熟练度, 对 typeof、Object.prototype.toString.call 的熟练使用
判断对象的方法 typeof obj !== null && typeof obj === "object"
判断函数的方法 typeof fn === 'function'
坑点2：函数深拷贝，这个讲了思路，真没写出来
坑点3：如何修复对象深拷贝原型丢失的问题
拓展：如何拷贝特殊对象 Map、Set等等
15. 给两个字符串，实现字符串的 findIndex 算法，注意边界条件
（上一题太紧张了没答好，面试官又给了一道简单的，良心😊）
16. 动态规划爬楼梯，如果求解类似的动态规划问题，数学原理是什么？
问下反馈
一面的面试官说我字符串相关的算法还要加强，其实是太紧张了，一下遇到了比较陌生的题，尽管最后也写出来了，但是不是最优最简单的方式，写的太啰嗦了~
## 二面
1. 介绍一下你的项目吧
由于是社招，二面就比较侧重问项目方面的内容了，这里项目相关的就不多说了，自己熟悉，准备好合适的项目就行~，而且自己做过的项目一定要吃透，数量不在多，两个项目就行，关键在于质量和深度😀
2. Vue-router 的实现原理？有哪两种模式？
history 和 hash 模式
hash: window.onhashchange
history: history.pushState、history.replaceState
3. Vue 中组件的生命周期函数有哪些？能说说父子组件钩子函数执行对应的顺序嘛？
***循环机制，宏任务，微任务（别看和一面一样，实际上难度升级）
（1）同样是问打印结果，增加了很多 async await 和 Promise.resolve 的内容
（2）requestAnimationFrame 属于宏任务还是微任务？
（3）NodeJs 的事件循环机制知道吗？
5. 手写算法并运行
（1）螺旋矩阵
（2）寻找路径（回溯）
二面结束，总体答的一般，好在算法都做出来了
## 三面
三面主要是问些项目的上层设计、技术选型、以及应聘岗位相关的一些技术了解程度
## 总结
应该是我的运气比较好，面试问的题总体不算特别难，像我准备的Promise相关的题目还没问到。关键是要保持好良好的心态， 不用过于紧张了，一时忘了答不出来的面试官会引导你的~不用担心~
事先练习了很多题目，准备了很多算法和八股文，结果考到的只是冰山一角，但不意味着大量的练习就不重要了，有时候多做题真的能帮上忙。我的一些做题小经验，
算法做200道题左右（主要是简单和中等，分类做，反复做，题型包括动态规划、字符串处理、二叉树、双指针这些都是字节常考的）
JS编程题（一定要动手写，而且要有深度，考虑周全，例如说深拷贝，最好要把所有的情况都考虑到，如果只考虑了对象和数组，面试官就会问些其他的类型😂）
总体字节的前端还是偏重基础的编码能力的，能 coding 才能干好活，typescript 啥的也不怎么问，react 和 vue 两个框架基本熟悉一个就好，当然两个都会更加分，但如果时间有限的话加强学习一个就行。
我的大部分经验和知识都是从牛客上看来的，确实收获了很多，写一篇小面经回馈牛客~
投递西山居等公司8个岗位 >
广东移动二面3人在聊