从输入 URL 到页面显示：深入解析浏览器加载过程

heromps

于 2024-08-20 10:32:19 发布

阅读量393

点赞数 3

分类专栏： Springboot 文章标签：计算机网络

本文链接：https://blog.csdn.net/heromps/article/details/141351619

版权

Springboot 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

从输入 URL 到页面显示：深入解析浏览器加载过程

在日常使用浏览器访问网页时，我们往往只需输入一个 URL，按下回车，页面便会迅速呈现在眼前。看似简单的操作背后，实际上涉及一系列复杂的步骤和技术。本文将带你深入解析这一过程，从输入 URL 到最终页面显示，涵盖 DNS 解析、TCP 连接、HTTP 请求与响应、页面渲染等关键环节。

1. URL 输入与解析

一切都始于浏览器地址栏的 URL 输入。当你在地址栏输入一个 URL（例如 https://www.example.com）并按下回车，浏览器会对这个 URL 进行解析，确定访问的协议、域名、路径等信息。URL 的结构通常包含以下部分：

协议（Protocol）：如 https 或 http，指明要使用的传输协议。
域名（Domain Name）：如 www.example.com，标识你要访问的服务器。
路径（Path）：如 /index.html，指向特定资源的位置。
查询参数（Query Parameters）：如 ?id=123，提供附加的请求信息。
锚点（Fragment）：如 #section1，定位页面内的某个部分。

2. DNS 解析：找到服务器的 IP 地址

在解析出域名后，浏览器需要将其转换为对应的 IP 地址，这个过程称为 DNS 解析。DNS（域名系统）负责将用户友好的域名翻译为计算机可识别的 IP 地址。DNS 解析过程如下：

浏览器缓存：首先查询本地缓存，看是否已存有该域名的 IP 地址。
操作系统缓存：如果浏览器缓存未命中，则查询操作系统的 DNS 缓存。
本地域名服务器查询：若系统缓存也未命中，浏览器会向配置的 DNS 服务器发起查询。
递归查询：本地域名服务器可能会递归查询多个服务器，直到找到正确的 IP 地址。
返回 IP 地址：最终，IP 地址返回给浏览器，用于后续的连接建立。

3. 建立 TCP 连接：三次握手

获得 IP 地址后，浏览器会与服务器建立一个 TCP 连接。TCP（传输控制协议）是确保数据可靠传输的核心协议。建立连接的过程被称为“三次握手”：

客户端发送 SYN：浏览器向服务器发送一个 SYN 包，请求建立连接。
服务器响应 SYN-ACK：服务器收到请求后，回复一个 SYN-ACK 包。
客户端发送 ACK：浏览器确认连接，发送 ACK 包，连接建立完成。

4. 发送 HTTP 请求：请求页面资源

TCP 连接建立后，浏览器会向服务器发送 HTTP 请求，获取页面资源。一个典型的 HTTP 请求包含请求行、请求头以及可选的请求体。以请求主页为例：

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36
Accept: text/html

5. 服务器处理请求并返回响应：交付页面内容

服务器接收到请求后，会处理请求内容并生成响应。HTTP 响应由状态行、响应头和响应体组成，其中响应体包含实际的页面内容，如 HTML、CSS、JavaScript 等资源。例如，服务器返回的响应可能如下：

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 4572

<html>
<head>
<title>Example Domain</title>
</head>
<body>
<h1>Example Domain</h1>
<p>This domain is for use in illustrative examples in documents.</p>
</body>
</html>