对于最近网上面经的一些感悟和总结前端网络面试精华试题

     最近看前端网络面试题，感觉写的都很一般，自己于是开始总结。

    以下为个人根据网上相关的面经，增删改查了一些，然后又加入了自己的理解。技术浅薄，真诚希望看过的同学能指出内容错误之处（直接评论区怼我就成，真理第一）。再强调一次，以下所有题目个人感觉很重要。拒绝无聊应试题目！

 

TCP，UDP

相信最近经常看面经的同学，看到TCP协议就想到了，tcp三次握手，四次挥手的那些题目。部分面试官上来就会要你背三次握手，大部分同学也就是把网上面经的东西背诵一次，那么问题来了！如果接下来面试官问，关于tcp, 三次握手的syn,seq,ack这三个是干嘛的？有什么规律？seq怎么取得值？是固定的吗？再者你说一下tcp里面的网络算法？

估计到这一部分的同学就蒙了，为啥和网上面试题的套路不一样？这时候你该反思你到底是去学习了还是在背诵面经。

A：三次握手就不详细解释了，相信大家都背差不多了。兄弟我就聊聊细节部分。我们都知道，一上来client会像服务器发送第一个请求，请求内容为 SYN=1，随机一个seq=n；client进入SYN_SEND状态.接着服务器返回应答SYN=1，ack = n+1,seq = y；此时服务器进入SYN_RECV状态；接着第三次，ack = y+1;seq = n+1客户端和服务器进入ESTABLISHED状态，完成三次握手。

SYN是请求同步码，‘暗号’意思是请求同步，建立连接。当服务器看到SYN=1,代表client请求进行tcp连接。

seq，是一个随机（或者是内部算出来的）序列号，seq=n,他代表我发送的这个包在我这是第n个包

ack,确认码，ack=n+1;代表我已收到前n个包，你该给我发第n+1个包了。

再次翻译一下三次握手:

第一次握手：client->server      SYN=1（请求建立tcp连接）  seq=n(发送的是我这的第n个包)

第二次握手：server->client      SYN =1（同意建立tcp连接） ack  = n+1;(我已经确认收到你发送的第n个包，你该发第n+1个了）

seq = y(我发送的是我这的第y个包）

第三次握手：client->server  seq = n+1我发送的是我这的第n+1个包 ack = y+1 （我确认收到了你发给我的第y个包，请给我发下一个包）

其实握手的过程中还会有ACK：确认号是否有效，一般置为1；RST 复位码 等，不再熬述。

至于TCP里面的算法，可以稍微了解一下网络拥塞算法等，快重传，超时重传，angle算法等。tcp本来就是一个很复杂的协议，真用到时还得仔细的去看文档，查资料。

tcp和udp有什么不同？什么时候用tcp什么时候用udp?

网上的面经一般都是一句话，tcp可靠，udp不可靠，tcp面向连接，udp无连接。而具体场景却没给出。我做下补充。

tcp是可靠的，所以如果你发送的数据丢包了，传输层会负责，然后将丢掉的包进行重传。保证最后收到的包完全正确。udp不可靠，发送一次，不需要握手，丢包了怎么办？丢就丢了呗，我再重新发一次，或者那个包我不要了，我发送下一个包。

具体情境比如说DNS发起查询，半路丢包了，那我客户端超过一段时间没收到回复，认为丢包了，我再重新发送就好了。还有视频直播等，也是用的UDP。半路丢包了，则画面卡顿，那我下一个没丢就行，反正卡了的也不需要重播。所以如果我们进行开发直接通过网络层开发时，我们要注意我们的使用情境，TCP可靠，但是头部开销大，而且握手需要消耗时间。udp不可靠，拥堵不降低速率，头部开销小，直接发送不握手，省时间。

 

websocket

说起websocket，这里容易和tcp的一个概念混淆，websocket是持久性连接，和tcp里面的keep-alive不是一个概念，前者为其连接特点，而后者是流水线原理。

websocket再建立的过程中，会携带俩个特别的字段，Upgrade:webSocket Connection:Upgrade 他们告诉连接方我建立的是一个socket而不是http连接，请更换协议。

而socket的使用对于web编程是特别友好的，基本就是事件编程。和js事件用起来如出一辙。只需要监听相关的事件，然后利用事件机制进行通信即可。

HTTP协议及其状态码

HTTP协议，是重中之重，为什么这样说呢？因为现在一般都是前后端分离的，所以交互都是通过HTTP协议进行。这就要求我们必须要掌握HTTP协议，请求头字段，状态码，请求体，都要熟。

先说状态码，要不说牛客上的面经没啥用，状态码竟然全部列出来了，是很详细，但是这让同学们不容易找到重点，就比如来说，201 202 203 305  402 406这些完全没有必要去记，真的很少遇到，就算遇到了，我们也可以及时百度去寻找答案。

我们经常遇见的有

200 ok  不用讲

301    Moved Permanently    永久重定向

302    Found    临时重定向

304    Not Modified   资源未修改，（与缓存相关）下面有专门介绍

403    Forbidden    服务器拒绝服务，原因有很多，比如无权限

404    Not Found   常见  代表请求的资源路径不对

500    Internal Server Error    服务器内部错误，无法完成请求 ，出现此错误一般是服务器没有catch到错误，导致服务直接报500

 303和307面试的时候被问过一次，具体的区别百度吧，没啥大区别，都是重定向。

HTTP版本

HTTP现在大家常用的是HTTP1.1版本，包括默认流水线常连接都是1.1的特性，现在问的比较多的是HTTP2.0版本，2.0比1.1进步很大，真正的实现了并行请求，1.1尽管引入了流水线，但是只是节省了每次请求都需要握手的这一部分，其实还是串行的。

再有，众所周知，在HTTP/1.1协议中，浏览器客户端在同一时间针对同一域名的请求有一定数据限制。（具体根据不同的浏览器上限有4.6.8个的，也就是说浏览器现在同时请求同一域名的请求数量）

HTTP2.0

HTTP2.0详解

首先先给大家一个网站链接，这个网站通过左右示例详细对比了HTTP1.1和2.0版本的加载速度。

从图像上看差距还是相当明显的，从网络面板上看的话，1.1的请求因为（同一时间请求数量的限制），大多时间都花在了排队等待发送。

注：.Stalled：浏览器得到要发出这个请求的指令，到请求可以发出的等待时间

       .Waiting 请求发出后，到收到响应的第一个字节所花费的时间(Time To First Byte)。

       .Content Download 收到响应的第一个字节，到接受完最后一个字节的时间，就是下载时间。

1.1                                                                  2.0

可以看到2.0大大缩短了stalled和waiting的时间。

下面是2.0的详细解释

多路复用

即连接共享，他会在每一个请求上标记一个id，这样的话在一个连接上可以同时进行多个请求，而且每个请求可以随机的混杂在一起。最后接收方根据id再将一个连接的不同请求归到各自分请求中。

服务器推送

这个是服务器可以主动向请求的客户端进行内容的推送，比如说，html中有图片，1.1版本是当解析到图片路径的时候再向服务器发送请求，把图片资源请求回来。而2.0我们可以设置，当请求html时，因为我们知道哪些资源是稍后要请求的，比如说js.css.图片。那我们就可以在client请求html时将这些资源一起返回。从而减少请求次数。

header压缩

 多次请求的过程中，其实header上会带有大量的信息，而且有一大部分都是重复的，2.0在请求的双方维护了一个字典，即避免了重复header发送，也减少了传输的header的大小。

HTTP和HTTPS

这个其实没多少要说的，https协议在http基础上增加了ssl套阶层，使用非对称加密或对称加密实现内容安全，对于我们应用层的开发本质上是屏蔽的，就是说我们无需操心如何加密，只需要加载证书即可。

前端缓存

缓存是前端最重要的知识。如果有人问你经典的那个问题，输入一个url到内容展现都发生了啥，千万记得在每一步之前浏览器都是会先去查看缓存的！

首先前端为什么要缓存？

因为我们很多静态页面尤其是一些静态文件css js 等在上线后几乎不会进行更改，改变的只是具体的文档内容。所以这些资源是完全没必要每次都去请求而浪费带宽的，从而提高前端性能

缓存和HTTP协议非常密切，我以前还专门写过一个前端缓存的博客，需要的自己看。这里我就大概说一下。

HTTP请求头里面有expire  cache-control E-tag last-modified等字段，当我们去请求资源的时候，浏览器首先先会去判断我们本地是否有资源，然后再判断资源是否新鲜然后最后做出决定！那怎么去判断这些资源是否新鲜呢？那就是根据规则去比较HTTP头部的这些字段。

这里对应的是强缓存和协商缓存的概念。

强缓存就是我上面举的那些字段，如果符合，那浏览器直接加载资源不会再去请求。但是如果这些字段提供的东西都不能判断，或者说表示已经过期了，不新鲜了，那浏览器会去请求资源。

那么问题来了，假如这个资源我们后端根本没有进行修改，那其实是没必要再把内容传输一遍，这时候就是协商缓存304的概念，服务器会响应一个304，告诉浏览器这个资源仍然新鲜，那么浏览器会更新这个资源的头部信息（比如说expire增加一年时间），那么这次就直接加载本地资源，然后下次请求的时候当浏览器看到资源的expire头部时间并判断新鲜，那么就直接返回资源啦。这是一个类似循环的过程。（我说的可能比较啰嗦）

 

As you can see，现在的我也就剩下这点东西了，其他的也都还给韩立刚老师了。但是这些对于现在我实习工作是足够了，心中有这些概念，再需要时直接查就好了。

最后一道题，和面试完全无关， 仅为自测自己到底对网络有多少了解。学过的知识有没有全还回去。

Q:俩台服务器A,B 

 A服务器的网络配置为IP：192.168.26.129   255.255.255.0 

 B服务器的网络配置为IP：192.168.26.3  255.255.255.0,但是配置人却不小心把B服务器的掩码配成了255.255.255.224.他们还能正常通信吗？

请在下一期查看正确答案。下一期我将会讲一些我对js的理解，和相关常见的面试题升级版。