带你深挖从 URL 输入到页面展示发生了什么

Posted 南淮北安

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带你深挖从 URL 输入到页面展示发生了什么相关的知识,希望对你有一定的参考价值。

文章目录

一、总体过程

(1)DNS 解析:将域名解析成 IP 地址

(2)TCP 连接:TCP 三次握手

(3)发送 HTTP 请求

(4)服务器处理请求并返回 HTTP 报文

(5)浏览器解析渲染页面

(6)断开连接:TCP 四次挥手

我们输入的 URL,统一资源定位符,也就是我们常说的网址,用于定位互联网上的资源

在浏览器输入网址后,首先要经过域名解析,因为浏览器并不能直接通过域名找到对应的服务器,而是要通过 IP 地址。

所以会先向 DNS 服务器发送域名,DNS 服务器查询到与域名相对应的 IP 地址,然后返回给浏览器,浏览器再将 IP 地址打在协议上,同时请求参数也会在协议上加载,一并发送给对应的服务器。

在客户端发送数据之前会首先发起 TCP 三次握手,来同步客户端和服务端的序列号和确认号,同时交换 TCP 窗口大小信息

TCP 三次握手结束后,开始发送 HTTP 请求报文,请求报文由请求行,请求头,空行和消息主体构成

服务器通过监听端口,请求来之后,根据 URL 信息,确定将请求交给哪个 Servlet 去处理,然后调用这个 Servlet 的 service 方法,service 方法返回一个 response 对象,服务器再把这个 response 返回给客户端。

这个响应报文由,响应行,响应首部,空行和消息主体构成

最后浏览器通过渲染引擎将网页展现给用户

当数据传送完毕,需要断开 TCP 连接,此时发起 TCP 四次挥手

二、域名解析

在浏览器输入网址后,首先要经过域名解析,因为浏览器并不能直接通过域名找到对应的服务器,而是要通过 IP 地址。

所以会先向 DNS 服务器发送域名,DNS 服务器查询到与域名相对应的 IP 地址,然后返回给浏览器,浏览器再将 IP 地址打在协议上,同时请求参数也会在协议上加载,一并发送给对应的服务器。

(1)IP 地址

IP 地址是指互联网协议地址,是 IP 协议提供的一种统一的地址格式,它为互联网上的每一个网络和每一台主机分配一个逻辑地址,以此来屏蔽物理地址的差异。IP 地址是一个 32 位的二进制数,比如 127.0.0.1 为本机 IP。

(2)域名

域名就相当于 IP 地址乔装打扮的伪装者,带着一副面具。它的作用就是便于记忆和沟通的一组服务器的地址。用户通常使用主机名或域名来访问对方的计算机,而不是直接通过 IP 地址访问。因为与 IP 地址的一组纯数字相比,用字母配合数字的表示形式来指定计算机名更符合人类的记忆习惯。但要让计算机去理解名称,相对而言就变得困难了。因为计算机更擅长处理一长串数字。为了解决上述的问题,DNS 服务应运而生。

(3)域名解析

DNS 协议提供通过域名查找 IP 地址


(4)浏览器如何通过域名查询 URL 对应的 IP

浏览器缓存:浏览器会按照一定的频率缓存 DNS 记录。
操作系统缓存:如果浏览器缓存中找不到需要的 DNS 记录,那就去操作系统中找。
路由缓存:路由器也有 DNS 缓存。
ISP 的 DNS 服务器:ISP 是互联网服务提供商(Internet Service Provider)的简称,ISP 有专门的 DNS 服务器应对 DNS 查询请求。
根服务器:ISP 的 DNS 服务器还找不到的话,它就会向根服务器发出请求,进行递归查询(DNS 服务器先问根域名服务器.com 域名服务器的 IP 地址,然后再问.baidu 域名服务器,依次类推)

三、TCP 三次握手

在客户端发送数据之前会首先发起 TCP 三次握手,来同步客户端和服务端的序列号和确认号,同时交换 TCP 窗口大小信息

TCP 三次握手的具体学习可参考:一篇文章带你完整复习三次握手和四次挥手

四、发送 HTTP 请求

TCP 三次握手结束后,开始发送 HTTP 请求报文,请求报文由请求行,请求头,空行和消息主体构成

HTTP 消息结构详细内容学习可参考:一篇文章带你完整整理 HTTP 相关知识内容

五、服务器处理请求并返回 HTTP 报文

服务器通过监听端口,请求来之后,根据 URL 信息,确定将请求交给哪个 Servlet 去处理,然后调用这个 Servlet 的 service 方法,service 方法返回一个 response 对象,服务器再把这个 response 返回给客户端。

具体的过程可以学习:Servlet 的执行原理

六、浏览器解析渲染页面

浏览器拿到响应文本 html 后,接下来介绍下浏览器渲染机制


浏览器解析渲染页面分为一下五个步骤:

  • 根据 HTML 解析出 DOM 树
  • 根据 CSS 解析生成 CSS 规则树
  • 结合 DOM 树和 CSS 规则树,生成渲染树
  • 根据渲染树计算每一个节点的信息
  • 根据计算好的信息绘制页面

七、断开连接

TCP 四次挥手的过程

TCP 四次挥手的具体学习可参考:一篇文章带你完整复习三次握手和四次挥手

八、浏览器同时打开很多标签页,共用一个TCP连接吗?

对于HTTP1.1 来说
不一定,如果发的域名不一样,肯定不能复用,
域名相同,如果第一个请求和第二个请求并行发送,也不能复用
域名相同,请求顺序发送,还有看是否有connection:keep-alive请求头,没有则不复用

如果都满足,才会复用同一个tcp连接

对于HTTP2 来说:所有的请求都在一个tcp连接上,采用多路复用,基于二进制协议,可以给数据拆成包,并打上包的顺序供tcp能正确认知接收的包的顺序

九、浏览器和服务器交互,谁先主动关闭?

大多数情况下都是服务器响应之后,先进入关闭状态,所以服务器会有大量的 time_wait 状态

所以 time_wait 的时间不能太长,否则当积累太多的 time_wait 状态的 tcp 连接后,服务器容易挂掉

如果http请求发出后,直接关闭浏览器,这时浏览器会先进入关闭状态,服务器会继续处理,

当进行交互时发现与客户端断开了连接时,才会被终端

十、浏览器打开就关闭,服务器怎么办?

如果http请求发出后,直接关闭浏览器,这时浏览器会先进入关闭状态,服务器会继续处理,

当进行交互时发现与客户端断开了连接时,才会被终端

以上是关于带你深挖从 URL 输入到页面展示发生了什么的主要内容,如果未能解决你的问题,请参考以下文章

从输入url到页面展示到底发生了什么

原老生常谈-从输入url到页面展示到底发生了什么

从输入URL到页面展示,这中间发生了什么?

浏览器从URL输入到页面展示发生了什么?

老生常谈-从输入url到页面展示到底发生了什么

从输入url到页面展示到底发生了什么