HTTP相关知识点整理

阅读量：

HTTP

一次完整的http请求服务过程

当浏览器输入URL后系统会执行如下操作：首先获取该URL对应的服务器IP地址；当浏览器发送请求时系统会先检查本地缓存记录；在缓存查找过程中系统会按照如下层级顺序进行匹配：浏览器本地缓存→系统缓存→路由器缓存；如果上述所有层次的缓存均不存在则系统将尝试访问DNS服务器获取真实IP地址；完成IP地址获取后系统会生成一个包含请求信息的HTTP报文（该报文包括请求方法、路径信息及附加数据）并将此报文封装成TCP包形式；随后TCP包依次经过传输层、网络层、数据链路层及物理层最终到达目标服务器；目标服务器接收到报文后会解析并执行相关指令返回响应内容；响应内容经解析后会被呈现为HTML页面；在此过程中DOM解析是关键步骤其中可能会遇到外部JavaScript文件引用等问题这会导致网页渲染过程出现延迟因此建议将JavaScript代码放置在HTML代码之前以提高渲染效率；此外在构建CSS对象模型树（CSSOM）时需要遵循以下原则：忽略那些不影响视觉效果的元素如脚本标签等；在布局计算阶段应考虑元素的位置尺寸及其相互关系；最后在渲染页面时系统会自动处理图片视频音频等多种资源并行下载以提高用户体验需要注意的是所有这些操作都会受到服务器端资源限制尤其是针对设置有缓存策略的数据项系统会在必要时触发缓存验证机制以确保数据最新性

输入完网址按下回车，到看到网页这个过程中发生了什么

浏览器向DNS服务器发起请求以获取指定URL中对应域名的IP地址信息；
浏览器与服务器之间通过三次握手机制建立可靠的TCP连接；
当完成TCP连接后，浏览器发送HTTP 请求；
服务器接收到HTTP 请求后处理并返回对应的HTML代码；
浏览器对HTML代码进行分析，并根据其中的资源指令（如JavaScript、CSS、图片等）执行相应操作；
浏览器对页面内容进行渲染并展示给用户界面；
服务器完成所有操作后与客户端完成四次挥手过程以释放资源。

a.域名解析

DNS域名系统，是应用层协议，运行UDP协议之上，使用端口43。

浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有该请求资源，会直接在屏幕中显示页面内容，没有再使用DNS服务器解析，本地查询是递归查询，依次通过浏览器缓存 —>> 本地hosts文件 —>> 本地DNS解析器 —>>本地DNS服务器 —>> 其他域名服务器请求。接下来的过程就是迭代过程。
递归查询一般而言，发送一次请求就够，迭代过程需要用户发送多次请求。

DNS主要采用UDP协议作为传输层协议的原因是为了规避使用TCP协议所带来的连接时延问题。
在获取域名IP地址的过程中,通常会向多个DNS服务器发起查询请求;若采用TCP协议,则每一次请求都会带来连接时延的问题,导致DNS服务运行效率下降。
在实际应用中,绝大多数的DNS查询请求来自于浏览器在访问网页时发起的;这会导致网页加载过程中出现等待时间延长的情况。

当浏览器检测到所求取的资源位于缓存中且未过期时，则会直接使用该资源；否则将向服务器发出新的请求。

b. 发起TCP的3次握手

TCP协议采用了一次三步协商机制。发送端首先向接收端发送带有SYN标志的报文。当接收端收到此数据包后会回复携带SYN/ACK标志的确认报文以表明其接受请求。随后发送端再返回一个带有ACK标志的结束确认报文从而完成整个协商过程

c. 建立TCP连接后发起http请求

HTTP请求

HTTP 1.0标准规范了三种典型的数据传输方式，并包含GET、POST和HEAD三种主要的数据访问方式；此外，在HTTP 1.1版本中新增了 six 种扩展型的数据操作方式：包括OPTIONS、PUT、PATCH、DELETE、TRANSFER和CONNECT

请求方法：

GET：获取资源

POST：传输资源

PUT：更新资源

DELETE：删除资源

HEAD：获得报文首部

OPTIONS:返回支持的请求方法

TRACE:追踪路径

HTTP报文的组成部分

http报文包括：请求报文和响应报文。

请求报文= 请求行+请求头+空行+请求体

（1）HTTP 请求行：由http方法、URL路径和HTTP协议版本组成。
（2）HTTP 请求头：包含键值对用于指示服务端所需的信息。
（3）空行：作为分隔符用于区分请求头部与正文部分。
（4）正文内容：表示具体的数据或指令。

响应报文=状态行+响应头+空行+响应体

状态行：http协议及版本、状态码及状态描述。

get post

GET 用于获取资源，POST 用于提交资源。

当浏览器进行回退操作时， $...$ 方法不会发起重传请求。然而，在HTTP GET协议下，默认情况下会自动忽略返回的状态码（如204或304），而在HTTP/1.1协议下则会强制返回相应状态码。
相反，在HTTP GET协议中，默认情况下会将查询参数直接嵌入URL路径中。
相反，在HTTP GET协议中，默认情况下会将查询参数直接嵌入URL路径中。
相反，在HTTP GET协议下，默认情况下默认端口默认端口默认端口默认端口默认端口默认端口默认端口。
相反，在HTTP GET协议下，默认情况下默认端口默认端口默认端口defaultPort defaultPort defaultPort defaultPort defaultPort defaultPort defaultPort defaultPort defaultPort defaultPort defaultPort defaultPort。
相反，在HTTP GET协议下，默认情况下默认端口defaultPort defaultPort defaultPortdefaultport DEFAULTPORT DEFAULTPORT DEFAULTPORT DEFAULTPORT DEFAULTPORT DEFAULTPORT DEFAULTPORT DEFAULTPORTDEFAULT PORTDEFAULT PORTDEFAULT PORTDEFAULT PORTDEFAULT PORTDEFAULT PORTDEFAULT PORTDEFAULT PORTDEFAULT PORTDEFAULT PortDefault PortDefault PortDefault Default PortDefault Default PortDefault Default PortDefault Default PortDefault Default PortDefault Default PortDefault Default PortDefault Default PortDefault Default PortDefault Default Port_default

d. 服务器端响应http请求，浏览器得到html代码

当服务器接收到浏览器发出的HTTP请求数时，在接收完成后会将接收到的所有HTTP报文打包成一个HTTP Request对象，并经由相应的Web服务器进行处理。处理完成后会返回一个包含状态码、响应头和响应报文这三个组成部分的HTTP Response对象。

状态码

1xx 信息类

接受的请求正在处理，信息类状态码。

2xx 成功

200 OK 表示从客户端发来的请求在服务器端被正确请求。

204 No content，表示请求成功，但没有资源可返回。

206 Partial Content表示应用程序进行了范围请求操作，并且服务器已成功响应了该部分 GET 请求的结果报文；其响应内容包含了根据Content-Range指示的具体实体部分

3xx 重定向

HTTP 301 状态码被触发时会引发永久性重定向指令

302 found，临时性重定向，表示资源临时被分配了新的 URL。

303 see other，表示资源存在着另一个 URL，应使用 GET 方法获取资源。

304 not modified，当协商缓存命中时会返回这个状态码。

307 temporary redirect，临时重定向，和302含义相同,不会改变method

当服务器返回HTTP状态码 301、302或 303时，在几乎所有的现代浏览器中都会自动将POST请求转换为GET请求，并会自动去除原始请求体内容随后系统会自动重新发送该修正后的请求然而在实际情况中人们却普遍采用这一做法

4XX 客户端错误

400 bad request，请求报文存在语法错误。

401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息。

403 forbidden，表示对请求资源的访问被服务器拒绝。

404 not found，表示在服务器上没有找到请求的资源。

返回405错误表示；服务器对此方法进行了阻止；通过调用options方法，客户端能够获取到服务器允许的各种访问途径；如图所示 👇

Access-Control-Allow-Methods →GET,HEAD,PUT,PATCH,POST,DELETE

5XX 服务器错误

500 internal sever error，表示服务器端在执行请求时发生了错误。

HTTP 404 错误发生时
服务器运行正常
在访问过程中出现了异常
具体的错误信息尚不清楚

服务器返回503错误状态时会触发此提示信息。这通常意味着服务器目前处于过载运行中，并且可能正处于维护 downtime 中。

接下来，我们数据拿到了，你认为就会断开TCP连接吗？

查看响应头中的Connection字段信息。如果该字段值为'close'（表示已关闭），则该连接会被关闭；一般情况下，在HTTP 1.1协议下，默认请求头会包含「Connection: Keep-Alive」以建立持久连接；在这种持续连接的情况下，TCP连接将保持不变；随后的所有请求将复用该已建立的连接以获取资源。

上面的情况就会断开TCP连接，请求-响应流程结束。

到这里的话，网络请求就告一段落了，接下来的内容就是渲染流程了👇

浏览器解析渲染页面

浏览器渲染原理 :

当我们在浏览器地址栏输入URL时，在线服务会向服务器发起请求获取所需资源。服务器接收到该请求后会提供对应的HTML内容，在线服务接收后会启动对这些内容的解析过程。在此过程中，解析完成后会生成DOM结构。如果页面包含CSS样式表，则根据这些样式信息创建相应的CSSOM对象，并与DOM结构共同构建出完整的渲染树模型。基于此渲染树模型，在线服务能够精确计算出各个节点在屏幕上的具体尺寸和位置参数，并将其以图形化界面的形式呈现给用户。

CSS文件的加载与DOM文档的构建是同时进行的 ；具体而言，在构建DOM文档的过程中（即DOM解析阶段），系统会即时检查并处理需要从外部获取资源（如CSS样式表或图片元素）的情况；每当遇到此类资源时，系统会向网络服务器提交相应的HTTP请求；一旦服务器返回响应数据后（通常包括预览图像或样式信息），这些内容会被注入到DOM结构中的相应位置上；

因为JavaScript文件无法与DOM进行并行加载,从而须等待其全部内容完成后才能继续DOM的加载。

解决方法：
前提，js是外部脚本；

在script标签中设置async属性为true；
该属性表明该js文件采用异步加载方式；
即该js文件不会受其他js或css文件的依赖；
但这仍然能够实现与dom元素同步加载的效果；
在script标签中设置defer属性为true；
可以让该脚本与其dom元素实现并行加载；
当网页完全载入完成后才开始执行这段脚本代码；
这样就可以避免页面加载过程中可能出现的阻塞问题。

*生成 DOM 结构 通过解析 HTML 文档生成对应的 DOM 节点结构。每个 DOM 节点都与对应的 HTML 标签一一对应。这些 DOM 结构不仅包含所有头元素和其他隐藏元素；渲染树则排除所有头元素和其他隐藏元素；整个文档中的每一行都是独立的 XML 节点；每个 XML 节点都具有相应的 CSS 属性设置。

加载 CSS 和 JavaScript 资源 例如图片、CSS 和 JavaScript 等额外资源需要从网络或缓存中获取。主进程在构建 DOM 时逐个请求这些资源。
JavaScript 的下载和执行
JavaScript 加载和解析的过程会阻碍 DOM 构建。当构建 DOM 遇到