---
  title: 浏览器渲染全流程解析
  date: 2025-12-13
---

# 一、网络请求阶段
1. DNS 解析  

  浏览器先解析输入的网址对应的 IP 地址，先检查本地 DNS 缓存，若没有则向本地 DNS 服务器发起查询。最终通过 DNS 系统获取服务器的 IP 地址。   

2. 建立网络连接（TCP/IP 握手）

  通过三次握手建立客户端（浏览器）与服务器的 TCP 连接。若网址使用 HTTPS，还需完成 TLS/SSL 握手，确保数据加密传输。

3. 发起 HTTP/HTTPS 请求

  浏览器向服务器发送请求报文，包含：  
- **请求行**：方法（GET）、URL、协议版本（如 HTTP/1.1）。
- **请求头**：包含浏览器信息（User-Agent）、缓存策略（Cache-Control）等。
- **若为 POST 请求**：还包含请求体数据。

4. 服务器处理请求

  服务器接收到请求后，根据 URL 路由到对应的后端服务（如 Node.js、Java 等）。
- **若为 Vue3 项目**：
    * 若为单页应用（SPA），服务器通常返回一个通用的 `index.html` 页面（前端路由由 Vue Router 处理）。
    * 若涉及 API 请求（如获取数据），服务器返回 JSON 格式的数据（如通过 Express、Spring Boot 等接口）。

5. 返回响应结果

  服务器返回响应报文，包含：
- **状态行**：状态码（如 200 OK、404 Not Found）。
- **响应头**：包含内容类型（Content-Type: text/html）、缓存控制（Cache-Control: max-age=3600）等。
- **响应体**：
    * 若为 `index.html`：返回 HTML 文本（包含 Vue3 项目的入口脚本引用，如 `<script src="/static/js/app.js"></script>`）。
    * 若为 API 数据：返回 JSON 格式的数据（如用户信息、列表数据等）。


# 二、解析与执行阶段
1. 解析 HTML 并构建 DOM 树

&emsp;&emsp;浏览器逐行解析 HTML 内容，构建 **DOM 树**（Document Object Model）。
- 遇到 `<link rel="stylesheet">` 标签时，异步加载 CSS 文件并构建 **CSSOM 树**（CSS Object Model）。
- 遇到 `<script>` 标签时：
    * 若为 **同步脚本**（`<script src="app.js">`）：暂停 HTML 解析，下载并执行脚本。
    * 若为 **异步脚本**（`<script async src="app.js">`）：异步下载脚本，不阻塞 HTML 解析。

2. 加载 Vue3 相关资源

&emsp;&emsp;浏览器下载并执行 Vue3 的核心库（`vue.runtime.global.js`）、项目打包后的 JS 文件（如 `app.js`）和 CSS 文件（如 `app.css`）。
::: tip  
- `app.js`：包含 Vue3 应用的入口逻辑（如 `createApp(App).mount('#app')`）、组件定义、路由配置等。
- `app.css`：包含全局样式或组件样式（通过 `<style>` 标签在组件中定义的样式会被编译为内联样式）。
::: 

3. 执行 Vue3 应用初始化

&emsp;&emsp;当浏览器执行到 Vue3 入口脚本时，会触发以下流程：
- **创建应用实例**：通过 `createApp(App)` 创建 Vue 应用实例。
- **配置插件和路由**：
    * 安装路由插件 `vue-router`：`app.use(router)`。
    * 安装状态管理插件（如 `pinia`）：`app.use(pinia)`。
- **挂载应用到 DOM**：通过 `app.mount('#app')` 将 Vue 组件渲染到 HTML 中的指定容器（如 `<div id="app"></div>`）。

4. Vue3 组件渲染流程

&emsp;&emsp;**初始化组件**：从根组件（`App.vue`）开始，递归解析组件树，初始化响应式数据。
- **模板编译**：
    * 若使用单文件组件（`.vue`），模板（`<template>`）会被编译为渲染函数（`render`）。
- **响应式依赖收集**：Vue3 通过 `Proxy` 和 `Reflect` 实现响应式，当组件访问数据（如 `message`）时，自动建立依赖关系。
- **首次渲染（挂载阶段）**：
    * 根据渲染函数生成 **虚拟 DOM（VNode）**。
    * 通过 `patch` 函数将虚拟 DOM 渲染为真实 DOM，并插入到页面中。
    * 例如，根组件渲染后，`#app` 容器内会生成对应的 HTML 结构。

5. 处理异步操作（如数据请求）

&emsp;&emsp;在组件的 `setup` 函数或生命周期钩子（如 `onMounted`）中，通过 `axios` 或 Vue3 内置的 `useFetch` 发起 API 请求：
- **数据更新与重新渲染**：当响应数据返回后，更新响应式数据（如 `data.value`），Vue3 检测到变化后，重新生成虚拟 DOM 并与真实 DOM 对比，执行 **差异化更新（Diff 算法）**，只更新变化的部分。

# 三、页面渲染与交互阶段
1. 合成图层并绘制页面

&emsp;&emsp;浏览器将 DOM 树和 CSSOM 树合并为 **渲染树（Render Tree）**，计算每个元素的布局（Layout）和样式（Style）。通过 **图层合成（Composite）** 将不同层级的元素绘制到页面上，最终显示完整的 UI。

2. 用户交互与组件更新

- 当用户触发事件（如点击按钮、输入表单）时：
    * Vue3 通过 `v-on` 指令绑定事件处理函数（如 `@click="handleClick"`）。
    * 事件处理函数中修改响应式数据，触发组件重新渲染。
- 点击按钮时，`count` 的值更新，Vue3 自动重新渲染按钮文本。

# 四、总结
::: tip
输入网址 → DNS解析 → TCP连接 → 服务器返回index.html → 解析HTML加载Vue3脚本 →
执行createApp初始化 → 挂载组件到DOM → 首次渲染（虚拟DOM转真实DOM） →
异步请求数据 → 数据更新触发重新渲染 → 页面最终呈现 → 用户交互驱动组件更新
::: 

&emsp;&emsp;通过以上流程，浏览器从输入网址到完成 Vue3 应用的渲染，充分利用了前端框架的响应式机制和虚拟 DOM 技术，实现高效的页面更新与交互。