URL到Web渲染全过程

Posted on Edited on

1. 用户输入 URL（浏览器发起请求）

  • 用户在浏览器地址栏输入一个 URL，例如 https://www.example.com.
  • 浏览器解析 URL，识别出协议（https://）、域名（www.example.com）和路径（例如 /home）。

2. DNS 解析（域名解析）

  • 浏览器首先需要解析域名 www.example.com 为服务器的 IP 地址。这是通过向 DNS 服务器发送请求完成的。
  • DNS 服务器会返回该域名对应的 IP 地址，如 192.0.2.1。这时，浏览器已经知道如何连接到目标服务器。

3. 建立 TCP 连接（三次握手）

  • 浏览器与目标服务器之间需要建立一个 TCP 连接。这是通过 TCP 协议的“三次握手”完成的：
    1. 浏览器（客户端）向服务器发送一个 SYN 包，表示请求建立连接。
    2. 服务器响应 SYN-ACK 包，表示可以建立连接。
    3. 浏览器再次响应 ACK 包，表示确认连接建立。
  • 在 HTTPS 连接时，还会进行 TLS/SSL 握手，建立加密连接。

4. 浏览器发送 HTTP 请求

  • 浏览器与服务器建立连接后，发送一个 HTTP 请求到服务器。这通常包括以下内容：
    • 请求方法（如 GET、POST、PUT 等）。
    • 请求头（包含如浏览器类型、缓存控制、Cookies 等信息）。
    • 请求体（例如，POST 请求时，可能包含表单数据）。

例如，一个典型的 GET 请求如下：

1
2
3
4
GET /home HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html

5. 服务器处理请求

  • 服务器接收到 HTTP 请求后，首先根据 URL 路径（如 /home）来决定如何处理请求。
  • Web 服务器（如 Nginx, Apache）：负责将请求转发给应用服务器或静态文件服务器，并返回响应。
  • 应用服务器（如 Node.js, Django, Ruby on Rails）：
    • 如果 URL 需要动态处理（如查询数据库、调用 API 等），应用服务器会根据路由和控制器逻辑处理请求。
    • 如果是静态资源（如图片、CSS、JS 文件等），Web 服务器或应用服务器直接返回静态文件。

6. 应用服务器执行业务逻辑

  • 例如，在 Node.js 应用中，服务器可能会：
    1. 解析查询参数或请求体。
    2. 访问数据库，获取数据（例如从数据库中查询用户信息）。
    3. 执行某些业务逻辑，可能包括身份验证、授权等。
    4. 生成 HTML 或 JSON 响应并返回给浏览器。

假设使用 React 的 SPA（单页面应用）时，应用服务器可能返回一个包含初始 HTML 和嵌入的 JavaScript 文件的响应。

7. 返回 HTTP 响应

  • 服务器在处理完请求后，将 HTTP 响应返回给浏览器，响应通常包括：
    • 响应状态码（如 200 表示成功，404 表示未找到，500 表示服务器错误等）。
    • 响应头（包括服务器信息、缓存策略、内容类型等）。
    • 响应体（如 HTML、JSON、图片等数据）。

例如，一个典型的响应如下：

1
2
3
4
5
6
7
8
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234

<html>
  <head><title>Home Page</title></head>
  <body><h1>Welcome to Home Page</h1></body>
</html>

8. 浏览器渲染页面

  • 解析 HTML：浏览器开始解析返回的 HTML 内容，构建 DOM 树（Document Object Model）。

  • 下载并解析 CSS：如果 HTML 中包含 CSS 文件，浏览器会发送请求获取这些 CSS 文件，并根据 CSS 规则构建 CSSOM（CSS Object Model）。

  • 执行 JavaScript：如果 HTML 中有 <script> 标签或内联 JavaScript，浏览器会执行这些 JavaScript 代码。JavaScript 可能会修改 DOM、操作样式或发起异步请求。

    对于 React 等前端框架，JavaScript 会执行应用程序的逻辑，可能会进行路由管理、数据请求等操作。

    • 如果是 SPA（如 React、Vue），浏览器将仅加载一次 HTML 文件，之后通过 AJAX 请求动态加载数据，并更新视图。

9. 页面呈现（显示内容）

  • 浏览器根据解析的 DOM 树和 CSSOM，生成渲染树，并绘制最终的页面内容。
  • 在此过程中，浏览器还会处理页面中的资源加载（如图片、视频等），并通过异步请求加载数据（如通过 AJAX 请求 API 接口获取数据）。

对于现代单页面应用（SPA），渲染过程通常是通过 JavaScript 控制的，可能会通过 React、Vue、Angular 等框架来动态渲染页面内容。

10. 完成加载

  • 页面完全加载并呈现给用户，用户可以与页面互动，如点击按钮、填写表单等。
  • 如果有异步请求（如通过 AJAX 或 Fetch 获取数据），这些请求将在页面加载过程中或加载之后继续进行。

DNS 解析说明

  • 用户在浏览器中输入 URL（如 https://www.example.com）。浏览器首先需要从中提取出域名部分（例如 www.example.com）以进行DNS解析。
  • 浏览器或操作系统会先检查本地 DNS 缓存。这个缓存包含了之前查询过的域名和其对应的 IP 地址。如果域名已经缓存并且没有过期，则可以直接使用缓存中的 IP 地址，跳过后续的 DNS 查询步骤。 - 操作系统 DNS 缓存：操作系统（Windows、Linux 等）会有自己的 DNS 缓存，它存储了最近的 DNS 解析结果。 - 浏览器 DNS 缓存：浏览器也会缓存域名解析结果，用于加速后续请求。
  • 如果缓存中存在有效的记录，则直接返回 IP 地址，跳过接下来的步骤。
  • 查询递归 DNS 解析器
  • 递归 DNS 解析器查询根 DNS 服务器
  • 查询 TLD DNS 服务器
  • 查询权威 DNS 服务器
  • 返回最终的 IP 地址

总结：

从用户输入 URL 到页面呈现的过程，可以分为以下几个主要步骤：

  1. 浏览器发起请求：输入 URL → DNS 解析 → TCP 连接。
  2. 服务器处理请求：Web 服务器转发请求 → 应用服务器处理并返回响应。
  3. 浏览器渲染页面：解析 HTML、CSS 和 JS，构建 DOM 树、CSSOM，并最终呈现页面。

在实际开发中，前后端框架（如 React、Vue、Node.js、Django 等）会对这一过程有所优化和改造，但本质流程是类似的。