【前端计网面试知识点整理】

小林coding

1.网络四层模型/七层模型

TCP/IP协议有四个层次，OSI模型共有七层

七层结构中的每一层使用下一层提供的服务，并且向其上层提供服务。

• 应用层的传输单位是报文（message），为用户提供所需要的各种服务。
• 传输层的传输单位是报文段（segment），为应用层实体提供端到端的通信功能。
• 网络层的传输单位是数据包（packet）或分组（datagram），主要用于解决主机到主机的通信问题，为数据包选择路由。
• 数据链路层的传输单位是帧（frame），传输有MAC地址的帧。
• 物理层的传输单位是比特（bit）,使用双绞线、中继器、集线器等物理媒介。

Q：在浏览器地址栏输入地址，并按下回车键后，发生了哪些事情？

1. 浏览器自动检查url，组装协议、端口，构成完整的url

2. 浏览器根据url检查本地缓存是否缓存了该请求资源，如果有则使用缓存，不再发出请求

3. 如果没有，浏览器向web服务器发起http请求（网络请求），请求流程如下：
   3.1 进行DNS解析，获取服务器ip地址，端口
   3.2 浏览器向服务器发出建立TCP连接的申请，三次握手，通道建立。（若使用了HTTPS协议，则还会进行SSL握手，建立加密信道。）
   3.3 构建请求头信息（浏览器看要附带哪些cookie）
   3.4 发送请求头信息
   3.4 服务器处理请求，进入后端处理流程。
   3.5 服务器响应后，网络进程接收响应头和响应信息，并解析响应内容

4. 浏览器根据使用的协议版本，以及Connection字段的约定，决定是否要保留TCP连接。

5. 网络进程解析响应流程：
   5.1 检查状态码，如果是301/302，则需要重定向，从Location自动中读取地址，重新进行第4步
   如果是200，则继续处理请求。
   5.2 200响应处理：
   检查响应类型Content-Type，如果是text/html，则对响应体的内容进行HTML解析，否则做其他处理。

6. 准备渲染进程
   浏览器进程检查当前url是否和之前打开的渲染进程根域名是否相同，如果相同，则复用原来的进程，如果不同，则开启新的渲染进程

7. 浏览器开始从上到下解析HTML，若遇到外部资源链接，则进一步请求资源

2.UDP TCP 两种传输协议的区别

传输层位于网络层之上，负责在网络上的两个主机之间提供数据传输。

1.UDP是一种无连接的传输协议，TCP是一种可靠的传输协议

2.UDP 能在很多实时性要求高的地方有所作为（虽然并没有 TCP 传输来的准确）

3.TCP用在对数据准确性要求高，速度可以相对较慢的地方

区别	UDP（用户数据报协议）	TCP（传输控制协议）
是否连接	无连接	面向连接
是否可靠	不可靠传输，不使用流量控制和拥塞控制	可靠传输，使用流量控制和拥塞控制
是否有错误校验	都不提供	提供数据的可靠性、错误检测和恢复机制
连接对象个数	支持一对一，一对多，多对一和多对多交互通信	只能是一对一通信
传输的基本单位/传输方式	报文	字节流
首部开销	首部开销小，仅8字节	首部最小20字节，最大60字节
适用场景	适用于实时应用（IP电话、在线游戏，视频会议、直播等）	适用于要求可靠传输的应用，例如文件传输
		HTTP和HTTPS都基于TCP

3.TCP三次握手和四次挥手

/三次握手：/

情景模拟 确认双方都有👄📞的时候才行

发送方👄：老铁，可以听得到我说话吗？

接收方👄📞：嗯可以听到你，你听得到我吗？

发送方📞：嗯我也你听到你，那我开始说正事了。

SYN：👄可以建立连接

ACK：📞“嗯”，用于确定已经收到了请求。

seq：能接收到我的数据吗

ack：我确实接收到了你的数据（用对方的seq+1证明）

特点：ack=对方seq+1；ESTABLISHED 之前才有SYN 报文；有大ACK必有小ack

第一次：客户端发送SYN包到服务器，等待服务端确认

第二次：服务器收到SYN包，必须确认客户的SYN，同时也发送一个SYN+ACK包

第三次：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK，发送完毕，客户端和服务端连接成功，完成三次握手

注意：第三步：客户端下一个将发送的字节的序列号是ClientISN+1，即x+1；客户端将服务器的序列号（ServerISN）加1后放入TCP头部的确认序列号字段，即为ack=y+1

/四次挥手：/

情景模拟

发送方：老铁，我说完了，想挂了。✅💔

接收方：嗯，那你等一下…😮

接收方：我也说完了，我也可以挂了。✅💔

发送方：嗯好，拜拜。

TCP四次挥手，最后一次里，客户端发送的seq为什么和第三次挥手里对方的ack是一样的序列号？

答：ClientISN+1，即u+1，和第三次挥手里对方的ack一样是巧合

FIN：💔可以断开连接

第一次：浏览器发送完数据后，发送FIN，请求断开连接。（使用自己的序列号u）

第二次：服务器发送ACK到客户端，表示已收到客户端的断开请求，进入CLOSE-WAIT阶段

​ （确认客户端的序列号u（返回u+1），并将自己的序列号设置为v。）

第三次：服务器发请求断开FIN+ACK的请求（使用自己的序列号w）

第四次：客户端确认服务器的断开ACK

​ （确认服务器的序列号w，并将自己的序列号设置为u+1）

为何要四次：

被动方服务器，突然收到主动方客户端释放连接的请求时，并不能立即释放连接，因为还有数据需要处理，所以服务器先返回ACK确认收到报文，经过CLOSE-WAIT阶段准备好释放连接之后，才能返回FIN释放连接报文。

4.Http和Https区别（高频）

超文本传输协议 与 超文本传输安全协议，虽叫传输协议，但在应用层！

1. 默认端口不一样，HTTP 默认端口号是 80，HTTPS 默认端口号是 443。

2. HTTP 信息是明文传输，存在安全风险的问题。

   HTTPS 在 TCP 和 HTTP 应用层之间（会话层）加入了 SSL/TLS 安全协议，使得报文能够加密传输。

3. HTTP 连接建立相对简单， TCP 三次握手之后便可进行报文传输。

   而 HTTPS 在三次握手之后，还需进行 SSL/TLS 的握手过程，才可进入加密报文传输。

4. HTTPS 协议中，服务器需要向 CA（证书权威机构）申请数字证书SSL，来保证自己的身份是可信的。

• 混合加密的方式实现信息的机密性，解决了窃听的风险。

5.http1.0、http1.1、http2.0的区别

1. HTTP 1.0 浏览器与服务器只保持短连接，每次请求都需要与服务器建立一个TCP连接。

2. HTTP1.1中，默认支持长连接（Connection: keep-alive），即在一个TCP连接上可以传送多个HTTP请求和响应。

   HTTP 1.1还允许客户端不用等待上一次请求结果返回，就可以发出下一次请求，但服务器端必须按照接收到客户端请求的先后顺序依次回送响应结果，以保证客户端能够区分出每次请求的响应内容。

3. HTTP 2.0新增特性：二进制格式、多路复用、header压缩、服务端推送(静态html资源)

   解释：

   多路复用：在一个连接里，浏览器和客户端都可以同时发送多个请求或回应，而且不用按顺序

   HTTP 1.x用文本格式，HTTP 2.0用帧（并且采用二进制编码）

6.GET和POST区别（高频）

请求的消息格式

请求消息格式有三部分组成

• 请求行 ：请求方法(POST)、请求的资源路径(/api/user/login)和使用的协议版本(HTTP/1.1)
• 请求头head：请求的一些额外信息，如主机名（Host）、用户代理（User-Agent），Content-Type指定了请求体的内容类型
• 请求体body：包含了要给服务器传递的正文数据。请求体是可以省略的

1.GET在浏览器回退不会再次请求，POST会再次提交请求

2.GET请求会被浏览器主动缓存，POST不会，要手动设置

3.GET请求参数会被完整保留在浏览器历史记录里，POST中的参数不会

4.GET请求在URL中传送的参数是有长度限制的，而POST没有限制

5.GET参数通过URL传递，POST放在Request body中

6.GET参数暴露在地址栏不安全，POST放在报文内部更安全

7.GET一般用于查询信息，POST一般用于提交某种信息进行某些修改操作

8.GET产生一个TCP数据包；POST产生两个TCP数据包


从 http 协议的角度来说，GET 和 POST 它们都只是请求行中的第一个单词，除了语义不同，其实没有本质的区别。

之所以在实际开发中会产生各种区别，主要是因为浏览器的默认行为造成的。

受浏览器的影响，在实际开发中，GET 和 POST 有以下区别：

1. 浏览器在发送 GET 请求时，不会附带请求体
2. GET 请求的传递信息量有限，适合传递少量数据；POST 请求的传递信息量是没有限制的，适合传输大量数据。
3. GET 请求只能传递 ASCII 数据，遇到非 ASCII 数据需要进行编码；POST 请求没有限制
4. 大部分 GET 请求传递的数据都附带在 path 参数中，能够通过分享地址完整的重现页面，但同时也暴露了数据，若有敏感数据传递，不应该使用 GET 请求，至少不应该放到 path 中
5. 刷新页面时，若当前的页面是通过 POST 请求得到的，则浏览器会提示用户是否重新提交。若是 GET 请求得到的页面则没有提示。
6. GET 请求的地址可以被保存为浏览器书签，POST 不可以


Ge和post的选择：

1.私密性的信息请求使用post（如注册、登陆）。

2.查询信息使用get。

7.POST的content-type几种方式

POST 方法中对发送数据编码的方式，也就是 Content-Type 有四种方式，其中默认是 application/x-www-form-urlencoded，最方便的是 application/json 。

四种方式包括：

• application/x-www-form-urlencoded （URL encoded）
• multipart/form-data （多部分表单数据的格式（键值对型数据）
• application/json (Json 类型数据)
• application/xml （xml）

传统的ajax请求时候，Content-Type默认为"文本"类型。

传统的form提交的时候，Content-Type默认为"Form"类型。

axios传递js对象的时候，Content-Type默认为"JSON"类型

8.响应的消息格式

Content-Type的取值：

1. text/plain: 普通的纯文本，浏览器通常会将响应体原封不动的显示到页面上
2. text/html：html文档，浏览器通常会将响应体作为页面进行渲染
3. text/javascript 或 application/javascript：js代码，浏览器通常会使用JS执行引擎将它解析执行
4. text/css：css代码，浏览器会将它视为样式
5. image/jpeg：浏览器会将它视为jpg图片

响应中的状态码

2xx 类状态码表示服务器成功处理了客户端的请求。

• 「200 OK」表示一切正常。如果是非 HEAD 请求，服务器返回的响应都会有 body 数据。
• 「204 No Content」也是常见的成功状态码，与 200 OK 基本相同，但响应没有 body 数据。
• 「206 Partial Content」是应用于 HTTP 分块下载或断点续传，表示响应返回的 body 数据并不是资源的全部，而是其中的一部分，也是服务器处理成功的状态。

3xx 类状态码表示客户端请求的资源发生了变动，需要客户端用新的 URL 重新发送请求获取资源，也就是重定向。

• 「301 Moved Permanently」表示永久重定向，说明请求的资源已经不存在了
• 「302 Found」表示临时重定向，说明请求的资源还在，但暂时需要用另一个 URL 来访问。

301 和 302 都会在响应头里使用字段 Location，指明后续要跳转的 URL，浏览器会自动重定向新的 URL。

• 「304 Not Modified」不具有跳转的含义，表示资源未修改，重定向已存在的缓冲文件，也称缓存重定向，也就是告诉客户端可以继续使用缓存资源，用于缓存控制。

4xx 类状态码表示客户端发送的报文有误，服务器无法处理，也就是错误码的含义。

• 「400 Bad Request」表示客户端请求的报文有错误，但只是个笼统的错误。
• 「403 Forbidden」表示服务器禁止访问资源，并不是客户端的请求出错。
• 「404 Not Found」表示请求的资源在服务器上不存在或未找到，所以无法提供给客户端。

5xx 类状态码表示客户端请求报文正确，但是服务器处理时内部发生了错误，属于服务器端的错误码。

• 「500 Internal Server Error」与 400类似，是个笼统通用的错误码，表示服务器发生了什么错误.
• 「501 Not Implemented」表示客户端请求的功能还不支持，类似“即将开业，敬请期待”的意思。
• 「502 Bad Gateway」通常是服务器作为网关或代理时返回的错误码，表示服务器自身工作正常，访问后端服务器发生了错误。
• 「503 Service Unavailable」表示服务器当前很忙，暂时无法响应客户端，类似“网络服务正忙，请稍后重试”的意思。

浏览器缓存的作用

浏览器缓存的作用：减少冗余的数据传输，节省网络带宽，更快加载页面，缓存降低了服务器的要求，有更快的响应

http如何实现缓存

个人理解：

强制缓存：浏览器在加载资源的时候，会根据本地缓存中的headers中的信息(expires,cache-control)是否要强缓存，如果命中的话，则会使用缓存中的资源，否则继续发送请求。

协商缓存：客户端向服务端发送请求，服务端检测是否有对应的标识，如果没有服务端会返回客户端对应的标识，客户端在下次请求把标识带过去服务器会验证标识，如果通过了，则会响应304，告诉浏览器读取缓存，如果没有通过则返回请求的资源。

两类缓存规则可以同时存在，强制缓存优先级高于对比缓存，也就是说，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行对比缓存规则。

基于对比缓存，不管是否使用缓存都需要向服务器发送请求，那么还用缓存干什么？
服务端在进行标识比较后，只返回header部分，通过状态码通知客户端使用缓存，不再需要将报文主体部分返回给客户端。

缓存的资源去哪里了

memory cache 将资源文件缓存到内存中，下次请求读取的是内存中的
disk cache 将资源存到硬盘中，下次请求从硬盘中读取

http报文

HTTP报文就是浏览器和服务器间通信时发送及响应的数据块。
浏览器向服务器请求数据，发送请求(request)报文；
服务器向浏览器返回数据，返回响应(response)报文。
报文信息主要分为两部分：header,数据主体部分(body)

能不能说一说浏览器的本地存储？各自优劣如何？

浏览器的本地存储主要分为Cookie、WebStorage和IndexDB, 其中WebStorage又可以分为localStorage和sessionStorage。

共同点: 都是保存在浏览器端、且同源的

不同点：

1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。
2. 存储大小限制也不同

• cookie数据不能超过4K，sessionStorage和localStorage可以达到5M
• sessionStorage：仅在当前浏览器窗口关闭之前有效；
• localStorage：始终有效，窗口或浏览器关闭也一直保存，本地存储，因此用作持久数据；
• cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭

3. 作用域不同

• sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；
• localstorage：在所有同源窗口中都是共享的；也就是说只要浏览器不关闭，数据仍然存在
• cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭，数据仍然存在

前端网络通信

用fetch和axios

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FFzc5EF7-1690790741732)(F:\MarkdownImg\image-20230712135200008.png)]

---