HTTP请求过程及相关知识延伸

最新推荐文章于 2024-07-17 09:42:16 发布

忧容骑士

最新推荐文章于 2024-07-17 09:42:16 发布

阅读量262

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_42364543/article/details/108033082

版权

Web前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

1、对输入网址进行DNS域名解析，得到对应的IP地址

DNS解析实现网址和IP的转换，是寻找最近的有你需要资源的机器的过程。
访问顺序：
浏览器缓存——操作系统缓存——本地host文件——路由器缓存——ISP（网络服务器提供商）DNS——顶级/跟DNS服务器
解析方式
递归查询
递归查询是一种DNS 服务器的查询模式，在该模式下DNS 服务器接收到客户机请求，必须使用一个准确的查询结果回复客户机。如果DNS 服务器本地没有存储查询DNS 信息，那么该服务器会询问其他服务器，并将返回的查询结果提交给客户机。
迭代查询
DNS 服务器另外一种查询方式为迭代查询，DNS 服务器会向客户机提供其他能够解析查询请求的DNS 服务器地址，当客户机发送查询请求时，DNS 服务器并不直接回复查询结果，而是告诉客户机另一台DNS 服务器地址，客户机再向这台DNS 服务器提交请求，依次循环直到返回查询的结果为止。
在这里插入图片描述

2、根据这个IP，找到对应的服务器，发起TCP的三次握手

为什么HTTP协议要基于TCP来实现？
TCP是一个端到端的可靠的面相连接的协议，HTTP基于传输层TCP协议不用担心数据传输的各种问题（当发生错误时，会重传）

三次握手过程

第一次握手
客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态。
第二次握手
服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态。
第三次握手
当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入 ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连接建立成功。
在这里插入图片描述

为什么 TCP 建立连接需要三次握手，而不是两次？

这是因为这是为了防止出现失效的连接请求报文段被服务端接收的情况，从而产生错误。

PS:TCP四次挥手

参考链接
https://blog.csdn.net/qq_42364543/article/details/108059476

3、建立TCP连接后发起HTTP请求

请求报文格式：起始行、请求头，请求主体。

(1)、起始行。包含请求方式，请求路径url，HTTP版本号。

请求方法：

GET：从服务器获取一份文档
HEAD ：只从服务器获取文档的首部
POST：向服务器发送需要处理的数据
PUT：将请求的主体部分存储在服务器上
TRACE：对可能经过代理服务器传送到服务器上去的报文进行跟踪
OPTIONS：决定可以在服务器上执行哪些方法
DELETE：从服务器上删除一份文档

PS:GET和POST请求区别

参考链接
https://blog.csdn.net/qq_42364543/article/details/108046535

(2)、请求头

包含若干个属性，格式为“属性名:属性值”，服务端据此获取客户端的信息。
例如
Accept 就是告诉服务器端，我接受那些MIME类型
Accept-Lanague 告诉服务器能够发送哪些语言
Connection 告诉服务器支持keep-alive特性
Cookie 每次请求时都会携带上Cookie以方便服务器端识别是否是同一个客户端
Host 用来标识请求服务器上的那个虚拟主机，比如Nginx里面可以定义很多个虚拟主机

(3)、请求体
它将一个页面表单中的组件值通过param1=value1&param2=value2的键值对形式编码成一个格式化串，它承载多个请求参数的数据。不但报文体可以传递请求参数，请求URL也可以通过类似于“/chapter15/user.html? param1=value1&param2=value2”的方式传递请求参数。

4、服务器响应HTTP请求，浏览器得到html代码

响应报文格式：响应行、响应头，响应体。
(1)、响应行
响应行一般由协议版本、状态码及其描述组成比如 HTTP/1.1 200 OK
常见状态码：

1xx: 信息性状态码

100 继续。客户端应继续其请求
101 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议

2xx: 成功状态码

200：请求成功。一般用于GET与POST请求

3xx: 重定向状态码

301:

理解

旧地址A的资源被永久移除, 重定向到网址B，搜索引擎会抓取网址B的内容，同时将网址保存为B网址。

特点

会被浏览器缓存

场景应用

域名切换
HTTP迁移到HTTPS

注意

尽量使用301跳转，以防止网址劫持！
网络劫持理解:
(1)、一个不道德的人在他自己的网址A 做一个302 重定向到你的网址B，出于某种原因， Google 搜索结果所显示的仍然是网址A，但是所用的网页内容却是你的网址B 上的内容，这种情况就叫做网址URL 劫持。
(2)、有个坏人把他的电话来电转移到了一个明星那里，让大家都以为他的电话是那个明星的。

302:

理解

旧地址A的资源仍可访问，这个重定向只是临时从旧地址A跳转到B地址，这时搜索引擎会抓取B网址内容，但是会将网址保存为A的。

特点

不会被浏览器缓存

使用场景

未登录用户访问个人中心时重定向到登录页面
404页面提示后跳转到首页

304：
Not Modified 未修改，比如本地缓存的资源文件和服务器上比较时，发现并没有修改，服务器返回一个304状态码，告诉浏览器，你不用请求该资源，直接使用本地的资源即可。

PS:浏览器缓存

参考链接·····

4xx: 客户端错误状态码

400: Bad Request 客户端请求的语法错误，服务器无法理解
401: Unauthorized 请求要求用户的身份认证
403: Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求
404: Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

5xx: 服务器端错误状态码

500: Internal Server Error 服务器内部错误
502: Bad Gateway 前面代理服务器联系不到后端的服务器时出现
503: Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。
504: Gateway Timeout 这个是代理能联系到后端的服务器，但是后端的服务器在规定的时间内没有给代理服务器响应

(2)、响应头
响应头用于描述服务器的基本信息，以及数据的描述，服务器通过这些数据的描述信息，可以通知客户端如何处理等一会儿它回送的数据。

常见的响应头字段含义：
Allow：服务器支持哪些请求方法(如GET、POST等)。
Content-Length：表示内容长度。
Content- Type：表示后面的文档属于什么MIME类型。Servlet默认为text/plain，但通常需要显式地指定为text/html。由于经常要设置 Content-Type，因此HttpServletResponse提供了一个专用的方法setContentType。
Date：当前的GMT时间
Last-Modified：文档的最后改动时间。
Location：这个头配合302状态码使用，用于重定向接收者到一个新URI地址。

(3)、响应体
响应体就是响应的消息体，如果是纯数据就是返回纯数据，如果请求的是HTML页面，那么返回的就是HTML代码，如果是JS就是JS代码。

5、浏览器解析html代码，并请求html代码中的资源（如js、css图片等）（先得到html代码，才能去找这些资源）

6、浏览器对页面进行渲染呈现给用户

最后一步浏览器是如何对页面进行渲染的？

（1）、处理 HTML 标记并构建 DOM 树。
当浏览器接收到服务器响应来的HTML文档后，会遍历文档节点，生成DOM树。
需要注意的是，DOM树的生成过程中可能会被CSS和JS的加载执行阻塞。
（2）、处理 CSS 标记并构建 CSSOM 树。
浏览器解析CSS文件并生成CSS规则树，每个CSS文件都被分析成一个StyleSheet对象，每个对象都包含CSS规则。CSS规则对象包含对应于CSS语法的选择器和声明对象以及其他对象。

渲染阻塞

当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行，然后继续构建DOM。每次去执行JavaScript脚本都会严重地阻塞DOM树的构建，如果JavaScript脚本还操作了CSSOM，而正好这个CSSOM还没有下载和构建，浏览器甚至会延迟脚本执行和构建DOM，直至完成其CSSOM的下载和构建。
所以，script 标签的位置很重要。实际使用时，可以遵循下面两个原则：CSS 优先：引入顺序上，CSS 资源先于 JavaScript 资源。JS置后：我们通常把JS代码放到页面底部，且JavaScript 应尽量少影响 DOM 的构建。

（3）、将 DOM 与 CSSOM 合并成一个渲染树。

通过DOM树和CSS规则树我们便可以构建渲染树。浏览器会先从DOM树的根节点开始遍历每个可见节点。对每个可见节点，找到其适配的CSS样式规则并应用。
渲染树构建完成后，每个节点都是可见节点并且都含有其内容和对应规则的样式。这也是渲染树与DOM树的最大区别所在。渲染树是用于显示，那些不可见的元素当然就不会在这棵树中出现了，譬如。除此之外，display等于none的也不会被显示在这棵树里头，但是visibility等于hidden的元素是会显示在这棵树里头的。

（4）、根据渲染树来布局，以计算每个节点的几何信息。

布局阶段会从渲染树的根节点开始遍历，然后确定每个节点对象在页面上的确切大小与位置，布局阶段的输出是一个盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小。

PS:重排和重绘

参考链接
https://blog.csdn.net/qq_42364543/article/details/108046525

（5）、将各个节点绘制到屏幕上。