url输入到网页展示会发生什么？

第 1 步：URL 解析与缓存检查 (浏览器内部准备)

在你按下回车键之前，浏览器就已经开始工作了。

1. 解析 URL: 浏览器首先会解析你输入的 URL，拆解出几个关键部分：

   • https：协议 (Protocol)，告诉浏览器要用安全的方式去访问。
   • www.google.com：域名 (Domain Name)，即我们要访问的服务器的名字。
   • / (隐含的)：路径 (Path)，请求服务器上的哪个资源。

2. 检查缓存 (HSTS 和 强缓存) :

   • HSTS 检查: 浏览器会检查 google.com 是否在 HSTS (HTTP Strict Transport Security) 列表中。如果在，浏览器会强制使用 HTTPS 进行连接，即使你输入的是 http://。
   • 强缓存检查: 浏览器会查看自己的本地缓存，看之前是否访问过这个页面，并且页面尚未过期 (Expires / Cache-Control)。如果缓存有效，浏览器会直接从本地硬盘读取页面内容，跳过后面大部分网络步骤，直接进入第 6 步渲染。这是最快的情况。

第 2 步：DNS 域名解析 (找到服务器的 IP 地址)

如果缓存中没有，浏览器就需要知道 www.google.com 这台服务器在哪。计算机网络通信靠的是 IP 地址 (比如 172.217.160.100)，而不是域名。DNS (Domain Name System) 就是一个将域名翻译成 IP 地址的"电话簿"。

查找过程是分层级的：

1. 浏览器 DNS 缓存: 浏览器先看自己的缓存里有没有记录。
2. 操作系统 DNS 缓存: 如果浏览器没有，就去看操作系统的缓存 (包括 hosts 文件)。
3. 路由器 DNS 缓存: 如果还没有，请求会发到你的路由器，路由器也有自己的缓存。
4. ISP DNS 服务器: 如果路由器也没有，就会请求你的网络服务提供商 (ISP，比如中国电信、中国移动) 的 DNS 服务器。
5. 根域名服务器: 如果 ISP 服务器也没有，它会向全球的根域名服务器查询，根服务器会告诉它去哪个顶级域 (.com) 服务器查询。
6. 顶级域服务器: .com 服务器会告诉它去哪个权威域名服务器 (Google 自己的) 查询。
7. 权威域名服务器 : 最终，Google 的权威服务器会告诉 ISP 服务器 www.google.com 对应的 IP 地址。

这个 IP 地址随后会被各级缓存起来，以便下次快速访问。

第 3 步：建立 TCP 连接 (三次握手)

拿到了服务器的 IP 地址，浏览器就可以和服务器建立连接了。HTTP 协议是基于 TCP 协议的，TCP 是一种可靠的、面向连接的协议。

建立连接的过程被称为"三次握手" (Three-way Handshake)，确保双方都准备好了通信：

1. 客户端 -> 服务器: "你好，我想和你建立连接，可以吗？" (发送 SYN 包)
2. 服务器 -> 客户端: "可以，我准备好了，你呢？" (发送 SYN+ACK 包)
3. 客户端 -> 服务器: "我也准备好了，我们开始通信吧！" (发送 ACK 包)

握手成功后，一条可靠的连接通道就建立了。

第 4 步：TLS 握手 (如果是 HTTPS)

因为我们访问的是 https，所以在 TCP 连接建立后，还需要进行 TLS (Transport Layer Security) 握手，来建立一条加密通道，保证数据传输的安全。

这个过程比较复杂，简单来说：

1. 客户端向服务器发送支持的加密算法。
2. 服务器选择一套加密算法，并把自己的数字证书 (包含了公钥) 发给客户端。
3. 客户端验证证书的合法性 (由受信任的 CA 机构签发)。
4. 验证通过后，客户端生成一个随机的"会话密钥"，用服务器的公钥加密后发给服务器。
5. 服务器用自己的私钥解密，得到"会话密钥"。

至此，双方都有了同一个"会话密钥"，之后的所有通信都将用这个密钥进行对称加密。

第 5 步：发送 HTTP 请求

现在，安全通道已经建立，浏览器可以正式向服务器发送 HTTP 请求了。一个典型的 HTTP 请求报文包含：

• 请求行 (Request Line) : GET / HTTP/1.1 (请求方法、路径、协议版本)

• 请求头 (Headers) : 包含浏览器信息、接受的数据类型、Cookie 等。

  • Host: www.google.com
  • User-Agent: Mozilla/5.0 ...
  • Accept: text/html,...
  • Cookie: ...

• 请求体 (Body) : 对于 GET 请求，请求体为空。如果是 POST 请求，这里会包含提交的数据。

第 6 步：服务器处理请求并返回响应

服务器 (比如 Nginx, Apache) 接收到请求后：

1. 处理请求: 服务器会根据请求的路径和参数，执行相应的后端逻辑 (比如查询数据库、调用 API 等)。

2. 构建响应: 服务器将处理结果构建成一个 HTTP 响应报文。

   • 状态行 (Status Line) : HTTP/1.1 200 OK (协议版本、状态码、状态描述)。常见的状态码有 200 OK (成功), 301 Moved Permanently (重定向), 404 Not Found (未找到), 500 Internal Server Error (服务器错误)。

   • 响应头 (Headers) : 包含响应的元数据，如内容类型、缓存策略等。

     • Content-Type: text/html; charset=UTF-8
     • Cache-Control: public, max-age=...
     • Set-Cookie: ...

   • 响应体 (Body) : 实际的页面内容，通常是 HTML 代码。

服务器将这个响应报文通过 TCP 连接发送回浏览器。

第 7 步：浏览器渲染页面

浏览器收到服务器的响应后，就开始了将代码变成页面的神奇过程。

1. 解析 HTML，构建 DOM 树: 浏览器从上到下解析 HTML 代码，生成一个树状结构的对象模型，称为 DOM (Document Object Model)。
2. 解析 CSS，构建 CSSOM 树: 在解析 HTML 的过程中，如果遇到 CSS 链接 () 或样式代码 ()，浏览器会去下载并解析 CSS，生成一个 CSSOM (CSS Object Model) 树，它描述了所有元素的样式。
3. 构建渲染树 (Render Tree) : 浏览器将 DOM 树和 CSSOM 树结合起来，生成渲染树。渲染树只包含需要显示的节点以及它们的样式信息 (比如 display: none 的节点就不会出现在渲染树中)。
4. 布局 (Layout/Reflow) : 浏览器根据渲染树计算出每个节点在屏幕上的确切位置和大小。这个过程也叫"回流"。
5. 绘制 (Painting/Repaint) : 浏览器调用 GPU，将计算好的布局信息绘制到屏幕上，我们就看到了五彩斑斓的页面。
6. 加载其他资源 : 在解析 HTML 时，如果遇到图片 ()、JavaScript (

至此，整个流程结束，用户看到了完整的页面。

总结流程图

用户输入 URL
    |
    v
浏览器检查缓存 (强缓存)
    |
    +-- 缓存命中 --> 直接渲染页面 (结束)
    |
    v
DNS 解析 (获取 IP 地址)
    |
    v
建立 TCP 连接 (三次握手)
    |
    v
(如果是 HTTPS) TLS 握手
    |
    v
发送 HTTP 请求
    |
    v
服务器处理请求并返回 HTTP 响应
    |
    v
浏览器接收响应
    |
    v
浏览器渲染页面 (解析 HTML/CSS -> 构建 DOM/CSSOM -> 渲染树 -> 布局 -> 绘制)
    |
    v
页面展示完成