FunEnn

Appearance

输入 URL 回车到页面展示中间发生了什么？

  1. 浏览器缓存 —— 系统缓存 —— 路由器缓存 有缓存 显示页面内容
  2. http 请求前的 dns ip地址
  3. tcp连接 三次握手
  4. 握手成功 浏览器发送http请求 请求数据包
  5. 服务器收到请求 返回数据到浏览器
  6. http响应
  7. 读取页面内容 渲染 解析html源码
  8. 生成 dom 树 解析 css 样式 js 交互 渲染显示页面

1. URL 解析 ​

当你输入一个 URL 并按下回车后，浏览器首先会对 URL 进行解析。URL 通常由以下几部分组成：

  • 协议（例如 https）
  • 域名（例如 www.example.com）
  • 路径（例如 /page1）
  • 查询参数（例如 ?id=123）
  • 端口号（例如 :443，如果没有显式指定端口号，http 默认使用端口 80，https 默认使用端口 443）

2. DNS 解析 ​

浏览器需要将域名（如 www.example.com）解析为 IP 地址，这是通过 DNS（域名系统）进行的。解析过程如下：

  1. 浏览器缓存: 浏览器首先会检查缓存中是否有该域名的 IP 地址记录。
  2. 操作系统缓存: 如果浏览器缓存中没有找到，操作系统会检查其本地缓存。
  3. 本地域名服务器: 如果操作系统缓存也没有找到，操作系统会将请求发送到本地的 DNS 服务器（通常由 ISP 提供），本地 DNS 服务器会查询更上一级的 DNS 服务器，直到找到该域名对应的 IP 地址。
  4. 返回 IP 地址: 一旦找到对应的 IP 地址，DNS 服务器会将结果返回给浏览器。

3. TCP 连接建立 ​

在获取到目标服务器的 IP 地址后，浏览器会与该 IP 地址建立 TCP 连接。这是通过三次握手（TCP Three-way Handshake）来实现的：

  1. SYN: 浏览器（客户端）发送一个 SYN（同步序列编号）包给服务器，表示请求建立连接。
  2. SYN-ACK: 服务器收到请求后，返回一个 SYN-ACK（同步序列编号 - 确认）包，表示同意建立连接。
  3. ACK: 浏览器发送一个 ACK（确认）包，确认连接建立。

一旦三次握手完成，TCP 连接就建立起来了。

4. TLS/SSL 握手（仅 HTTPS） ​

如果你访问的是一个 HTTPS 网站，还会有一个额外的 TLS/SSL 握手过程，用于确保通信的安全性：

  1. 浏览器发送 ClientHello: 浏览器向服务器发送 ClientHello 消息，其中包含支持的加密算法和随机数。
  2. 服务器响应 ServerHello: 服务器响应 ServerHello 消息，选择加密算法，并发送数字证书给客户端。
  3. 验证证书: 浏览器验证服务器的数字证书是否合法。如果合法，生成一个随机的会话密钥，并使用服务器的公钥对其加密，然后发送给服务器。
  4. 加密通信: 服务器使用自己的私钥解密会话密钥，之后双方通过这个会话密钥加密通信内容。

5. HTTP 请求 ​

连接建立后，浏览器会发送 HTTP 请求来获取网页资源。这包括以下内容：

  1. 构建请求行: 浏览器构建请求行，通常包括方法（如 GET）、URL 路径和协议版本（如 HTTP/1.1）。
  2. 请求头: 包括浏览器类型、语言、Cookie 等信息。
  3. 发送请求: 浏览器通过 TCP 连接将请求发送给服务器。

6. 服务器处理请求 ​

服务器接收到 HTTP 请求后，会根据请求路径和方法（如 GET 或 POST）处理请求，通常包括以下步骤：

  1. 解析请求: 服务器解析请求行和请求头，了解客户端的需求。
  2. 资源查找: 服务器根据 URL 路径查找对应的资源（如 HTML 文件、图片、视频等）。
  3. 执行动态代码: 如果是动态内容（如通过 PHP、Node.js 生成的页面），服务器会执行相应的脚本，生成响应内容。
  4. 生成响应: 服务器生成 HTTP 响应，包括状态码（如 200 OK、404 Not Found）、响应头和响应体（即网页内容）。

7. 浏览器接收响应并渲染 ​

浏览器接收到服务器的响应后，会进行以下操作：

  1. 解析响应: 浏览器解析 HTTP 响应，提取状态码、响应头和响应体。
  2. 根据状态码进行处理
    • 200: 请求成功，继续处理响应体。
    • 301/302: 重定向，根据 Location 头中的 URL 重新发起请求。
    • 404: 资源未找到，显示错误页面。
    • 500: 服务器内部错误，显示错误页面。
  3. 解析 HTML: 如果响应的是 HTML 内容，浏览器会解析 HTML，并构建 DOM 树。
  4. 处理 CSS: 解析 HTML 过程中遇到 CSS 文件，会下载并解析，构建 CSSOM 树。
  5. 执行 JavaScript: 解析 HTML 过程中遇到 JavaScript 文件，下载并执行。
  6. 渲染页面: 浏览器将 DOM 树和 CSSOM 树结合，生成渲染树（Render Tree），并将渲染树的内容绘制到屏幕上。

8. 加载其他资源 ​

在解析 HTML 的过程中，浏览器还会发现其他资源（如图片、视频、字体等），并为每个资源发起单独的 HTTP 请求。加载这些资源可能会引起页面的重新渲染（reflow/repaint）。

9. 保持连接或断开连接 ​

在 HTTP/1.1 中，默认开启了持久连接（Persistent Connection），即浏览器和服务器可以在同一个 TCP 连接上进行多次请求响应交换。这减少了开销并提高了性能。请求完成后，浏览器可能会保持连接一段时间，或者根据 Connection: close 头信息来关闭连接。

10. 缓存 ​

浏览器会根据响应头中的缓存控制信息（如 Cache-Control、Expires）决定是否将资源缓存到本地。对于下次相同资源的请求，浏览器可能会直接从缓存中加载，从而提升速度。

发生了什么 | 前端那些事儿 (jonny-wei.github.io)