2021最新大厂前端面试题总结（百度字节跳动腾讯小米.....），附面试经验！

Posted 2021-05-08 码民的飘柔

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2021最新大厂前端面试题总结（百度字节跳动腾讯小米.....），附面试经验！相关的知识，希望对你有一定的参考价值。

前言

先简单介绍下自己，我“平平无奇小天才”一枚，毕业于南方普通985普通学生，有幸去百度、字节面试，感觉大公司就是不一样，印象最深的是字节，所以有必要总结一下面试经验，以及面试中遇到的一些问题，以便大家参考：

博客目录

投简历的过程

首先肯定是找一个简洁不浮夸却有很精美的简历模板，然后将自己的信息填上去，主要的就是：姓名、电话、照片、擅长的技术栈、教育经历、实习经历、项目经历、证书、社交网站。这里要强调的是：不太熟悉的东西别往上写，没用的东西别往上写。

然后就是投简历的渠道问题了，这里我要给个建议，最好找别人内推一下，因为这样更快让你的简历被看到，避免长时间没有音讯。不过要提的是，找的内推人一定要靠谱！一定要靠谱！要找那种能给你一些简历修改建议的，会帮你跟进后续流程的，部门hc真的充足的人，而不是找那种广撒网的，因为他们根本没时间管你，可能你投进去，反而卡了流程（真的感同身受）

面试前做出的准备

我在面试前准备以下几点东西，似乎都解决了面试的部分问题

面试前我查阅了其他大佬写的字节跳动的面经以及面试题目，寻找题目解答，把它们总结了下来，用了一天一夜的时间，把它们整理成了文档。

我做了一份详细的自我介绍，通过项目开发经历来总结出了我的一些优点和开发经验，用讲故事的形式说明情况，最后点明故事中表现了自己具有哪些素质，点明自己为什么可以做前端的工作。字节跳动的宗旨“和优秀的人一起做有挑战的事情”也被我用到了自我介绍中，“我认为我是优秀的人，也喜欢做有挑战的事情，更喜欢与优秀的人为伍”“我希望搭上字节跳动这架火箭”等等。

快要面试时做出的准备

快要面试了，第一次面试，有些紧张，但还是像平常考试一样，将总结下来的面试题目总结、前端遇到问题的总结又看了一遍，把自己做好的自我介绍熟悉的过几遍，给自己亲近的朋友发条消息获得她的祝福，又站在电脑桌前活动了一下身子，头脑顿时清醒利索了许多。

面试前奏，其实很紧张

由于紧张怕错过面试，早早的便坐在了电脑桌前。面试官迟到了一会，就给我发起了面试视频邀请，终于开始了。

迎面是一个挺帅气的哥哥，简单的打了一下招呼，就进入了自我介绍的环节。由于自我介绍我已经熟悉过几遍了，自我介绍的效果看起来效果还是不错的。

开始问我项目经历的细节以及自我介绍中的细节，由于项目经历确实是自己亲身经历过的事情，并且我一般项目完成时都会做一下总结，所以也能够答个头头是道。个人感觉是这样的，至于面试官怎么想的，我就不清楚了，说不定是那种我就静静的看着你装逼的情况。

由于篇幅限制，下方面试题目仅展示了部分，需要完整文档学习的，可以点击【前端资源】分享

面试题目

来了来了，开始问技术的问题了。

1.你对Vue的理解有多少

因为我在简历的项目经历中写了一个Vue项目，于是他问的时候就把我在项目中对Vue的理解和面试前准备的Vue总结结合起来回答。

用css2和css3分别写一下垂直居中和水平居中
这道题我不会，并不知道css2和css3有什么区别以及写法，只会css3，我脑袋里有面试前总结的垂直居中和水平居中其中的两种方式，我就给他讲了一讲，倒是他没有再问下去，可能看出来我不会了吧。这也体现出了面试前知识点总结复习的重要性，不然你不会的东西你连说都不会说。

2.使用Float进行布局容易产生什么问题？解决方式呢？

子元素在设置 float 后会脱离文档流，造成父元素高度塌陷
解决方式：
父元素设置高度
清除浮动

<div class="outter">
   <div class="inner"></div>
   <div style="clear: both;"></div>
</div>

// test.css
.outter { width:200px; background:#3FF; border:1px solid #000;}
.inner { float:left; width:120px; height:80px; background:#FF3; }

3.你对计算机网络的认识怎么样
又是一道探底的题，判断能否从这里给你出题考察你

4.讲述一下计算机网络的七层
应用层、表示层、会话层、传输层、网络层、数据链路层、物理层

5.HTTPS是什么
HTTPS即加密的HTTP，HTTPS并不是一个新协议，而是HTTP+SSL（TLS）。原本HTTP先和TCP（假定传输层是TCP协议）直接通信，而加了SSL后，就变成HTTP先和SSL通信，再由SSL和TCP通信，相当于SSL被嵌在了HTTP和TCP之间

6.介绍几种常见的状态码
2XX系列：代表请求已成功被服务器接收、理解、并接受。
200状态码：表示请求已成功，请求所希望的响应头或数据体将随此响应返回
201状态码：表示请求成功并且服务器创建了新的资源，且其 URI 已经随Location 头信息返回。
3XX系列：代表需要客户端采取进一步的操作才能完成请求，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明。
301状态码：被请求的资源已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302状态码：请求的资源临时从不同的URI响应请求，但请求者应继续使用原有位置来进行以后的请求。
304状态码：自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
4XX系列：表示请求错误。代表了客户端看起来可能发生了错误，妨碍了服务器的处理。
401状态码：请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
403状态码：服务器已经理解请求，但是拒绝执行它。与401响应不同的是，身份验证并不能提供任何帮助，而且这个请求也不应该被重复提交。
404状态码：请求失败，请求所希望得到的资源未被在服务器上发现。
5xx系列：代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。
500状态码：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。
503状态码：由于临时的服务器维护或者过载，服务器当前无法处理请求。

7.闭包是什么
闭包就是能够读取其他函数内部变量的函数。
闭包的用途：可以读取函数内部的变量，并且让这些变量的值始终保持在内存中。

// 输出全为10
for(var i=0;i<10;i++){
   setTimeout(function(){
       console.log(i);
   },50);
}
// 输出相应的输出
for(var i=0;i<10;i++){
    (function(i){
        setTimeout(function(){
        console.log(i);
        },50);
    })(i);
}

8.NaN是什么，用typeof会输出什么

Not a Number
会输出 Number

9.谈谈你对webpack的理解
是一个对资源进行模块化和打包的工具，处理每个模块的 import 和 export
追问：资源是指什么？
回答：Js,css,png图片等
追问：如果有个二进制文件，它是资源么？webpack怎么使它模块化？
回答：是。需要有一个对应的loader来处理（我是想到了vue-loader等)

10.说一下深拷贝和浅拷贝及常用实现方式

浅拷贝: 以赋值的形式拷贝引用对象，仍指向同一个地址，修改时原对象也会受到影响
赋值表达式 =
Object.assign
展开运算符(…)
深拷贝: 完全拷贝一个新对象，修改时原对象不再受到任何影响
JSON.parse(JSON.stringify(obj))
递归进行逐一赋值

11.使用JSON自带函数进行深拷贝有什么问题

具有循环引用的对象时，报错
当值为函数或 undefined 时，无法拷贝

12.跨域问题如何解决
同源策略：浏览器安全策略，同协议、ip、端口的脚本才会执行。
只要协议、域名、端口有任何一个不同，都被当作是不同的域
js跨域是指通过js在不同的域之间进行数据传输或通信通过jsonp跨域
(1) jsonp在页面上引入不同域上的js脚本文件实现请求不同域上的数据
(2)通过script标签引入一个js文件
(3) js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入
注：需要服务器端的页面进行相应的配合
(4) 通过修改document.domain来跨子域
(5) 使用window.name来进行跨域
(6) window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

13.知道babel么
可以实现将ES6编译为ES5代码

14.用js实现判断一个变量是否为整数的函数
实现思路：先判断该变量是否为Number类型，以此来缩小范围，再判断该变量除以1后是否与原值全等，若全等则返回true，若不全等则返回false

15.进程和线程是什么
线程是最小的执行单元，而进程由至少一个线程组成。如何调度进程和线程，完全由操作系统决定，程序自己不能决定什么时候执行，执行多长时间。

进程指计算机中已运行的程序。
线程指操作系统能够进行运算调度的最小单位。

16.死锁是什么
当两个以上的运算单元，双方都在等待对方停止运行，以获取系统资源，但是没有一方提前退出时，就称为死锁。

17.Left Join、Right Join、Inner Join 指的是什么
LEFT JOIN 关键字会从左表那里返回所有的行，即使在右表中没有匹配的行
RIGHT JOIN 关键字会右表那里返回所有的行，即使在左表中没有匹配的行
在表中存在至少一个匹配时，INNER JOIN 关键字返回行

18.快速排序用js怎么写

function quickSort(arr) {
  if(arr.length<=1) {
  	return arr;
  }
  var s = Math.floor(arr.length/2);
 
  var temp = arr.splice(s,1);
  
  var left=[];
  var right=[];
  for(var i=0;i<arr.length;i++) {
    if(arr[i]<temp) {
      left.push(arr[i]);
    }
    if(arr[i]>=temp) {
      right.push(arr[i]);
    }
  }
  return quickSort(left).concat(temp,quickSort(right));  
}

19.玩过哪些游戏？
玩过LOL，但更喜欢炉石之类的纸牌策略类游戏。
追问：炉石你觉得用什么协议来通信？
回答：UDP吧。

20.未来三年的职业规划？
第一年学习，第二年负责小部分，第三年独当一面，后来发现面试官问的不是这个，说我说的太笼统，是想问我想做什么方向…（蜜汁尴尬）

大厂面试特点

百度

百度的技术面总共有4轮，基础面（同级别员工）+基础面（级别应该比你要一点）+leader面（整个研发部门的技术负责人）+boss面（整个研发部门的总负责人）
百度一面是需要你当场完成一套笔试题，难度的话也一般，基本上面的知识点你都过一遍问题不大，也有一题算法题，是百度的原创题目，但是题型是一样的，问题也不大。前两面都是前端开发面的，没啥难度，涉及到的知识点不局限于前端吧，还包括网络以及开发模式等等问题。
leader面还挺有意思的，当时他们强烈要求我到现场去参与面试，leader 是一个很年轻的小伙，因为不是专职前端，所以问的问题涉及到了整个计算机的所有知识点：数据结构、算法（原创题，一个很简单的递归）、操作系统，以及问你除了 js 以外还掌握什么语言等等，整个过程非常轻松，也非常愉快，大家都有说有笑。
boss 面气氛就比较严肃了，也可能是因为那个会议室空调有点冷的原因。基本上整个面试都是在让我吹水，讲自己的项目经历，以及解决的办法，答题模版也基本可以按照上面的来说，最后也通过了。

字节跳动

字节跳动的问题问的非常细，在我参与的两轮面试中，都是在问一些非常基础的知识，面试的过程也不会很长，大概 45 分钟左右。
一面的时候再做了一番自我介绍之后，给了 5 道笔试题，做完之后再聊一聊别的就过了。
二面的时候简单介绍了一下自己做过的项目，然后主要是围绕着你做的项目中用到的技术进行讨论。他给了我一道场景题，然后让我按照场景中的内容进行实现，最后给了一道应该是原创的算法题。
其实面字节之前我是非常紧张的，我个人对能通过字节的面试一点也不抱希望，但是面完之后，觉得很多时候大家都神话了字节的面试，难度也没有想象中的高。
不过有一说一，我觉得面试我的两位面试官态度都非常好，有一些我答不出来的问题，也会给我提示给我鼓励。