字节跳动前端面试经历及总结

目录

• 前言
• 楔子
• 正文
  • 面试前做出的准备
  • 快要面试时做出的准备
  • 面试前奏
  • 面试高潮
  • 面试尾声
• 小技巧
• 总结

前言

你好，我是星辉，幸会幸会。
今天我参加了字节跳动的前段视频第一次面试，把它记录总结下来，希望能够对大家带来帮助。

楔子

投递简历后过了一段时间接到约面小姐姐的电话，了解你的具体的实习时间段，和你约定面试时间。你确认后小姐姐挂电话。过段时间hr给你发视频面试的链接，是牛客网用来面试的链接。

正文

面试前做出的准备

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

• 面试前我查阅了其他朋友写的字节跳动的面经以及面试题目，寻找题目解答，把它们总结了下来，用了一天一夜的时间，并把它们放到了我的这个博客上面。
• 我做了一份详细的自我介绍，通过三段开发经历来总结出了我的一些优点和开发经验，用讲故事的形式说明情况，最后点明故事中表现了自己具有哪些素质，点明自己为什么可以做前端的工作。字节跳动的宗旨“和优秀的人一起做有挑战的事情”也被我用到了自我介绍中，“我认为我是优秀的人，也喜欢做有挑战的事情，更喜欢与优秀的人为伍”“我希望搭上字节跳动这架火箭”等等。

快要面试时做出的准备

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

面试前奏

由于紧张怕错过面试，早早的便坐在了电脑桌前。面试官迟到了一会，就给我发起了面试视频邀请，终于开始了。
迎面是一个挺帅气的哥哥，简单的打了一下招呼，就进入了自我介绍的环节。由于自我介绍我已经熟悉过几遍了，自我介绍的效果看起来效果还是不错的。
开始问我项目经历的细节以及自我介绍中的细节，由于项目经历确实是自己亲身经历过的事情，并且我一般项目完成时都会做一下总结，所以也能够答个头头是道。个人感觉上的，至于面试官怎么想的，我就不清楚了， 说不定是那种我就静静的看着你装逼的情况。

面试高潮

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

• 你对Vue的理解有多少
  因为我在简历的项目经历中写了一个Vue项目，于是他问的时候就把我在项目中对Vue的理解和面试前准备的Vue总结结合起来回答。
• 用css2和css3分别写一下垂直居中和水平居中
  这道题我不会，并不知道css2和css3有什么区别以及写法，只会css3，我脑袋里有面试前总结的垂直居中和水平居中其中的两种方式，我就给他讲了一讲，倒是他没有再问下去，可能看出来我不会了吧。这也体现出了面试前知识点总结复习的重要性，不然你不会的东西你连说都不会说。

css3新增了一些属性，像flex，这是css3中很重要的改变，所以除了flex以外的垂直水平居中的技巧都是属于css2的。
- css2的水平居中技巧
将元素display为行内元素，再text-align:center;即可
或者
将块级元素定义一个宽度，再margin: 0 auto;即可
- css3的水平居中技巧
将元素display设为flex，再通过justify-content: center; 实现居中。
- css2的垂直居中技巧
单行内容的垂直居中可以通过设置相同height值和line-height值来实现。
多行内容的垂直居中且高度可变可以通过设置上下相同的padding值来实现。
行级盒子：小图标和标题对齐设置vertical-align: middle。
绝对定位：top:50%; left:50%;的方法，需要已知块级的宽高
- css3的垂直居中技巧
将元素display设为flex，再通过align-items:center;来实现。

• 你对计算机网络的认识怎么样
  又是一道探底的题，判断能否从这里给你出题考察你
• 讲述一下计算机网络的七层
  应用层、表示层、会话层、传输层、网络层、数据链路层、物理层
• TCP和UDP的区别是什么

TCP：面向连接、传输可靠(保证数据正确性,保证数据顺序)、用于传输大量数据(流模式)、速度慢，建立连接需要开销较多(时间，系统资源)
UDP：面向非连接、传输不可靠、用于传输少量数据(数据包模式)、速度快
TCP和UDP协议的一些应用例子：
TCP一般用于文件传输（FTP HTTP 对数据准确性要求高，速度可以相对慢），发送或接收邮件（POP IMAP SMTP 对数据准确性要求高，非紧急应用），远程登录（TELNET SSH 对数据准确性有一定要求，有连接的概念）等等；UDP一般用于即时通信（QQ聊天 对数据准确性和丢包要求比较低，但速度必须快），在线视频（RTSP 速度一定要快，保证视频连续，但是偶尔花了一个图像帧，人们还是能接受的），网络语音电话（VoIP 语音数据包一般比较小，需要高速发送，偶尔断音或串音也没有问题）等等。

原文：https://blog.csdn.net/buster2014/article/details/40082109 

• TCP和UDP属于计算机网络中的哪一层

网际层协议：IP协议、ICMP协议、ARP协议、RARP协议
传输层协议：TCP协议、UDP协议
应用层协议：FTP、Telnet、SMTP、HTTP、RIP、NFS、DNS

• HTTPS是什么

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

• 介绍几种常见的状态码

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

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

// 输出全为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);
}

• NaN是什么，用typeof会输出什么
  Not a Number
  会输出 Number
• js的隐性转换和显性转换

隐性转换为： 1 + '1' = '11'
显性转换
Number("24 cccc");//结果：NaN
ParseInt("24 cccc");//结果：24
备注：Number的显性转换比较严格，若无法强转则直接报错

面试官后引伸了两个问题
1 + -'1' + 1 等于什么
等于 0 ，'1'前面的负号把其数字化，变为-1，则后值为1
'A' - 'B' 等于什么
NaN

• 跨域问题如何解决
  同源策略：浏览器安全策略，同协议、ip、端口的脚本才会执行。
  只要协议、域名、端口有任何一个不同，都被当作是不同的域
  js跨域是指通过js在不同的域之间进行数据传输或通信

1. 通过jsonp跨域
jsonp在页面上引入不同域上的js脚本文件实现请求不同域上的数据
(1) 通过script标签引入一个js文件
(2) js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入
注：需要服务器端的页面进行相应的配合
2. 通过修改document.domain来跨子域
3. 使用window.name来进行跨域
window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

• 知道babel么
  可以实现将ES6编译为ES5代码
• 用js实现判断一个变量是否为整数的函数

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

• 进程和线程是什么
  线程是最小的执行单元，而进程由至少一个线程组成。如何调度进程和线程，完全由操作系统决定，程序自己不能决定什么时候执行，执行多长时间。
  进程指计算机中已运行的程序。
  线程指操作系统能够进行运算调度的最小单位。
• 死锁是什么
  当两个以上的运算单元，双方都在等待对方停止运行，以获取系统资源，但是没有一方提前退出时，就称为死锁。
• Left Join、Right Join、Inner Join 指的是什么

LEFT JOIN 关键字会从左表那里返回所有的行，即使在右表中没有匹配的行
RIGHT JOIN 关键字会右表那里返回所有的行，即使在左表中没有匹配的行
在表中存在至少一个匹配时，INNER JOIN 关键字返回行

• 快速排序用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=temp) {
      right.push(arr[i]);
    }
  }
  
  return quickSort(left).concat(temp,quickSort(right));  
  
}

面试尾声

面试官的突然一声“我这边没有什么问题了”，吓了我一跳，悬了悬了，我还想着跟他唠嗑两小时呢，唠嗑的感觉真好。
“我这边没有什么问题了，请等待hr的通知吧”

小技巧

• 做项目小技巧
  每次项目完成后，都需要做一下项目的总结，这是做一两个项目并做总结的人比做很多的项目不做总结的人看起来更有经验的原因。古人说的好，“总结反思才能成长”。
• 做简历小技巧
  套模板，注意写下什么时间毕业，尽可能的填充项目经验，项目经验写的详细些，重点是从项目中学到了什么。
• 面试写代码小技巧
  写的代码记得加注释，考虑代码的时间复杂度问题，不会写代码一定要给面试官说一下你的思路，脑袋中想到什么说什么，部分解决方法也比说一声我不会强太多。

总结

• 实习的面试多进行基础知识的储备