前端面试题宝典

【字节社招】一年经验前端面经

简介：今天给大家分享的是一位一年工作经验的小伙伴，面试字节跳动前端面经。
可前往公众号查看原文：前端面试，关注公众号，查看最新面经和技术文章哦~

之前我们的调查问卷里一些小伙伴说希望我们分享一些社招的前端面经。那今天给大家分享的是一位一年工作经验的小伙伴，面试字节跳动的前端面经。

一面

面试的形式走的是牛客上的视频在线面试，可以直接敲代码~。面试开始，一上来面试官为了缓解你紧张的情绪，会先问一些你熟悉的问题，先跟你建立起沟通的渠道：

  1. 自我介绍一下吧

  2. 你项目中遇到过最难的一个问题是什么？你是怎么解决的？

第二个问题建议事先准备一下 😉， 如果答的不好不会扣分，但是如果回答的好会给面试官比较好的印象，可以体现出你是有用心做过项目的，平常也会总结遇到的问题，积累一些自己的解决方案。这里我答的不好，我说我感觉没遇到特别难的问题，大部分时间都花在了 debug 身上 ，最后都忘了解决的是什么问题了😅

然后面试官看话题进行不下去了，话锋一转，说那我问你一些常规的问题吧~。毕竟就算社招一年，字节比较重基础，本质上还是按照校招的要求来的，再加上一些项目的实践经验，而且由于在一面，项目不会问的特别多。

  1. 有了解过强缓存和协商缓存吗？强缓存和协商缓存返回的状态码一样吗？分别是什么？

这个网上资料太多了就不细说了：

浏览器缓存机制：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

  1. HTTPS 协议了解吗？里面用了哪些算法？非对称加密和对称加密分别用在HTTPS握手的哪个阶段？

我这里讲了下 SSL 3.0 到 TLS v1.3 的发展历史，面试官说你不要给我讲故事，直接讲重点 🤣

  1. HTTPS 存在安全性问题吗？有什么办法可以解决吗？

中间人攻击

  1. 平常有遇到跨域的问题吗？如何解决的？

我举了 JSONP、CORS、NGINX正向/反向代理、websocket 等工作中常用的跨域方式

  1. 详细说说 JSONP 的实现原理？

这里最好会手写JSONP的实现，面试官有可能让你手写实现一下

  1. 事件循环机制

考点：宏任务/微任务

做题，判断打印顺序，这个题考的频率有点高，最后做完后说下你的分析思路~

  1. 给一道题判断 this 指向，然后写出打印的结果

  2. 给一道闭包的题目，然后写出打印的结果

  3. XSS和CSRF攻击知道吗？如何预防，常见预防方式有哪些？

（小伙子看你js还行，问问样式吧 ）

  1. 未知宽高元素如何居中？不能用 flex

至少说出3种左右吧，能写出最好。

  1. flex: 1 1 0;  的三个值分别指的是什么？

  2. 实现一下深拷贝，注意数组、对象、函数的深拷贝，注意处理深拷贝中对象原型丢失的问题，注意处理类型判断的问题

坑点1：对类型判断的熟练度, 对 typeof、Object.prototype.toString.call 的熟练使用

判断对象的方法 typeof obj !== null && typeof obj === "object"

判断函数的方法 typeof fn === 'function'

坑点2：函数深拷贝，这个讲了思路，真没写出来

坑点3：如何修复对象深拷贝原型丢失的问题

拓展：如何拷贝特殊对象 Map、Set等等

  1. 给两个字符串，实现字符串的 findIndex 算法，注意边界条件

（上一题太紧张了没答好，面试官又给了一道简单的，良心 😊）

  1. 动态规划爬楼梯，如果求解类似的动态规划问题，数学原理是什么？

一面的面试官说我字符串相关的算法还要加强，其实是太紧张了，一下遇到了比较陌生的题，尽管最后也写出来了，但是不是最优最简单的方式，写的太啰嗦了~

二面

  1. 介绍一下你的项目吧

由于是社招，二面就比较侧重问项目方面的内容了，这里项目相关的 就不多说了，自己熟悉，准备好合适的项目就行~，而且自己做过的项目一定要吃透，数量不在多，两个项目就行，关键在于质量和深度 😀

  1. Vue-router 的实现原理？有哪两种模式？

history 和 hash 模式

hash: window.onhashchange

history: history.pushState、history.replaceState

  1. Vue 中组件的生命周期函数有哪些？能说说父子组件钩子函数执行对应的顺序嘛？

  2. 循环机制，宏任务，微任务（别看和一面一样，实际上难度升级）

（1）同样是问打印结果，增加了很多 async await 和 Promise.resolve 的内容

（2）requestAnimationFrame 属于宏任务还是微任务？

（3）NodeJs 的事件循环机制知道吗？

  1. 手写算法并运行

（1）螺旋矩阵

（2）寻找路径（回溯）

二面结束，总体答的一般，好在算法都做出来了

三面

三面主要是问些项目的上层设计、技术选型、以及应聘岗位相关的一些技术了解程度

面试官点评

这篇社招的面试总体来说不算特别难，面试官对一年工作经验的候选人更注重考察前端基础。尤其一面基本上没有问到前端框架，更侧重前端相关的基础知识。对于大厂面试，算法题和编程题还是要做好充分准备的，作者也总结了字节常考的算法题类型，主要是简单和中等，题型包括动态规划、字符串处理、二叉树、双指针等等。

最后

《前端面试题宝典》经过近一年的迭代，现已推出 小程序 和 电脑版刷题网站 （https://fe.ecool.fun/），欢迎大家使用~

同时，我们还推出了面试辅导的增值服务，可以为大家提供 “简历指导” 和 “模拟面试” 服务，感兴趣的同学可以联系小助手（微信号：interview-fe）进行体验哦~

作者：盯着面筋唱征服

链接：https://www.nowcoder.com/discuss/729430