web前端开发：Http协议

最新推荐文章于 2022-10-28 16:28:10 发布

灵熙兔

最新推荐文章于 2022-10-28 16:28:10 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：【前端开发】

本文链接：https://blog.youkuaiyun.com/qq_25178609/article/details/51769191

本文详细介绍了HTTP协议的工作原理，从输入URL到页面加载完成的完整过程，包括域名解析、TCP连接建立、HTTP请求构造及响应处理。讨论了URL的格式、编码规则以及HTTP请求的状态码，强调了正确理解和使用HTTP状态码对于优化网站和提升用户体验的重要性。

超文本传送协议 (HTTP-Hypertext transfer protocol) 定义了浏览器(即万维网客户进程)怎样向万维网服务器请求万维网文档，以及服务器怎样把文档传送给浏览器。从层次的角度看，HTTP是面向(transaction-oriented)应用层协议，它是万维网上能够可靠地交换文件(包括文本、声音、图像等各种多媒体文件)的重要基础。

一、从输入URL到页面加载完成的过程中都发生了什么事情？
0.输入URL
1.解析URL：把URL分割成几个部分：协议、网络地址、资源路径;
2.浏览器查找域名的 IP 地址：如果URL合法，首先它会在DNS本地缓存表中查找，如果有则直接使用 hosts 文件里面的 ip 地址。如果没有则会向 dns 域名解析服务器发起域名解析请求，如果没有就会向它的上级服务器询问，如此递归查询找到对应的IP后，返回给浏览器。
3 . 建立TCP连接：当获取IP之后，浏览器在传输层发起一条到达服务器的 tcp 连接，就开始与所请求的Tcp建立三次握手连接，连接建立后，就向服务器发出HTTP请求。
4.构造并发送HTTP请求：一个典型的 http request header 一般需要包括请求的方法，例如 GET 或者 POST 等，之后浏览器发送了一空白行来通知服务器，它已经结束了该头信息的发送。
5.服务器接受并处理HTTP报文
6.服务器构造并发送响应报文
7.浏览器接收报文，并开始构建页面
8.关闭TCP连接：一旦Web服务器向浏览器发送了请求数据，它就要关闭TCP连接，然后如果浏览器或者服务器在其头信息加入了这行代码
Connection:keep-alive
TCP连接在发送后将仍然保持打开状态，于是，浏览器可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间，还节约了网络带宽。
9.开始根据资源的类型，将资源组织成屏幕上显示的图像，这个过程叫渲染，网页渲染是浏览器最复杂、最核心的功能。
10.将渲染好的页面图像显示出来，并开始响应用户的操作。

处理网络响应与渲染。响应到达浏览器之后，浏览器首先判断状态码，如果是 200 开头的就好办，直接进入渲染流程，如果是 300 开头的就要去相应头里面找 location 域，根据这个 location 的指引，进行跳转，这里跳转需要开启一个跳转计数器，是为了避免两个或者多个页面之间形成的循环的跳转，当跳转次数过多之后，浏览器会报错，同时停止。如果是 400 开头或者 500 开头的状态码，浏览器也会给出一个错误页面；
当浏览得到一个正确的 200 响应之后，先进行多国语言的编码解析；解决了字符集的问题，接下来就是构建 dom 树，再接着根据 dom 树和 css 样式表来构造 render 树, 这个才是真正的用于渲染到页面上的一个一个的矩形框的树，对于 render 树上每一个框，需要确定他的 x y 坐标，尺寸，边框，字体，形态，等等诸多方面的东西，render 树一旦构建完成，整个页面也就准备好了

需要说明的是，下载页面，构建 dom 树，构建 render 树这三个步骤，实际上并不是严格的先后顺序的，为了加快速度，提高效率，让用户不要等那么久，现在一般都并行的往前推进的，现代的浏览器都是一边下载，下载到了一点数据就开始构建 dom 树，也一边开始构建 render 树，构建了一点就显示一点出来，这样用户看起来就不用等待那么久了
构建 dom 树的过程中，如果遇