访问网页的全过程详解

一、DNS解析

这一过程的目的是获取www.taobao.com这个域名所对应IP地址;

• 浏览器向本机DNS模块发出DNS请求,DNS模块生成相关的DNS报文
• 若DNS缓存中没有相关数据,则浏览器先向DNS服务器发出DNS请求;

• DNS模块将生成的DNS报告传递给传输层中的UDP协议单元

DNS:域名系统,有DNS的地方就有缓存,作为域名和IP地址相互隐射的一个分布式数据库,能使用户方便访问互联网而不用直接读取IP数串

UDP协议单元将该数据封装成IP数据包, 传递给网络层的IP协议单元 

UDP (user datagram protocol)是开放式系统互联模型中一种无连接的传输层协议,全称是用户数据报协议,同熟知的TCP传输控制协议一样,UDP协议直接位于网际协议IP协议的顶层,提供向失误的简单不可靠信息传送服务

• IP协议单元将该数据封装成IP数据包,其中的IP地址为DNS服务器的IP地址

• 封装好的IP数据包将传递给数据链路层的协议单元进行发送

• 发送时如果ARP缓存中没有相关数据,则发送ARP广播请求,等待ARP回复

IP协议定义在网络层,是为了计算机网络相互链接进行通信而设计的协议,规定了在网络上进行通信时遵守的规则,例如IP数据包组成,路由器如何将IP数据包发送到目的主机等

• 得到ARP回复以后,将IP地址和路由下一条MAC地址对应的信息写入APR缓存表

ARP缓存表每台主机中都有着一张ARP表,记录着主机的IP地址和MAC地址的对应关系,ARP协议是工作在网络层的协议,它负责将IP地址解析为MAC地址

• 写入缓存以后,以路由下一跳地址填充目的MAC地址,并以数据帧形式转发

• 这个转发过程可能会进行多次,这取决于DNS服务器在校园网中的位置

• DNS请求被发送到DNS服务器的数据链路层协议单元

MAC地址表:交换机根据MAC地址表转发数据帧,在交换级中有一张记录着局域网主机MAC地址与交换机接口对应关系的表,交换机根据这张表负责将数据帧传输到指定的主机上

数据库链路层介于物理层和网络层中间,将源于网络层的数据可靠的传输到相邻节点的目标机网络层

• DNS服务器的数据库链路层协议单元解析收到的数据帧,将其内部所含有 的IP数据包传递给网络层IP协议单元

• DNS服务器的IP协议单元解析收到的数据包,将其内部所含有的UDP数据传递给传输层中的UDP协议单元

• DNS服务器中的UDP协议单元解析收到的UDP数据包,将其内部的DNS报文传递给该服务器上的DNS服务单元

• DNS服务单元收到DNS请求,将域名解析为对应的IP地址,产生DNS回应报文

• 所有应用层报文必须通过传输层/网络层和数据链路层.因此在以下的叙述中,我将简化这一过程的叙述,简化形式如下
  单箭头表示为本机内部传递,双箭头为网络上的发送

• DNS回应报文→UDP→IP→MAC→→请求域名解析的主机；

• 请求域名解析的主机手打数据帧,该数据帧→IP→UDP→DNS→IE浏览器

• 将域名解析的结果以域名和IP地址对应的形式写入DNS缓存表

二、浏览器与www.taobao.com建立TCP连接:TCP建立连接的三次握手

• IE浏览器向www.taobao.com发出TCP连接请求报文
  该请求TCP报文中的SYN标志位被设置为1，表示连接请求；

• 该TCP请求报文→IP(DNS)→MAC(ARP)→→校园网关→→www.taobao.com主机；

• 该TCP请求报文经过IP层时，填入的目的IP地址就是上面DNS过程获得的IP地址；

• 经过数据链路层时，若MAC地址不明，还要进行上面所叙述的ARP过程；

• www.taobao.com收到的数据帧→IP→TCP，TCP协议单元会回应请求应答报文；

• 该请求应答TCP报文中的SYN和ACK标志位均被设置为1，表示连接请求应答；

• 该TCP请求应答报文→IP→MAC(ARP)→→校园网关→→请求主机；

• 请求主机收到数据帧→IP→TCP，TCP协议单元会回应请求确认报文；

• 该请求应答TCP报文中的ACK标志位被设置为1，表示连接请求确认；

• 该TCP请求确认报文→IP→MAC(ARP)→→校园网关→→www.taobao.com主机；

• www.taobao.com收到的数据帧→IP→TCP，连接建立完成；

在这个过程中，任何一个报文出错或超时，都要进行重传；
这个过程被称为TCP建立连接的三次握手。

三、浏览器开始HTTP访问过程

• IE浏览器向www.taobao.com发出HTTP-GET方法报文；

• 该HTTP-GET方法报文→TCP→IP→MAC→→校园网关→→www.taobao.com主机；
  www.taobao.com收到的数据帧

• →IP→TCP→HTTP，HTTP协议单元会回应HTTP协议格式封装好的HTML超文本形式数据；

• HTTP-HTML数据→TCP→IP→MAC(ARP)→→校园网关→→请求主机；

• 请求主机收到的数据帧→IP→TCP→HTTP→IE浏览器，浏览器会以网页形式显示HTML超文本，就是我们所看到的网页。

四、断开TCP连接:TCP断开连接的四次挥手

• IE浏览器向www.taobao.com发出TCP连接结束请求报文；
• 该请求TCP报文中的FIN标志位被设置为1，表示结束请求；
• 该TCP结束请求报文→IP→MAC(ARP)→→网关→→www.taobao.com主机；
• www.taobao.com收到的数据帧→IP→TCP，+ + TCP协议单元会回应结束应答报文；
• 该结束应答TCP报文中的FIN和ACK标志位均被设置为1，表示结束应答；
• 该TCP结束应答报文→IP→MAC(ARP)→→校园网关→→请求主机；
• 这个过程需要双向进行,因此www.taobao.com主机也会按上述流程再做一次,整个过程被称为断开连接的四次挥手

数据获取部分大概就是这样子，但是并不是当所有数据都加载完了之后才开始解析和渲染，当浏览器得到数据时就会开始一边解析、一边等待一些待下载完成的资源

 

五、解析DOM树

 

1、创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = 'loading'。

2、遇到link外部css，创建线程加载，并继续解析文档。

3、遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。

4、遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。 对于async属性的脚本，脚本加载完成后立即执行。（异步禁止使用document.write()）

5、遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。

6、当文档解析完成，document.readyState = 'interactive'。

7、文档解析完成后，所有设置有defer的脚本会按照顺序执行。（注意与async的不同,但同样禁止使用document.write()）;

8、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。

9、当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = 'complete'，window对象触发load事件。

10、从此，以异步响应方式处理用户输入、网络事件等。

 

参考以下了文章：

url访问网站的整个过程 https://www.jianshu.com/p/7a8dc5038123

页面加载过程详解和优化策略 https://www.jianshu.com/p/e34cf19f9c7d

web页面加载、解析、渲染过程  https://www.cnblogs.com/CandyManPing/p/6635008.html

访问一个网页的全过程  https://blog.csdn.net/u012862311/article/details/78753232