浏览器从输入URL后到出现页面,这个过程发生了什么?

互联网发达的时代,当我们遇到什么问题时,总会习惯性的去网络上查找答案。本人也是一样,开发时遇到问题就会习惯性的打开"度娘"寻找我们的答案。
哪有没有朋友像我们一样,也会好奇当前我们在浏览器输入网址之后,浏览器做了些什么呢?

大致流程:

URL 解析、缓存查询,DNS 解析、TCP 连接、处理请求、接受响应、渲染页面


1、URL解析

首先判断你输入的是一个合法的 URL 还是一个待搜索的关键词,并且根据你输入的内容进行自动完成字符编码等操作。

2、查询缓存、DNS解析

  • 根据url检查浏览器缓存,看时候之前访问过这个url的IP
  • 如果没有,检查操作操作系统的DNS缓存
  • 如果没有,检查路由器的DNS缓存
  • 如果没有,查找ISP DNS(在客户端电脑上设置的首选 DNS 服务器)缓存
  • 如果以上都没有,DNS解析,把域名转化成IP地址,本地 DNS 服务器会将请求转发到互联网上的根域,进入网络请求过程了

3、HTTP连接

DNS解析,把域名转化成IP地址后,服务器会对连接请求做出响应,表示同意建立连接。

建立 TCP连接经历了下面三个阶段:
  • 通过三次握手【后面详解】(即总共发送3个数据包确认已经建立连接)建立客户端和服务器之间的连接。
  • 进行数据传输
  • 断开连接的阶段。数据传输完成,现在要断开连接了,通过四次挥手【后面详解】来断开连接。

4、服务器处理请求

服务器开始构建响应,创建一条http响应报文,把资源信息放到响应体里面开始返回

5、浏览器接受响应

http请求响应,都有一个状态码返回,用来标记这次返回的状态。一般有以下几种状态码:200、302、404、500、504。浏览器会根据状态码,做出相应的动作,遇到200会接受正常返回信息,开始渲染页面。遇到302,则会根据http响应头的location字段,再次发起一次地址是location的网络请求,遇到4开头和5开头的错误,则不会正常渲染,会提示相应的错误。

6、浏览器渲染页面

  1. 构建DOM树:处理HTML标记并构建DOM树,处理CSS标记并构建CSSOM树
  2. 构建渲染树:将DOM和CSSOM树合并,构成渲染树
  3. 布局渲染树: 计算每个节点的大小和位置信息
  4. 绘制渲染树:将渲染树的每个节点换成屏幕的实际像素(绘制)

三次握手

三次握手(Three-way Handshake)其实就是指建立一个TCP连接时,需要客户端和服务器总共发送3个包。进行三次握手的主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备。实质上其实就是连接服务器指定端口,建立TCP连接,并同步连接双方的序列号和确认号,交换TCP窗口大小信息。

刚开始客户端处于 Closed 的状态,服务端处于 Listen 状态。

  • 第一次:客户端发送网络包,服务端收到了。
  • 第二次:服务端发包,客户端收到了。
  • 第三次:客户端发包,服务端收到了。

四次挥手

建立一个连接需要三次握手,而终止一个连接要经过四次挥手(也有将四次挥手叫做四次握手的)。这由TCP的半关闭(half-close)造成的。所谓的半关闭,其实就是TCP提供了连接的一端在结束它的发送后还能接收来自另一端数据的能力。

TCP 的连接的拆除需要发送四个包,因此称为四次挥手(Four-way handshake),客户端或服务器均可主动发起挥手动作。

刚开始双方都处于 ESTABLISHED(建立) 状态

  • 第一次:客户端发送一个 FIN 报文,报文中会指定一个序列号。此时客户端处于 FIN_WAIT1 状态。
  • 第二次:服务端收到 FIN 之后,会发送 ACK 报文,且把客户端的序列号值 +1 作为 ACK 报文的序列号值,表明已经收到客户端的报文了,此时服务端处于 CLOSE_WAIT 状态。
  • 第三次:如果服务端也想断开连接了,和客户端的第一次挥手一样,发给 FIN 报文,且指定一个序列号。此时服务端处于 LAST_ACK 的状态。
  • 第四次:客户端收到 FIN 之后,一样发送一个 ACK 报文作为应答,且把服务端的序列号值 +1 作为自己 ACK 报文的序列号值,此时客户端处于 TIME_WAIT 状态。需要过一阵子以确保服务端收到自己的 ACK 报文之后才会进入 CLOSED 状态,服务端收到 ACK 报文之后,就处于关闭连接了,处于 CLOSED 状态。

参考:https://zhuanlan.zhihu.com/p/86426969
参考:https://www.jianshu.com/p/546b2a175f89

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容