Welcome👋

Appearance

当你在浏览器中键入一个网址并按下回车键到网页显示在屏幕上，期间会发生一系列复杂的过程。以下是一个简要的描述：

1. URL 输入和解析 ​

  • 输入 URL：你在浏览器地址栏中输入一个 URL（例如，http://www.example.com）。
  • 解析 URL：浏览器解析你输入的 URL，将其分成不同的部分，例如协议（http）、域名（www.example.com）、路径（/path）、查询参数等。

2. DNS 解析 ​

  • DNS 查询：浏览器需要将域名转换成 IP 地址。它会首先检查本地缓存，如果没有找到，就会向 DNS 服务器查询。
  • DNS 响应：DNS 服务器返回域名对应的 IP 地址。

3. 建立连接 ​

  • TCP 连接：浏览器使用 IP 地址通过 TCP 协议与服务器建立连接。这个过程称为“三次握手”，包括发送 SYN（同步）包、接收 SYN-ACK（同步确认）包、发送 ACK（确认）包。
  • TLS 握手（如果使用 HTTPS）：如果使用 HTTPS 协议，浏览器和服务器之间会进行 TLS 握手，协商加密算法并交换加密密钥，确保数据传输的安全性。

4. 发送 HTTP 请求 ​

  • 构建请求：浏览器构建一个 HTTP 请求，包括请求行（例如，GET /path HTTP/1.1）、请求头（headers，例如 User-Agent）和可选的请求体（body）。
  • 发送请求：浏览器将构建好的 HTTP 请求发送到服务器。

5. 服务器处理请求 ​

  • 请求处理：服务器接收到请求后，根据 URL 路径和请求头信息处理请求，可能涉及到访问数据库、调用后端逻辑等。
  • 生成响应：服务器生成一个 HTTP 响应，包括状态行（例如，HTTP/1.1 200 OK）、响应头（headers，例如 Content-Type）和响应体（body，通常是 HTML、JSON 等内容）。

6. 发送 HTTP 响应 ​

  • 发送响应：服务器将 HTTP 响应发送回浏览器。

7. 浏览器处理响应 ​

  • 接收响应：浏览器接收到服务器的 HTTP 响应。
  • 解析响应：浏览器解析响应头和响应体，确定内容类型、字符编码等信息。

8. 渲染页面 ​

  • 构建 DOM 树：浏览器解析 HTML 内容，构建 DOM（文档对象模型）树。
  • 构建 CSSOM 树：解析 CSS 内容，构建 CSSOM（CSS 对象模型）树。
  • 渲染树：将 DOM 树和 CSSOM 树结合，生成渲染树。
  • 布局：计算每个元素的位置和大小。
  • 绘制：将元素绘制到屏幕上。

9. 执行 JavaScript ​

  • 解析和执行：浏览器解析和执行页面中的 JavaScript 代码。
  • 处理事件：响应用户交互事件，如点击、输入等。

10. 加载资源 ​

  • 资源请求：如果 HTML 中包含外部资源（如图片、视频、CSS 文件、JavaScript 文件等），浏览器会根据这些资源的 URL 发送额外的 HTTP 请求。
  • 渲染更新：当资源加载完成后，浏览器会更新渲染树并重新绘制页面。

通过这些步骤，最终你在浏览器中看到完整的网页。整个过程通常在几秒钟内完成，但具体时间取决于网络速度、服务器响应时间以及网页的复杂程度。