一个页面从输入URL到页面加载完成都发生了什么

一个页面从输入URL到页面加载完成都发生了什么

从输入 URL 到页面加载完成，浏览器会经历一系列复杂的步骤。以下是这一过程的详细说明：

1. 输入 URL

• 用户在浏览器地址栏输入 URL（如 https://www.example.com）。

2. URL 解析

• 浏览器解析 URL，提取协议（如 https）、域名（如 www.example.com）和路径（如 /index.html）。

3. DNS 查询

• 步骤：

  1. 浏览器检查本地缓存（如浏览器缓存、操作系统缓存）是否有域名对应的 IP 地址。

  2. 如果缓存中没有，浏览器向 DNS 服务器发送查询请求，获取域名对应的 IP 地址。

• 结果：

  • 获取到服务器的 IP 地址（如 93.184.216.34）。

4. 建立 TCP 连接

• 步骤：

  1. 浏览器通过 IP 地址和端口号（默认 443 用于 HTTPS）与服务器建立 TCP 连接。

  2. 如果是 HTTPS，还会进行 TLS 握手，建立加密通道。

• 结果：

  • 建立可靠的网络连接。

5. 发送 HTTP 请求

• 步骤：

  1. 浏览器向服务器发送 HTTP 请求（如 GET /index.html HTTP/1.1）。

  2. 请求头中包含浏览器信息、支持的编码、Cookie 等。

• 结果：

  • 服务器接收到请求并开始处理。

6. 服务器处理请求

• 步骤：

  1. 服务器根据请求路径和参数处理请求。

  2. 如果是静态资源（如 HTML、CSS、JS 文件），服务器直接返回文件内容。

  3. 如果是动态资源（如 PHP、Node.js），服务器执行相关代码并生成响应内容。

• 结果：

  • 服务器生成 HTTP 响应。

7. 返回 HTTP 响应

• 步骤：

  1. 服务器将响应内容（如 HTML 文件）和响应头（如状态码、内容类型）发送给浏览器。

  2. 状态码表示请求结果（如 200 表示成功，404 表示未找到）。

• 结果：

  • 浏览器接收到响应内容。

8. 解析 HTML

• 步骤：

  1. 浏览器解析 HTML 文件，构建 DOM（文档对象模型）树。

  2. 遇到外部资源（如 CSS、JS、图片）时，发起额外的 HTTP 请求。

• 结果：

  • 生成 DOM 树。

9. 解析 CSS

• 步骤：

  1. 浏览器解析 CSS 文件，构建 CSSOM（CSS 对象模型）树。

  2. 将 CSSOM 与 DOM 结合，生成渲染树（Render Tree）。

• 结果：

  • 生成渲染树。

10. 执行 JavaScript

• 步骤：

  1. 浏览器解析并执行 JavaScript 代码。

  2. JavaScript 可能会修改 DOM 或 CSSOM，触发重新渲染。

• 结果：

  • 页面内容可能动态更新。

11. 布局（Layout）

• 步骤：

  1. 浏览器根据渲染树计算每个元素的位置和大小。

  2. 确定页面的布局结构。

• 结果：

  • 生成布局信息。

12. 绘制（Paint）

• 步骤：

  1. 浏览器将布局信息转换为屏幕上的像素。

  2. 绘制页面的可视内容。

• 结果：

  • 页面内容显示在屏幕上。

13. 页面加载完成

• 步骤：

  1. 当所有资源加载完成并渲染完毕后，页面加载完成。

  2. 触发 DOMContentLoaded 和 load 事件。

• 结果：

  • 用户可以与页面交互。

总结

从输入 URL 到页面加载完成的主要步骤包括：

1. URL 解析

2. DNS 查询

3. 建立 TCP 连接

4. 发送 HTTP 请求

5. 服务器处理请求

6. 返回 HTTP 响应

7. 解析 HTML 和 CSS

8. 执行 JavaScript

9. 布局和绘制

10. 页面加载完成

这一过程涉及网络通信、资源加载、渲染引擎和 JavaScript 引擎的协作，最终将网页内容呈现给用户。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github