深度解析：从浏览器输入链接到页面展现的奇幻历程

〇、前言

当我们在浏览器中输入一个网址，例如：example.com，按下回车键后，会发生什么呢？

主要会发生以下这些过程：域名解析、建立HTTP连接、发送HTTP请求、数据传输、渲染网页、断开HTTP连接。

一、域名解析

URL 组成

协议（Scheme）：
可以用一个标签来表示，上面写着“协议：HTTP/HTTPS/FTP 等”。这个标签可以放在 URL 的最左边，用不同的颜色突出显示以区分其他部分。例如：“协议：https”。
主机（Host）：
用一个方框表示，里面写上主机名或 IP 地址，如“www.example.com”或“192.168.1.100”。这个方框紧跟在协议标签后面。例如：“协议：https” → “主机：www.example.com”。
端口（Port）：
如果有端口号，可以在主机方框后面用一个小括号括起来写上端口号，如“:8080”。如果是默认端口，可以不显示端口部分。例如：“协议：https” → “主机：www.example.com” → “端口：:8080”（如果使用非默认端口）。
路径（Path）：
用一个向右的箭头表示路径的指向，后面跟着一个类似文件路径的描述，如“/articles/1234.html”。例如：“协议：https” → “主机：www.example.com” → “端口：:8080” → “路径：/articles/1234.html”。
查询参数（Query Parameters）：
用一个“?”表示查询参数的开始，后面跟着一系列键值对，如“q=keyword&page=2”。例如：“协议：https” → “主机：www.example.com” → “端口：:8080” → “路径：/articles/1234.html” → “查询参数：?q=keyword&page=2”。
片段标识符（Fragment Identifier）：
用一个“#”表示片段标识符的开始，后面跟着一个标识符，如“section3”。
例如：“协议：https” → “主机：www.example.com” → “端口：:8080” → “路径：/articles/1234.html” → “查询参数：?q=keyword&page=2” → “片段标识符：#section3”。

输入网址

用户在浏览器地址栏输入网址（例如：https://www.example.com）后，浏览器首先会检查自身的缓存。如果之前访问过该网址且相关域名信息仍在缓存有效期内，就可以直接获取域名对应的IP地址。

如果浏览器缓存中没有，会查询操作系统的hosts文件。这个文件可以手动配置域名和IP地址的映射关系，如果存在匹配项，就可以得到IP地址。

DNS查询（如果hosts文件中没有）

如果浏览器缓存和hosts文件都无法提供对应的IP地址，就会进行DNS（Domain Name System）查询。浏览器会向本地DNS服务器（通常由网络服务提供商提供）发送请求。

本地DNS服务器如果有该域名对应的IP地址缓存，就会直接返回给浏览器。如果没有，本地DNS服务器会向根域名服务器查询。根域名服务器根据请求中的顶级域名（如.com、.org等）指示本地DNS服务器向对应的顶级域名服务器查询。

顶级域名服务器再根据二级域名（如www）指示本地DNS服务器向负责该域名的权威DNS服务器查询，最终从权威DNS服务器获取到域名对应的IP地址，并将其缓存到本地DNS服务器以便后续查询，同时返回给浏览器。

DNS查询

根服务器

IPv4 根域名服务器共有 13 个逻辑根服务器（以 A - M 标识），它们由不同的组织运营。但实际上为了提高性能、可靠性和应对流量负载，每个逻辑根服务器可能有多个镜像站点分布在世界各地。这些根服务器主要由美国等发达国家的相关机构和组织管理运营，例如其中一些由美国的互联网名称与数字地址分配机构（ICANN）等进行管理。

IPv6 根域名服务器同样遵循 DNS 的分层解析架构。在全球范围内也有一定数量的根服务器分布。其分布和运营也注重可靠性和性能保障，以满足日益增长的 IPv6 网络应用需求。目前，很多 IPv4 根域名服务器的运营组织也在积极参与 IPv6 根域名服务器的建设和运营，同时也有更多国家和组织参与到 IPv6 根域名服务器相关的工作中来，以适应全球 IPv6 网络发展的趋势。

二、建立HTTP连接

TCP连接建立（基于HTTP协议）

浏览器得到IP地址后，根据网址中的协议（如HTTP或HTTPS），如果是HTTP协议，会使用TCP（Transmission Control Protocol）协议与目标服务器建立连接。这一过程遵循TCP的三次握手原则。

浏览器首先向服务器发送一个SYN（同步）包，包含一个随机生成的初始序列号。服务器收到后，回复一个SYN - ACK（同步 - 确认）包，其中包含服务器自己的初始序列号和对浏览器SYN包的确认号。最后，浏览器再发送一个ACK（确认）包给服务器，至此TCP连接建立成功。

TCP 三次握手

对于建链接的3次握手，主要是要初始化Sequence Number 的初始值。通信的双方要互相通知对方自己的初始化的Sequence Number（缩写为ISN：Inital Sequence Number）——所以叫SYN，全称Synchronize Sequence Numbers。也就上图中的 x 和 y。这个号要作为以后的数据通信的序号，以保证应用层接收到的数据不会因为网络上的传输的问题而乱序（TCP会用这个序号来拼接数据）。

SSL/TLS握手（基于HTTPS协议）

如果是HTTPS协议，在TCP连接建立之后，还需要进行SSL/TLS（Secure Sockets Layer/Transport Layer Security）握手。这一过程用于在浏览器和服务器之间建立加密通道，确保数据传输的安全性。

浏览器向服务器发送客户端Hello消息，包含支持的SSL/TLS版本、加密算法等信息。服务器根据自身支持情况回复服务器Hello消息，确定使用的SSL/TLS版本和加密算法，并发送服务器证书给浏览器。浏览器验证服务器证书的有效性，然后生成一个随机的主密钥，并使用服务器证书中的公钥进行加密发送给服务器。服务器使用自己的私钥解密得到主密钥，之后双方使用主密钥生成会话密钥，用于后续的数据加密和解密。

三、发送HTTP请求

连接建立后，浏览器根据用户的操作（如访问网页、提交表单等）向服务器发送HTTP请求。请求包含请求方法（如GET、POST等）、请求路径（如/index.html）、HTTP版本以及请求头（包含浏览器类型、接受的内容类型等信息）和可能的请求体（如POST请求中的表单数据）。

服务器接收到请求后，根据请求的内容进行处理。例如，如果是请求一个网页文件，服务器会查找对应的文件资源。如果请求需要查询数据库，服务器会与数据库进行交互获取相关数据。

服务器处理完请求后，向浏览器发送HTTP响应。响应包含HTTP版本、状态码（如200表示成功、404表示未找到资源等）、响应头（包含服务器类型、内容类型、内容长度等信息）和响应体（如网页的HTML内容）。

常见HTTP状态码

状态码范围	状态码	含义
1xx - 信息性状态码	100 Continue	客户端可继续发送请求。
1xx - 信息性状态码	101 Switching Protocols	服务器切换协议。
2xx - 成功状态码	200 OK	请求成功，返回资源。
2xx - 成功状态码	201 Created	创建新资源成功。
2xx - 成功状态码	204 No Content	请求成功但无内容返回。
3xx - 重定向状态码	301 Moved Permanently	资源永久移动。
3xx - 重定向状态码	302 Found	资源临时移动。
3xx - 重定向状态码	304 Not Modified	资源未修改，使用缓存。
4xx - 客户端错误状态码	400 Bad Request	请求有语法错误。
4xx - 客户端错误状态码	401 Unauthorized	未认证。
4xx - 客户端错误状态码	403 Forbidden	已认证但无权限。
4xx - 客户端错误状态码	404 Not Found	资源未找到。
5xx - 服务器错误状态码	500 Internal Server Error	服务器内部错误。
5xx - 服务器错误状态码	502 Bad Gateway	网关错误。
5xx - 服务器错误状态码	503 Service Unavailable	服务不可用。
5xx - 服务器错误状态码	504 Gateway Time-out	网关超时。

四、网页渲染

浏览器收到响应后，开始解析HTML（HyperText Markup Language）内容。浏览器根据HTML标签构建DOM（Document Object Model）树，将HTML文档中的各个元素表示为DOM节点，如<html>是根节点，<body>、<head>等是其子节点，每个节点包含标签名、属性和子节点等信息。

在解析HTML的过程中，如果遇到外部资源的引用，如<link>标签引用的CSS（Cascading Style Sheets）文件、<script>标签引用的JavaScript文件、<img>标签引用的图片等，浏览器会再次发起请求去获取这些资源。

浏览器根据DOM树和加载的CSS文件构建CSSOM（CSS Object Model）树，然后将DOM树和CSSOM树合并成渲染树（Render Tree）。渲染树只包含需要显示的节点（例如，<head>中的一些元素可能不需要显示，不会包含在渲染树中）。

浏览器根据渲染树进行布局（Layout），确定每个节点在页面中的位置和大小。最后，浏览器进行绘制（Paint）操作，将各个节点绘制到屏幕上，显示出网页内容。