一文解决前端面试③–计算机网络-一一网

写在前面

计算机网络知识是每个程序员的必备基础，任何消息文件的传输都与网络相关，本文介绍了作为一个前端应该掌握的计算机网络基础知识

食用对象：初级前端

美味指数：?????

1. 介绍一下http状态码？⭐⭐⭐⭐⭐

状态码分类：

1xx服务器收到请求
2xx请求成功
3xx重定向
4xx客户端错误
5xx服务端错误

常见状态码：

200 成功
301 永久重定向(配合location, 浏览器自动处理)
302 临时重定向(配合location, 浏览器自动处理)
304 资源未被修改(去请求服务端，服务端告诉这个资源在本地还有效，不用再请求)
403 Forbidden: 服务器禁止访问，原因有很多，比如法律禁止、信息敏感、没有权限。
404 资源未找到
405: 请求方法不被服务器端允许。
500: 仅仅告诉服务器出错了
501: 表示客户端请求的功能还不支持。
502: 服务器自身是正常的，但访问的时候出错了
503: 表示服务器当前很忙，暂时无法响应服务。

2. 介绍一下你知道的http headers？⭐⭐⭐

常见的Request Headers：

Accept浏览器可接收的数据格式
Accept-Encoding浏览器可接收的压缩算法，如gzip
Accept-language浏览器可接收的语言，如zh-CN
Connection：keep-alive一次TCP连接重复使用
cookie 本地信息
Host 访问的服务器的域
User-Agent(简称UA)浏览器信息
Content-type发送数据的格式，如application/json

Response Headers：

Content-type 返回数据的格式，如application/json
Content-length 返回数据的大小，多少字节
Content-Encoding返回数据的压缩算法，如gzip
Set-cookie 服务端需要改cookie可以用这个

3. 能否说一下浏览器缓存？⭐⭐⭐⭐⭐

强缓存：

首先是检查强缓存，此时不需要发送HTTP请求。
有Expires和Cache-Control两个字段

Expires

Expires即过期时间，存在于服务端返回的响应头中，告诉浏览器在这个过期时间之前可以直接从缓存里面获取数据，无需再次请求。
缺点：
服务器的时间和浏览器的时间可能并不一致，那服务器返回的这个过期时间可能就是不准确的。因此这个字段后来被抛弃了

Cache-Control

这个字段也是存在于它和Expires本质的不同在于它并没有采用具体的过期时间点这个方式，而是采用过期时长来控制缓存

cache-control的值:

max-age:设置s级别的缓存的最大过期时间
no-cache:不用强制缓存，交给服务端处理
no-store:不用强制缓存，也不用服务端的缓存措施
private:只允许最终用户做缓存
public:允许中间的代理，路由等做缓存

当Expires和Cache-Control同时存在的时候，Cache-Control会优先考虑。

协商缓存：

强缓存失效之后，浏览器在请求头中携带相应的Last-Modified 或 ETag来向服务器发请求，由服务器根据这个值，来决定是否使用缓存，这就是协商缓存。

Last-Modified

最后修改时间

在浏览器第一次给服务器发送请求后，服务器会在响应头中加上这个字段。
浏览器接收到后，如果再次请求，会在请求头中携带If-Modified-Since字段，这个字段的值也就是服务器传来的最后修改时间。
服务器拿到请求头中的If-Modified-Since的字段后，其实会和这个服务器中该资源的最后修改时间对比:

如果请求头中的这个值小于最后修改时间，说明是时候更新了。返回新的资源，跟常规的HTTP请求响应的流程一样。
否则返回304，告诉浏览器直接用缓存。

ETag

ETag 是服务器根据当前文件的内容，给文件生成的唯一标识，只要里面的内容有改动，这个值就会变。

服务器通过响应头把这个值给浏览器。
浏览器接收到ETag的值，会在下次请求时，将这个值作为If-None-Match这个字段的内容，并放到请求头中，然后发给服务器。
服务器接收到If-None-Match后，会跟服务器上该资源的ETag进行比对:

如果两者不一样，说明要更新了。返回新的资源，跟常规的HTTP请求响应的流程一样。
否则返回304，告诉浏览器直接用缓存。

4. 介绍一下刷新操作与缓存的关系⭐⭐

三种刷新操作：

正常刷新：地址栏输入url，跳转链接，前进后退等
手动刷新：F5，点击刷新按钮，右击菜单刷新
强制刷新：ctrl + F5

不同刷新操作，不同的缓存策略：

正常刷新：强制缓存有效，协商缓存有效
手动刷新：强制缓存失效，协商缓存有效
强制刷新：强制缓存失效，协商缓存失效

5. 从输入url到浏览器渲染流程⭐⭐⭐⭐⭐

按下回车后，浏览器首先会解析这个域名，查看本地的hosts文件，看有没有对应的规则，有就直接用hosts里面的IP
如果hosts没有对应ip，浏览器就会发出一个DNS请求到本地DNS服务器，本地服务器如果有就直接返回，没有就向DNS根服务器查询DNS根服务器又会返回域服务器的地址，本地服务器会继续向域服务器发起请求，域服务器会返回域名的解析服务器的地址。本地服务器继续向域名解析服务器发起请求，这时会受到域名对应的ip，本地DNS服务器将ip返回给浏览器，并将ip存入缓存，方便下次访问。
拿到ip地址后，会向对应的web服务器发起TCP请求，通过三次握手，建立TCP连接。
服务器受到请求后，解析用户请求，知道了要调度哪个资源文件，处理用户的请求和参数，并调用数据库信息，最后将结果返回给服务器。
关闭TCP连接，通过四次挥手
浏览器获取HTML并开始构建DOM树，DOM树的构建是一个深度遍历的过程。
获取CSS并构建CSSOM，构建CSSOM并不需要等待所有DOM都构建完毕，CSS的加载速度与构建CSSOM的速度将直接影响首屏渲染速度，所以CSS 放头部，可以提高页面的性能。早构建早渲染。
将DOM与CSSOM结合，创建渲染树（Render Tree），Render Tree的每个节点都有了样式信息。
布局(layout)，找到所有内容都处于网页的哪个位置。根据渲染树来布局，以计算每个节点的几何信息，即在屏幕上的确切位置和大小，所有相对值都将转换为屏幕上的绝对像素
绘制(painting)，浏览器开始在屏幕上绘制像素。将各个节点绘制到屏幕上。

6. 那说一下DOM树和CSSOM的构建过程？⭐⭐⭐

DOM树和CSSOM的构建过程其实差不多

首先解析文件（HTML文件，CSS文件）
将字节转换成字符
确定tokens（标签）
将tokens转换成节点
最后根据节点构建DOM树 || CSSOM

PS：构建DOM树的图和CSSOM的图，一看就明白

7. 说一下HTTPS？⭐⭐⭐⭐⭐

185797810_2_20200319111944225.jfif
https：
证书生成过程：

服务器会自己生成一个私钥和公钥，CA公司自己也有一个公钥和私钥
服务器向认证机构请求签字认证，认证机构用自己的私钥签字，于是任何有认证机构公钥的人都知道证书是它签过字的
一般浏览器都有认证机构的名单和公钥，通过公钥认证就可以知道服务器是对的（因为信任认证机构，所以信任服务器）

浏览器与服务器：

浏览器要访问一个服务器，服务器把证书和自己的公钥发过来。
浏览器信任认证机构，解密后确认服务器正确，于是创建了一个随机密钥且用服务器的公钥加密
此时只有服务器能够解密出浏览器的随机密钥，于是通信就用随机密钥对称加密

8. 说一下http各个版本的区别？⭐⭐⭐⭐

http/0.9版本：

只有一个命令GET,只支持纯文本内容
每次请求后，服务器和客户端之间的连接都将关闭。

http1.0版本:

扩充了传输内容格式，这使得互联网不仅可以传输文字，还能传输图像、视频、二进制等文件。
除了GET命令，还引入了POST命令和HEAD命令。
默认不支持长连接，为了解决这个问题，浏览器用了一个非标准的Connection字段，设置keep-alive。

http1.1版本:

引入了持久连接，即TCP连接默认不关闭，可以被多个请求复用，不用声明Connection: keep-alive。
引入了管道机制，即在同一个TCP连接里，客户端可以同时发送多个请求，进一步改进了HTTP协议的效率。
新增方法：PUT、 PATCH、 OPTIONS、 DELETE。
客户端请求的头信息新增了Host字段，用来指定服务器的域名
http协议不带有状态，每次请求都必须附上所有信息。请求的很多字段都是重复的，浪费带宽，影响速度。

http2.0版本

二进制分帧：在HTTP1.x中，我们是通过文本的方式传输数据，文本的表现形式有多样性，因此要做到健壮性考虑的场景必然有很多，而二进制做到健壮和方便就要轻松许多。
多路复用：避免HTTP旧版本的队头阻塞问题，极大提高传输性能
头部压缩
服务器推送

http1.1的长连接和http2.0的多路复用的区别？

http1.1之前一次请求就会建立一次连接，http1.1通过管道化方式实现多个请求串行化共享同一个连接，但是一旦某个请求耗时严重，就导致后面的请求被阻塞，俗称线头阻塞；
http2.0多个请求共享同一个连接，并且是并行的，所有请求不会影响其他请求；

9. 介绍一下CDN？⭐⭐⭐

CDN的全称是Content Delivery Network，即内容分发网络。
含义：

它将网站的内容通过中心平台分发到部署在各地的边缘服务器进行缓存，再通过负载均衡技术将用户的请求转发到就近的服务器上去获取所需内容，降低网络堵塞，提供访问网站的响应速度和命中率。

过程:

域名解析后会指向一个CDN网络专用的DNS服务器
然后这个专门的CDN DNS服务器会指向CDN负载均衡服务器
之后又去访问这个负载均衡服务器，它会根据浏览器的网络地址，选择一台cdn服务器给你，可能是离你比较近，然后被分配的网络任务又不多的一台服务器，浏览器又会去访问这个cdn服务器
如果这个cdn服务器没有相应的资源，就去上层缓存服务器查找，如果一直找都没有就会去源站拉取，并在每个cdn服务器缓存

10. 介绍一下cookie，localStorage和sessionStorage？⭐⭐⭐⭐⭐

cookie：
本身为了弥补HTTP在状态管理上的不足，用于浏览器和server通讯，被”借用”到本地存储来，可用document.cookie = ‘…’来修改
缺点

存储大小太小, 最大4KB
http请求时需要发送到服务端，增加请求数据量
不安全，以纯文本的形式在浏览器和服务器中传递，很容易被非法用户截获，然后进行一系列的篡改，在 Cookie 的有效期内重新发送给服务器，这是相当危险的
只能用document.cookie = ‘…’来修改，太过简陋

设置：

客户端发送 HTTP 请求到服务器
当服务器收到 HTTP 请求时，在响应头里面添加一个 Set-Cookie 字段
浏览器收到响应后保存下 Cookie
之后对该服务器每一次请求中都通过 Cookie 字段将 Cookie 信息发送给服务器。

localStorage和sessionStorage

HTML5专门为存储而设计，最大可存5M
API简单易用 setItem getItem
不会随着http请求被发送出去

区别：

localStorage数据会永久存储，除非代码或手动删除，适合持久化缓存数据，比如页面的默认偏好配置，如官网的logo，存储Base64格式的图片资源等
sessionStorage数据只存在于当前会话，浏览器关闭则清空，适合一次性临时数据保存，存储本次浏览信息记录
一般用localStorage

cookie localStorage sessionStorage区别

存储大小：cookie4K，storage5M
有效期：cookie拥有有效期，storage永久存储
cookie会跟随http发送到服务器端，存储在内存。storage只存储在浏览器端
路径：cookie有路径限制，storage只存储在域名下
API：Storage的API更具有易用性

11. 介绍一下websocket？⭐⭐⭐

websocket的由来。
HTTP 协议有一个缺陷：通信只能由客户端发起。

特点:
    最大的特点是服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话
    数据格式比较轻量，性能开销小，通信高效
    与 HTTP 协议有着良好的兼容性
    没有同源限制，客户端可以与任意服务器通信

WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例。
var ws = new WebSocket(‘ws://localhost:8080’);

属性举例：
实例对象的onopen属性，用于指定连接成功后的回调函数。

ws.onopen = function () {
  ws.send('Hello Server!');
}
复制代码

实例对象的onclose属性，用于指定连接关闭后的回调函数
实例对象的onmessage属性，用于指定收到服务器数据后的回调函数
实例对象的onerror属性，用于指定报错时的回调函数

12. 介绍一下计算机网络有哪几层？⭐⭐⭐⭐

应用层：文件传输，电子邮件，文件服务，虚拟终端 TFTP，HTTP，SNMP，FTP，SMTP，DNS，Telnet
表示层：数据格式化，代码转换，数据加密没有协议
会话层：解除或建立与别的接点的联系没有协议
传输层：提供端对端的接口 TCP，UDP
网络层：为数据包选择路由 IP，ICMP，RIP，OSPF，BGP，IGMP
数据链路层：传输有地址的帧以及错误检测功能 SLIP，CSLIP，PPP，ARP，RARP，MTU
物理层：以二进制数据形式在物/理媒体上传输数据

13.介绍一下UDP协议？⭐⭐⭐

UDP:

在网络中它与TCP协议一样用于处理数据包，是一种无连接的协议
有单播，多播，广播的功能
UDP是面向报文的
不可靠性，不会关心对方是否已经正确接收到数据了
头部开销小，传输数据报文时是很高效的

14.介绍一下TCP协议？⭐⭐⭐⭐

TCP：

一种面向连接的、可靠的传输层通信协议
连接时需要进行三次握手，释放时需要进行四次挥手
每条TCP传输连接只能有两个端点，只能进行点对点的数据传输，不支持多播和广播传输方式。
拥有拥塞控制，提供全双工通信

15. 流量控制和拥塞控制的区别⭐⭐⭐

流量控制和拥塞控制的区别：

流量控制是为了解决发送方和接收方速度不同而导致的数据丢失问题，当发送方发送的太快，接收方来不及接受就会导致数据丢失，流量控制用滑动窗口的形式解决问题
拥塞控制是为了解决过多的数据注入到网络，导致网络奔溃，超过负荷.当发送方发送数据大量的数据会注入到网络，如果没有限制，网络就会超负荷变卡，拥塞控制的用的是拥塞窗口解决的问题的

16.讲一下TCP三次握手⭐⭐⭐⭐⭐

TCP三次握手；

首先客户端发一个SYN报文，SYN=1，和一个初始序号seq=x，进入SYN_SEND状态
服务器收到客户端的SYN报文后，也会发送一个SYN=1，同时把客户端的序号seq+1作为ack的值返回，还会发送一个自己的序号seq=y，此时服务器进入SYN_RECD状态。
客户端收到SYN报文后，会发送一个ACK报文，就是把服务端的seq+1返回，还会发送自己的seq=x+1，当服务器收到ACK报文后，就处于ESTABLISHED状态，双方建立了连接

17. 为什么需要三次握手，两次不行吗？⭐⭐⭐⭐⭐

需要三次握手才能确认双方都有接收与发送能力，
两次握手，如果客户端的一次请求滞留很久到，此时客户端与服务端已经请求完数据释放连接了，但是服务器现在收到了滞留很久的连接，以后客户端又要建立连接，就会导致服务器一直等待客户端发送数据，浪费资源

18. 什么是半连接队列？⭐⭐⭐

服务器第一次收到客户端的SYN之后，就会处于SYN_RCVD状态，此时双方还没有完全建立连接，服务器会把此种状态下请求连接放在一个队列里，就称之为半连接队列

19. 三次握手中可以携带数据吗？⭐⭐⭐⭐

第三次握手时可以，第一次和第二次不行，第一次携带数据，有人在第一次握手中的SYN报文中注入大量数据，攻击者不会理会服务器的接收，发送能力是否正常，疯狂发送报文的话，会让服务器花很多时间来接收，而第三次的话，此时客户端已经处于ESTABLISHED状态，对于客户端来说，已经建立连接了，并且知道服务器的接收和发送能力是正常的了，所以能携带数据也正常

20. 介绍一下TCP四次挥手⭐⭐⭐⭐⭐

以客户端想要关闭为例子：

发出连接释放报文段(FIN=1，序号seq=u)，并停止发送数据，主动关闭TCP连接，进入FIN_WAIT1状态，等待服务端的确认
服务端收到连接释放报文段后发出确认报文段（ACK=1，确认号ack=u+1，序号seq=v），服务端进入CLOSE_WAIT状态，此时TCP处于半关闭状态，当客户端收到服务端的连接释放时，进入FIN_WAIT2状态，等待服务端发出连接释放报文段
如果服务端也想断开连接了，就发送连接释放报文段(FIN=1，ACK=1，seq=w，ack=u+1)，服务端进入LAST_ACK(最后确认)状态，等待客户端的确认
客户端收到连接释放报文段后，发出确认报文段(ACK=1，seq=u+1，ack=w+1)，客户端进入TIME_WAIT状态。此时TCP未释放掉，需要经过时间等待计时器设置的实践2MSL(最长报文段寿命的2倍)后客户端才进入CLOSED状态