深入探索浏览器从 URL 输入到显示页面期间所涉及的各个步骤和过程

前言

本文主要讲解浏览器从URL输入到显示页面期间都发生了哪些事件，而这些事件是为了完成什么任务。那么好，本文正式开始。

简版

1.浏览器根据请求的URL用DNS域名解析，将域名转换成服务器IP，向浏览器发送请求。
2.服务器接收并处理请求，生成对应数据，并将数据以HTTP相应形式返回给浏览器。
3.浏览器接收（HTML、JS、CSS）文件并对文件进行语法解析处理。
4.解析成功后，浏览器构造内部数据结构，分别是HTML的DOM（文档对象模型）和CSS的CSSOM（CSS对象模型），根据这些解析好的模型开始渲染页面，并计算元素布局和绘制元素。最终渲染出动态页面。
注：如果包含外部资源（图片、脚本等），浏览器继续发送请求加载资源。

详细版本

1.输入URL

1.浏览器输入URL

URL组成

http://www.baidu.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name

1. http:// ,协议，在这里就是http://，这也就是说这个网页使用的是这个协议，//为这个协议后的分隔符。
2. www.baidu.com ,域名(IP地址),也可以使用IP地址作为域名。
3. :8080 ，端口号，这部分是端口号，这个在有的URL中是不存在的，如果不存在则默认端口80，同时端口和IP地址是用:进行分隔的。
4. /news/index.asp， 路径 ，/news/index.asp，类似于路由，就是在一个大网页下的某个路由分支，和端口一样，是可有可没有的。
5. boardID=5&ID=24618&page=1 查询参数，这个是从？到#之间的部分，可以有多个参数，多个参数用&作为分隔。
6. #name 片段标识符

2.判断输入URL是否被浏览器缓存且缓存是否新鲜

2.网络进程会看该URL是否存在浏览器缓存IP地址，如果不存在则直接进入下一步DNS解析部分。如果存在又分为以下两个部分：
缓存未过期：直接提供给客户端。无需请求服务器。
缓存已过期：浏览器发出新请求（跳过DNS解析），向服务器请求该资源。

如何检查浏览器缓存是否过期

在 HTTP 1.0 中，使用 Expires 头来指定绝对时间，表示缓存的新鲜日期。
在 HTTP 1.1 中，增加了 Cache-Control 头，其中的 max-age=time 参数以秒为单位表示最大新鲜时间。

如果在浏览器的缓存中没有找到对应的 IP 地址，浏览器会检查本机操作系统的缓存，看是否有与该主机相关的 IP 地址。如果存在，浏览器会使用本机操作系统提供的 IP 地址。
如果缓存中也没有找到对应的 IP 地址，浏览器会继续查找操作系统的 hosts 文件。这个文件可以手动配置用于映射域名和 IP 地址的关系。如果 hosts 文件中包含了该主机的映射信息，浏览器将使用其中指定的 IP 地址。
如果上述步骤都没有找到对应的 IP 地址，浏览器将向路由器发送请求，看是否有缓存的路由信息。一些路由器会缓存最近访问过的域名及其对应的 IP 地址。如果以上步骤都未能获取 IP 地址，浏览器会向 ISP（互联网服务提供商）的 DNS 服务器发起递归查询。DNS 服务器会根据域名进行解析。

具体查找缓存顺序

• 浏览器缓存
• 本机缓存
• 操作系统：host文件缓存
• 路由器缓存
• DNS解析

3.DNS解析（递归）

DNS解析会向互联网服务提供商（ISP）的DNS服务器发起请求，并按照层级进行查询，直到找到负责该域名的权威DNS服务器，从中获取最终的IP地址。

如果请求协议是HTTPS，那么还需要建立TLS连接。

4.传输层建立TCP连接（三次握手）

利用IP地址和服务器来建立TCP连接。

TCP连接是什么以及特点

TCP是一种面向连接的通信管道。特点：可靠性、有序性、面向连接。

TCP和UDP（另一种传输层协议）的区别：

UDP是无连接的协议，而TCP是可靠的有连接的协议。

4.1三次握手

在连接中，客户端和服务端通过三次握手建立连接。
第一次握手（SYN）：客户端发送带有SYN（同步序列号）数据包给服务器，客户端进入SYN_SENT（同步已发送）状态。确定服务端是否开启端口准备连接。（SYN=1，Seq=X）
第二次握手（SYN+ACK）：服务器如果有开着的端口并且决定接受连接。服务端收到请求并回复一个带有SYN和ACK标志数据包，表示接收请求，并告知客户端自己的初始序列号，服务端进入SYN_RCVD（同步已接收）状态。（SYN=1， ACK=X+1， Seq=Y）
第三次握手（ACK）：客户端接收请求并发送ACK标志数据包，确认收到回复，发送成功后，双端皆进入ESTABLISHEN（连接已建立）状态。建立连接成功。（ACK=Y+1， Seq=Z）

5.发送HTTP请求、服务器响应

TCP连接建立后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的Cookie等数据附加到请求头中，最后发送HTTP请求。
服务器收到请求后，根据请求信息生成响应信息，发送给网络进程后，网络进程进行解析。解析后把响应返回给客户端，这时客户端接收还需要进行四次挥手。

6.四次挥手

第一次挥手（FIN）：客户端发送一个带有FIN（结束标志）的数据包给服务器，表示想要关闭连接。（Fin=1， Ack=Z， Seq= X）
第二次挥手（ACK）：服务器收到后，回复ACK消息作为确认，服务器进入CLOSE_WAIT状态。（ACK=X+1， Seq=Z）
第三次挥手（FIN）：如果还有未发送的数据，将剩余数据发送给客户端，都发送完毕后，服务端发送带FIN标志数据包给客户端。（Fin=1， ACK=X， Seq=Y）
第四次挥手（ACK）：客户端收到数据包后，回复一个ACK消息表示确定，客户端进行TIME_WAIT 状态，等待一段时间后将会彻底关闭连接。（ACK=Y， Seq=X）

7.浏览器解析渲染

解析HTML形成DOM树
解析CSS形成CSSOM 树
合并DOM树和CSSOM树形成渲染树
浏览器开始渲染并绘制页面