当我们在浏览器地址栏输入 URL 并敲下回车后，浏览器将经历一系列复杂的步骤来完成从输入 URL 到最终显示网页的过程。这个过程涉及多个网络协议和技术栈，从 URL 解析到 DNS 查询、TCP 连接、HTTP 请求和响应、页面渲染等，整个过程非常复杂且高效。以下是每个步骤的详细讲解，结合实际项目代码示例进行说明。
1. URL 解析
过程：
当用户在浏览器地址栏输入一个 URL 后，浏览器首先解析该 URL 来提取其中的各个部分。URL 的格式通常为：
scheme://host:port/path?query#fragment
- scheme：协议（如
http、https、ftp）。 - host：域名（如
example.com）。 - port：端口号（可选，默认为 80 或 443）。
- path：路径（如
/index.html）。 - query：查询字符串（如
?id=1&name=John）。 - fragment：锚点（如
#section）。
示例：
输入 URL https://www.example.com:443/path/to/resource?id=1#top，浏览器会解析出：
- scheme：
https - host：
www.example.com - port：
443 - path：
/path/to/resource - query：
id=1 - fragment：
top
2. DNS 查询
过程：
浏览器通过域名系统（DNS）将用户输入的域名（如 www.example.com）解析为对应的 IP 地址。这个过程通常包含以下几个步骤：
- 查看浏览器缓存：浏览器会首先查看本地缓存中是否已经有该域名的 IP 地址。
- 查看操作系统缓存：如果浏览器缓存没有，操作系统会检查 DNS 缓存。
- 向 DNS 服务器查询：如果仍然没有找到，浏览器会向配置的 DNS 服务器发送查询请求。
示例：
假设 www.example.com 解析为 93.184.216.34。
如果该域名是通过 DNS 服务器解析的，查询过程可能是：
nslookup www.example.com
返回的结果可能是：
Server: UnKnown
Address: 192.168.1.1
Name: www.example.com
Addresses: 93.184.216.34
3. TCP 连接建立
过程：
一旦获得了 IP 地址，浏览器将与目标服务器建立一个 TCP 连接。TCP 连接的建立遵循三次握手（Three-Way Handshake）的过程：
- SYN：客户端（浏览器）向服务器发送一个同步信号，表示希望建立连接。
- SYN-ACK：服务器收到客户端的请求后，发送一个确认信号，表示愿意建立连接。
- ACK：客户端收到确认后，再次发送确认信号，连接建立完成。
示例（以 Node.js 为例）：
在浏览器与服务器之间建立连接时，客户端与服务器之间的通信通常通过操作系统的网络栈管理：
const net = require