访问网页的全过程详解

旧城等待， 2022-05-19 02:56 519阅读 0赞

### 一、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][]主机也会按上述流程再做一次,整个过程被称为断开连接的四次挥手

![Center][]

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

### 五、解析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、从此，以异步响应方式处理用户输入、网络事件等。

![624][]

参考以下了文章：

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

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

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

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

[www.taobao.com]: https://link.jianshu.com?t=http://www.taobao.com
[Center]: /images/20220519/94a336ec6d314c82a627816cfc9853c2.png
[624]: /images/20220519/e877bd6d2e3d47859c35325d4c871e03.png
[https_www.jianshu.com_p_7a8dc5038123]: https://www.jianshu.com/p/7a8dc5038123
[https_www.jianshu.com_p_e34cf19f9c7d]: https://www.jianshu.com/p/e34cf19f9c7d
[https_www.cnblogs.com_CandyManPing_p_6635008.html]: https://www.cnblogs.com/CandyManPing/p/6635008.html
[https_blog.csdn.net_u012862311_article_details_78753232]: https://blog.csdn.net/u012862311/article/details/78753232