网络协议知识

B_Bigstar

已于 2022-08-24 23:52:42 修改

阅读量497

点赞数

文章标签：网络前端

于 2022-08-14 17:06:36 首次发布

本文链接：https://blog.csdn.net/B_Bigstar/article/details/126333678

版权

网络协议

网络分层

网络分层有两种模型，一种是 OSI 模型，一种是 TCP/IP 模型

OSI 模式	TCP/IP模型	职责	对应网络协议
应用层	应用层	提供为应用软件而设的接口，以设置与另一应用软件之间的通信	HTTP，HTTPS，FTP，SSH，
表示层		把数据转换为能与接收者的系统格式兼容并适合传输的格式	Telnet、Rlogin、SNMP、Gopher
会话层		负责在数据传输中设置和维护电脑网络中两台电脑之间的通信连接	SMTP、DNS
传输层	传输层	把传输表头（TH）加至数据以形成数据包。传输表头包含了所使用的协议等发送信息	TCP、UDP
网络层	网络层	决定数据的路径选择和转寄，将网络表头（NH）加至数据包，以形成报文。网络表头包含了网络数据	IP、ICMP、ARP、RARP、AKP、UUCP
数据链路层	数据链路层	负责网络寻址、错误侦测和改错	FDDI、Ethernet、Arpanet、PDN
物理层		在局部局域网上传送数据帧（Data Frame），它负责管理电脑通信设备和网络媒体之间的互通	IEEE802.1A IEEE802.2到IEEE802.11

HTTP 协议

HTTP 协议是超文本的传输协议，基于 TCP/IP 通信协议来传输数据，将本地的 HTML 资源传输到互联网中。

HTTP 分为请求信息 request 和响应信息 response；

request 由请求行，请求头部，空行和请求数据四部分构成；

response 由状态行，消息报头，空行和响应正文构成

HTTP 状态码

区分状态码
1××开头 - 信息提示
2××开头 - 请求成功
3××开头 - 请求被重定向
4××开头 - 请求错误
5××开头 - 服务器错误
常见状态码
200 - 请求成功，Ajax 接受到信息了
400 - 服务器不理解请求
403 - 服务器拒绝请求
404 - 请求页面错误
500 - 服务器内部错误，无法完成请求

HTTP 与 HTTPS 的区别

从安全性上来讲，http 信息是明文传输，https 是 ssl 加密传输，需要申请 ca 证书，所以 https 的协议安全性会相对较高。

HTTP 缓存（ 0 ）

强缓存==>Expires(过期时间)/Cache-Control(no-cache)(优先级高)

协商缓存 ==>Last-Modified/Etag(优先级高)

Etag适用于经常改变的小文件

Last-Modefied适用于不怎么经常改变的大文件

强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本，区别只在于协商缓存会向服务器发送一次请求。它们缓存不命中时，都会向服务器发送请求来获取资源。在实际的缓存机制中，强缓存策略和协商缓存策略是一起合作使用的。浏览器首先会根据请求的信息判断，强缓存是否命中，如果命中则直接使用资源。如果不命中则根据头信息向服务器发起请求，使用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使用本地资源的副本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。

浏览器缓存（ 0 ）

能不能说一说浏览器的本地存储？各自优劣如何？
浏览器的本地存储主要分为Cookie、WebStorage和IndexDB, 其中WebStorage又可以分为localStorage和sessionStorage。
共同点: 都是保存在浏览器端、且同源的
不同点：

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

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

作用域不同

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

1.web缓存就是存在于客户端与服务器之间的一个副本、当你第一个发出请求后，缓存根据请求保存输出内容的副本

2.缓存的好处

（1）减少不必要的请求

（2）降低服务器的压力，减少服务器的消耗

（3）降低网络延迟，加快页面打开速度（直接读取浏览器的数据）

浏览器从输入url到渲染页面完整过程

第一步：进行域名解析，讲域名解析为 IP 地址，然后找到对应的服务端

第二步：通过三次握手与服务端建立 TCP 链接，发送 http 请求

第三步：服务端收到请求后，根据路径参数给浏览器返回对应的资源，例如 html 资源等

第四部：浏览器拿到对应 html 资源后开始解析和渲染，将页面呈现出来。

浏览器渲染原理（ 0 ）

浏览器渲染原理及流程 DOM -> CSSOM -> render -> layout -> print

流程：解析html以及构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

概念：

1.构建DOM树：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内容树

2.构建渲染树：解析对应的css样式文件信息（包括js生成的样式和外部的css）

3.布局渲染树：从根节点递归调用，计算每一个元素的大小，位置等。给出每个节点所在的屏幕的精准位置

4.绘制渲染树：遍历渲染树，使用UI后端层来绘制每一个节点

重绘：当盒子的位置、大小以及其他属性，例如颜色、字体大小等到确定下来之后，浏览器便把这些颜色都按照各自的特性绘制一遍，将内容呈现在页面上

触发重绘的条件：改变元素外观属性。如：color，background-color等

重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观

注意：table及其内部元素需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多发时间，要尽量避免使用table布局

重排（重构/回流/reflow）：当渲染书中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就是回流。每个页面都需要一次回流，就是页面第一次渲染的时候

GET 和 POST 的区别

GET 参数通过 URL 传递，POST 放在 Request body 中；
GET 通过 URL 传参，浏览器对 url 的长度由限制，所以提交的数据大小有限制，POST 的方法提交的数据没有限制；
GET 参数暴露在地址栏不安全，POST 放在报文内部更安全；

Cookie 相关

Cookie 、 LocalStorage 、 SessionStorage 、 Session

存储方式与传输方式

1.indexBD: 是h5的本地存储库，把一些数据存储到浏览器中，没网络，浏览器可以从这里读取数据，离线运用。5m

2.Cookie: 通过浏览器记录信息确认用户身份，最大4kb,这也就限制了传输的数据，请求的性能会受到影响

3.Session: 服务器端使用的一种记录客户状态的机制（session_id存在set_cookie发送到客服端，保存为cookie）

4.localStroage: h5的本地存储，数据永久保存在客服端

cookie/sessionStorage/localStorage

1、cookie，sessionStorage，localStorage是存放在客户端，session对象数据是存放在服务器上，实际上浏览器和服务器之间仅需传递session id即可，服务器根据session-id找到对应的用户session对象，session存储数据更安全一些，一般存放用户信息，浏览器只适合存储一般的数据

2、cookie数据始终在同源的http请求中携带，在浏览器和服务器来回传递，里面存放着session-id
sessionStorage，localStorage仅在本地保存

3、大小限制区别，cookie数据不超过4kb，localStorage在谷歌浏览中2.6MB

4、数据有效期不同，cookie在设置的（服务器设置）有效期内有效，不管窗口和浏览器关闭
sessionStorage仅在当前浏览器窗口关闭前有效，关闭即销毁（临时存储）
localStorage始终有效

SessionStorage和localStorage区别：

1.sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在用一个会话的页面中才能被访问（也就是说在第一次通信过程中），并且在会话结束后数据也随之销毁，不是一个持久的本地存储，会话级别的储存

2.localStorage用于持久化的本地存储，除非主动删除数据，否则不会过期

token、cookie、session三者的理解

1、token就是令牌，比如你授权(登录)一个程序时,他就是个依据,判断你是否已经授权该软件（最好的身份认证，安全性好，且是唯一的）用户身份的验证方式

2、cookie是写在客户端一个txt文件，里面包括登录信息之类的，这样你下次在登录某个网站，就会自动调用cookie自动登录用户名，服务器生成，发送到浏览器、浏览器保存，下次请求再次发送给服务器（存放着登录信息）

3、session是一类用来客户端和服务器之间保存状态的解决方案，会话完成被销毁（代表的就是服务器和客户端的一次会话过程），cookie中存放着sessionID，请求会发送这个id。sesion因为request对象而产生。

基于Token的身份验证：（最简单的token: uid用户唯一的身份识别 + time当前事件戳 + sign签名）

1、用户通过用户名和密码发送请求

2、服务器端验证

3、服务器端返回一个带签名的token，给客户端

4、客户端储存token，并且每次用于发送请求

5、服务器验证token并且返回数据

每一次请求都需要token

cookie与session区别

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。

2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。

3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。

4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

session与token区别

1、session认证只是把简单的User的信息存储Session里面，sessionID不可预测，一种认证手段。只存在服务端，不能共享到其他的网站和第三方App

2、token是oAuth Token，提供的是认证和授权，认证针对用户，授权是针对App，目的就是让某APP有权访问某用户的的信息。Token是唯一的，token不能转移到其他的App，也不能转到其他用户上。（适用于App）

3、session的状态是存在服务器端的，客户端只存在session id， Token状态是存储在客户端的

Cookie的弊端有哪些

（优势：保存客户端数据，分担了服务器存储的负担）

1、数量和长度的限制。每个特定的域名下最多生成20个cookie（chorme和safari没有限制）

2、安全性问题。

同源策略与跨域

同源策略

一个域下的js脚本未经允许的情况下，不能访问另一个域下的内容。通常判断跨域的依据是协议、域名、端口号是否相同，不同则跨域。同源策略是对js脚本的一种限制，并不是对浏览器的限制，像img,script脚本请求不会有跨域限制。

跨域

jsonp(利用script标签没有跨域限制的漏洞实现。缺点：只支持GET请求)

CORS(设置Access-Control-Allow-Origin：指定可访问资源的域名)

postMessage(message, targetOrigin, [transfer])(HTML5新增API 用于多窗口消息、页面内嵌iframe消息传递),通过onmessage监听传递过来的数据

Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。

Node中间件代理

Nginx反向代理

各种嵌套iframe的方式，不常用。

日常工作中用的最对的跨域方案是CORS和Nginx反向代理

TCP 协议

TCP 三次握手过程

比如说，假如我是客户端，您是服务器，我想要跟你建立连接，那么我就要给您发送一个syn包，这个包代表的含义就是我想要与您建立连接，然后我就进入SYN_SEND状态，就是在等待您的确认，这个就是第一次握手；然后接着您那边服务器收到我发的syn包，那边也要给我一个回应吧，这个回应就是在ack，然后您也是发送一个syn包，表示您也想要与我建立连接，这个时候您那边就处于syn_recv状态，这个就是第二次握手；然后最后我收到您的SYN包，那边我同样的也是要给您发一个确认包，然后我们两方这个链接就是建立起来了，然后就是都进入established[ɪˈstæblɪʃt]状态了。

这个如果说得通俗一点的话，联系实际生活中的例子的话，就是一个淘宝的过程，比如说您是淘宝卖家，我是买家，那我要买你这个东西，我先下单，然后您那边给我发货，然后我再确认收货，也是一个三次握手的过程。所以三次握手的作用就是以防我下错单啊或者是卖家发错货啊之类的。