blog-press/docs/Web/Vue/Browser-Process.md

title, date

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 树

  浏览器逐行解析 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 相关资源

  浏览器下载并执行 Vue3 的核心库（vue.runtime.global.js）、项目打包后的 JS 文件（如 app.js）和 CSS 文件（如 app.css）。 ::: tip

• app.js：包含 Vue3 应用的入口逻辑（如 createApp(App).mount('#app')）、组件定义、路由配置等。
• app.css：包含全局样式或组件样式（通过 <style> 标签在组件中定义的样式会被编译为内联样式）。 :::

3. 执行 Vue3 应用初始化

  当浏览器执行到 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 组件渲染流程

  初始化组件：从根组件（App.vue）开始，递归解析组件树，初始化响应式数据。

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

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

  在组件的 setup 函数或生命周期钩子（如 onMounted）中，通过 axios 或 Vue3 内置的 useFetch 发起 API 请求：

• 数据更新与重新渲染：当响应数据返回后，更新响应式数据（如 data.value），Vue3 检测到变化后，重新生成虚拟 DOM 并与真实 DOM 对比，执行 差异化更新（Diff 算法），只更新变化的部分。

三、页面渲染与交互阶段

1. 合成图层并绘制页面

  浏览器将 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） → 异步请求数据 → 数据更新触发重新渲染 → 页面最终呈现 → 用户交互驱动组件更新 :::

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