从在浏览器输入URL到页面展示，整个过程是怎样的？

从在浏览器输入URL到页面展示的整个过程

概述

从在浏览器输入URL到页面展示，整个过程可以分为以下几个主要阶段：

URL解析
DNS域名解析
建立TCP连接
发送HTTP请求
服务器处理请求并返回响应
浏览器解析渲染页面
连接结束

下面我们将详细探讨每个阶段的具体过程。

1. URL解析

当用户在浏览器地址栏输入URL并按下回车后，浏览器首先会对URL进行解析。

URL（Uniform Resource Locator）的基本结构如下：

协议://主机名:端口号/路径?查询参数#片段标识符

浏览器会解析URL的各个部分：

协议：确定使用的通信协议，如HTTP、HTTPS等
主机名：确定要访问的服务器地址
端口号：确定服务器上的特定服务（HTTP默认80端口，HTTPS默认443端口）
路径：确定服务器上的资源位置
查询参数：传递给服务器的额外参数
片段标识符：指定资源中的特定部分

2. DNS域名解析

浏览器需要通过DNS（Domain Name System）将域名解析为IP地址，因为网络通信需要IP地址而不是域名。

DNS解析过程如下：

浏览器缓存：首先检查浏览器缓存中是否有该域名对应的IP地址
操作系统缓存：如果浏览器缓存中没有，则检查操作系统的hosts文件和缓存
路由器缓存：如果操作系统缓存中没有，则检查路由器的缓存
ISP DNS缓存：如果本地缓存都没有，则向ISP（互联网服务提供商）的DNS服务器发送请求
根域名服务器：如果ISP DNS服务器没有缓存，它会向根域名服务器发起请求
顶级域名服务器：根域名服务器返回顶级域名服务器的地址
权威域名服务器：顶级域名服务器返回权威域名服务器的地址
获取IP地址：权威域名服务器返回域名对应的IP地址

这个过程称为递归查询，可能涉及多个DNS服务器的交互。

--- title: DNS域名解析过程 --- sequenceDiagram participant Browser as 浏览器 participant OS as 操作系统 participant Router as 路由器 participant ISP as ISP DNS服务器 participant Root as 根域名服务器 participant TLD as 顶级域名服务器 participant Authoritative as 权威域名服务器 Browser->>OS: 查询hosts文件和缓存 OS-->>Browser: 返回IP（如果有） alt 未找到IP OS->>Router: 查询路由器缓存 Router-->>OS: 返回IP（如果有） alt 未找到IP OS->>ISP: 发送DNS请求 ISP->>Root: 查询根域名服务器 Root-->>ISP: 返回TLD地址 ISP->>TLD: 查询顶级域名服务器 TLD-->>ISP: 返回权威域名服务器地址 ISP->>Authoritative: 查询权威域名服务器 Authoritative-->>ISP: 返回IP地址 ISP-->>OS: 返回IP地址 OS-->>Browser: 返回IP地址 end end

3. 建立TCP连接

获取到服务器的IP地址后，浏览器会与服务器建立TCP连接。这个过程通常使用TCP三次握手：

第一次握手：浏览器向服务器发送一个SYN（同步）包，其中包含一个随机序列号
第二次握手：服务器收到SYN包后，回复一个SYN-ACK包，其中包含确认号（浏览器序列号+1）和自己的随机序列号
第三次握手：浏览器收到SYN-ACK包后，发送一个ACK（确认）包，其中包含确认号（服务器序列号+1）

完成三次握手后，TCP连接建立成功，浏览器和服务器可以开始传输数据。

--- title: TCP三次握手过程 --- sequenceDiagram participant Browser as 浏览器 participant Server as 服务器 Browser->>Server: SYN (seq=x) Server-->>Browser: SYN-ACK (seq=y, ack=x+1) Browser->>Server: ACK (ack=y+1) Note over Browser,Server: TCP连接建立成功

如果使用HTTPS协议，还需要进行TLS握手，建立安全的加密连接：

客户端Hello：浏览器发送支持的TLS版本、加密算法等信息
服务器Hello：服务器选择TLS版本和加密算法，并发送数字证书
证书验证：浏览器验证服务器的数字证书
密钥交换：浏览器生成随机密钥，使用服务器证书中的公钥加密后发送给服务器
完成握手：服务器解密获取密钥，双方使用该密钥进行对称加密通信

4. 发送HTTP请求

TCP连接建立后，浏览器会发送HTTP请求。HTTP请求由三部分组成：

请求行：包含请求方法（GET、POST等）、请求路径和HTTP版本
请求头：包含关于请求的附加信息，如User-Agent、Accept、Cookie等
请求体：对于POST、PUT等方法，包含发送给服务器的数据

示例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/91.0.4472.124 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Cookie: session_id=abc123

5. 服务器处理请求并返回响应

服务器接收到HTTP请求后，会进行处理并返回HTTP响应。处理过程可能包括：

请求解析：解析HTTP请求的各个部分
验证授权：检查用户是否有权限访问请求的资源
处理请求：根据请求方法和路径执行相应的操作
- 对于静态资源，直接读取文件系统中的文件
- 对于动态内容，可能需要执行服务器端程序（如PHP、Node.js、Java等）
生成响应：构建HTTP响应，包括状态码、响应头和响应体
发送响应：将HTTP响应发送回浏览器

HTTP响应也由三部分组成：

状态行：包含HTTP版本、状态码和状态描述
响应头：包含关于响应的附加信息，如Content-Type、Content-Length、Set-Cookie等
响应体：包含实际的响应数据（如HTML、CSS、JavaScript、图片等）

示例HTTP响应：

HTTP/1.1 200 OK
Date: Mon, 23 May 2022 12:00:00 GMT
Server: Apache/2.4.1 (Unix)
Content-Type: text/html; charset=UTF-8
Content-Length: 1234
Connection: keep-alive
Set-Cookie: session_id=abc123; Path=/; Expires=Wed, 22 Jun 2022 12:00:00 GMT

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

6. 浏览器解析渲染页面

浏览器接收到HTTP响应后，会开始解析和渲染页面。这是一个复杂的过程，包括以下几个主要步骤：

6.1 解析HTML构建DOM树

浏览器首先会解析HTML文档，构建DOM（Document Object Model）树。DOM树是文档的内存表示，由节点和对象组成，表示文档的结构和内容。

解析过程是增量的，浏览器会一边接收HTML文档一边进行解析，而不需要等待整个文档下载完成。

--- title: DOM树构建示例 --- graph TD A["Document"] --> B["html"] B --> C["head"] B --> D["body"] C --> E["title"] E --> F["Example Page"] D --> G["h1"] G --> H["Hello, World!"]

6.2 解析CSS构建CSSOM树

同时，浏览器会解析CSS文件和样式标签，构建CSSOM（CSS Object Model）树。CSSOM树是CSS样式的内存表示，包含所有样式规则和选择器。

--- title: CSSOM树构建示例 --- graph TD A["CSSOM"] --> B["body"] B --> C["font-size: 16px"] B --> D["color: #333"] A --> E["h1"] E --> F["font-size: 24px"] E --> G["color: #0066cc"] E --> H["margin: 10px 0"]

6.3 执行JavaScript

浏览器在解析HTML过程中，如果遇到<script>标签，会立即执行JavaScript代码（除非使用了async或defer属性）。JavaScript的执行可能会修改DOM树和CSSOM树。

6.4 构建渲染树

浏览器将DOM树和CSSOM树结合，构建渲染树（Render Tree）。渲染树包含需要显示的节点及其样式信息。

--- title: 渲染树构建过程 --- graph TD subgraph DOM树 A["DOM树"] --> B["html"] B --> C["head"] B --> D["body"] D --> E["h1"] end subgraph CSSOM树 F["CSSOM树"] --> G["body {font-size: 16px; color: #333;}"] F --> H["h1 {font-size: 24px; color: #0066cc; margin: 10px 0;}"] end subgraph 渲染树 I["渲染树"] --> J["body - font-size: 16px; color: #333;"] J --> K["h1 - font-size: 24px; color: #0066cc; margin: 10px 0;"] end A --> I F --> I

6.5 布局（Layout/Reflow）

浏览器根据渲染树计算每个节点的几何信息（位置和大小），这个过程称为布局或重排（Reflow）。

布局从根节点开始，递归计算所有节点的几何信息。布局是一个相对耗时的操作，特别是对于复杂的页面。

6.6 绘制（Paint）

浏览器根据渲染树和布局信息，将页面内容绘制到屏幕上。这个过程称为绘制（Paint）。

绘制可能包括多个步骤：

绘制文本、颜色、图像、边框等
合成层（Compositing）：将页面分成多个层，分别绘制后合成，提高性能

--- title: 浏览器渲染流程 --- flowchart TD A["HTML"] --> B["解析HTML"] B --> C["构建DOM树"] D["CSS"] --> E["解析CSS"] E --> F["构建CSSOM树"] G["JavaScript"] --> H["执行JS"] H --> C H --> F C --> I["构建渲染树"] F --> I I --> J["布局/重排"] J --> K["绘制"] K --> L["显示页面"]

6.7 处理资源加载

在解析HTML过程中，浏览器会发现需要加载的其他资源（如图片、CSS、JavaScript、字体等），并会发起额外的HTTP请求来获取这些资源。

浏览器对资源加载有一定的优化策略：

域名并行连接限制：浏览器对同一域名的并行连接数有限制（通常为6个）
资源优先级：浏览器会根据资源类型和位置分配不同的优先级
预加载：通过<link rel="preload">等机制提前加载关键资源

7. 连接结束

页面加载完成后，连接可能会根据HTTP头部的Connection字段决定是否保持打开状态：

Connection: keep-alive：保持TCP连接打开，以便后续请求复用，减少延迟
Connection: close：关闭TCP连接

现代浏览器默认使用持久连接（keep-alive），以提高性能。

性能优化考虑

了解从URL输入到页面展示的整个过程，有助于我们进行Web性能优化：

DNS解析优化：
- 使用DNS预解析：<link rel="dns-prefetch" href="//example.com">
- 减少域名数量，减少DNS查询
TCP连接优化：
- 使用HTTP/2或HTTP/3，减少连接建立开销
- 使用持久连接，避免重复建立连接
HTTP请求优化：
- 减少HTTP请求数量
- 使用资源合并（如CSS Sprites、文件合并）
- 使用资源压缩（如Gzip、Brotli）
- 使用缓存策略（如Cache-Control、ETag）
渲染优化：
- 优化CSS选择器，减少匹配时间
- 避免不必要的重排和重绘
- 使用will-change或transform等属性创建独立的渲染层
- 延迟加载非关键资源（懒加载）
JavaScript执行优化：
- 使用async或defer属性异步加载JavaScript
- 将JavaScript放在</body>前，避免阻塞渲染
- 避免长时间运行的JavaScript任务

总结

从在浏览器输入URL到页面展示，整个过程涉及多个复杂步骤，包括URL解析、DNS解析、TCP连接、HTTP请求与响应、DOM构建、CSSOM构建、渲染树构建、布局和绘制等。理解这个过程有助于我们更好地进行Web开发和性能优化。

account_tree

思维导图

Interview AiBoxInterview AiBox — 面试搭档

不只是准备，更是实时陪练

Interview AiBox 在面试过程中提供实时屏幕提示、AI 模拟面试和智能复盘，让你每一次回答都更有信心。

免费下载 Interview AiBoxdownload 查看价格方案sell

AI 助读

一键发送到常用 AI

从在浏览器输入URL到页面展示，整个过程可分为：1) URL解析，识别协议、域名等；2) DNS域名解析，将域名转为IP地址；3) 建立TCP连接，通过三次握手；4) 发送HTTP请求，包含请求行、请求头和请求体；5) 服务器处理请求并返回响应；6) 浏览器解析渲染页面，包括构建DOM树、CSSOM树、渲染树，进行布局和绘制；7) 根据Connection头部决定是否保持连接。整个流程涉及网络通信、协议交互和页面渲染等多个方面，理解此过程对Web性能优化至关重要。

智能总结

深度解读

考点定位

思路启发