天天看点

从输入url到页面完成加载发生了什么(完结)

在写这篇文章之前本想着这个知识点涉及知识点太多太杂,我自己又是一个计算机网络小白找一篇大牛写的看看就算了,但是看了大概七八篇后,内心更纠结了——???真的好杂。。。记忆点找不到了,搞的心里乱乱的,大概是纠结症犯了。所以还是动手总结一下,让自己有个可以抓取的记忆点,也让自己对这个知识点有个浅显的认知。本文旨在讲述发生的流程,其中穿插的知识点及概念我会放到小框里或者贴参考链接。

先来个流程总述:

  • DNS解析:将域名解析成IP地址
  • TCP连接:TCP三次握手
  • 发送HTTP请求
  • 服务器处理请求并返回HTTP报文
  • 浏览器解析渲染页面
  • 连接结束:TCP四次挥手

1、DNS解析

在浏览器输入URL后,首先要经过域名解析。浏览器通过向 DNS 服务器发送域名,DNS 服务器查询到与域名相对应的 IP 地址,然后返回给浏览器,浏览器再将 IP 地址打在协议上,同时请求参数也会在协议搭载,然后一并发送给对应的服务器。

1.什么是URL

URL(Uniform Resource Locator),统一资源定位符,用于定位互联网上资源,俗称网址。比如 http://www.w3school.com.cn/ht…,遵守以下的语法规则:

scheme://host.domain:port/path/filename

各部分解释如下:

scheme - 定义因特网服务的类型。常见的协议有 http、https、ftp、file,其中最常见的类型是 http,而 https 则是进行加密的网络传输。

host - 定义域主机(http 的默认主机是 www)

domain - 定义因特网域名,比如 w3school.com.cn

port - 定义主机上的端口号(http 的默认端口号是 80)

path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。

filename - 定义文档/资源的名称

2. 什么是DNS

DNS(domain name system,域名系统):因特网上域名和IP地址相互映射的分布式数据库;简单理解就是域名与IP地址的对照表,因为域名(如:www.google.com)对于我们而言,更便于记忆,但是机器却不擅长这种表达方式,因此需要将域名转换为IP地址,以便于机器识别, 这便有了DNS。

3. 根域名服务器

根服务器是架设互联网的必须设施,管理互联网的主目录,全球共有13套根域名服务器

4. 递归查询

客户端主机向本地域名服务器的查询是递归查询;所谓递归查询:客户端主机查询的域名地址无法在本地域名服务器中找到,因此本地域名服务器就以DNS客户端的身份向其他根域名服务器发起请求,进行查询,而不是让客户端主机去一直查询;

递归查询的结果要么是返回的IP地址,要么是报错,表示无法查询到地址;

5. 迭代查询

本地域名服务器向根服务器、顶级域名服务器和主机域名服务器发起的查询请求就是迭代的过程,如:本地域名服务器向根服务器发起查询请求,根服务器中会告诉本地域名服务器:”我这里没有你要找的内容,你去顶级域名服务器上找吧“,并将顶级域名服务器的地址返回给本地域名服务器,本地域名服务器接收到后,继续向顶级域名服务器发送请求;顶级域名服务器要么返回ip地址,要么告诉本地域名服务器下一步要向哪个权限域名服务器发送请求,直到找到ip地址或找不到ip返回报错信息,然后信息返回给客户端主机;

下图给出了这两种查询的差别

递归过程: 主机→本地DNS服务器→其他DNS服务器(如:我要找一个苹果吃,找到了A,问A有没有,A说我帮你去找B,B可能有,果真B有,然后B将苹果给了A,A再将苹果给我,这就是递归)

迭代过程: 本地DNS服务器→根服务器,本地DNS服务器→顶级域名服务器,本地DNS服务器→权限域名服务器;(如:我要找一个苹果,找到了A,A说我也没有,B可能有,你去找B吧;我又找B,B说我也没有,你去找C吧,我又去找C,终于找到了苹果,这就是迭代的过程)

2、TCP连接:TCP三次握手

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

从输入url到页面完成加载发生了什么(完结)
  • 第一次握手:客户端A将标志位SYN置为1,随机产生一个值为seq=X(X的取值范围为=1234567)的数据包到服务器,客户端A进入SYN_SENT状态,等待服务端B确认(第一次握手,由浏览器发起,告诉服务器我要发送请求了);
  • 第二次握手:服务端B收到数据包后由标志位SYN=1知道客户端A请求建立连接,服务端B将标志位SYN和ACK都置为1,ack=X+1,随机产生一个值seq=Y,并将该数据包发送给客户端A以确认连接请求,服务端B进入SYN_RCVD状态(第二次握手,由服务器发起,告诉浏览器我准备接受了,你赶紧发送吧)。
  • 第三次握手:客户端A收到确认后,检查ack是否为X+1,ACK是否为1,如果正确则将标志位ACK置为1,ack=Y+1,并将该数据包发送给服务端B,服务端B检查ack是否为Y+1,ACK是否为1,如果正确则连接建立成功,客户端A和服务端B进入ESTABLISHED状态,完成三次握手,随后客户端A与服务端B之间可以开始传输数据了(第三次握手,由浏览器发送,告诉服务器,我马上就发了,准备接受吧)。

为什需要三次握手?

计算机网络》第四版中讲“三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端,因而产生错误”。 书中的例子是这样的,“已失效的连接请求报文段”的产生在这样一种情况下:client发出的第一个连接请求报文段并没有丢失,而是在某个网络结点长时间的滞留了,以致延误到连接释放以后的某个时间才到达server。本来这是一个早已失效的报文段。但server收到此失效的连接请求报文段后,就误认为是client再次发出的一个新的连接请求。于是就向client发出确认报文段,同意建立连接。

假设不采用“三次握手”,那么只要server发出确认,新的连接就建立了。由于现在client并没有发出建立连接的请求,因此不会理睬server的确认,也不会向server发送数据。但server却以为新的运输连接已经建立,并一直等待client发来数据。这样,server的很多资源就白白浪费掉了。采用“三次握手”的办法可以防止上述现象发生。例如刚才那种情况,client不会向server的确认发出确认。server由于收不到确认,就知道client并没有要求建立连接。”。主要目的防止server端一直等待,浪费资源。

3、浏览器向web服务器发送HTTP请求

TCP三次握手之后,开始发送HTTP请求报文至服务器(关于HTTP请求报文详解,我单独写了一篇☞传送门)

HTTP请求报文格式:请求行+请求头+空行+消息体,请求行包括请求方式(GET/POST/DELETE/PUT)、请求资源路径(URL)、HTTP版本号;

从输入url到页面完成加载发生了什么(完结)

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

服务器收到请求后会发出应答,即响应数据。HTTP响应与HTTP请求相似,

HTTP响应报文格式:状态行+响应头+空行+消息体,状态行包括HTTP版本号、状态码、状态说明。

从输入url到页面完成加载发生了什么(完结)

5、浏览器解析渲染页面(关于渲染详解我也单独拎出来了☞传送门)

浏览器拿到响应文本后,解析HTML代码,请求js,css等资源,最后进行页面渲染,呈现给用户。页面渲染一般分为以下几个步骤:

(1)根据HTML文件解析出DOM Tree

(2)根据CSS解析出 CSSOM Tree(CSS规则树)

(3)将 DOM Tree 和 CSSOM Tree合并,构建Render tree(渲染树)

(4)reflow(重排):根据Render tree进行节点信息计算(Layout)

(5)repaint(重绘):根据计算好的信息绘制整个页面(Painting)

6、TCP四次挥手。

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

从输入url到页面完成加载发生了什么(完结)

1、发起方向被动方发送报文,Fin、Ack、Seq,表示已经没有数据传输了。并进入 FIN_WAIT_1 状态。(第一次挥手:由浏览器发起的,发送给服务器,我请求报文发送完了,你准备关闭吧)

2、被动方发送报文,Ack、Seq,表示同意关闭请求。此时主机发起方进入 FIN_WAIT_2 状态。(第二次挥手:由服务器发起的,告诉浏览器,我请求报文接受完了,我准备关闭了,你也准备吧)

3、被动方向发起方发送报文段,Fin、Ack、Seq,请求关闭连接。并进入 LAST_ACK 状态。(第三次挥手:由服务器发起,告诉浏览器,我响应报文发送完了,你准备关闭吧)

4、发起方向被动方发送报文段,Ack、Seq。然后进入等待 TIME_WAIT 状态。被动方收到发起方的报文段以后关闭连接。发起方等待一定时间未收到回复,则正常关闭。(第四次挥手:由浏览器发起,告诉服务器,我响应报文接受完了,我准备关闭了,你也准备吧)

简单说就是:

1、A——>B :A告诉B:“我发完了”;

2、B——>A:B告诉A:“好的,我知道你发完了”

3、B——>A:B告诉A:“我收完了”;

4、A——>B:A告诉B:“好的,我知道你发收完了”

继续阅读