96 lines
5.5 KiB
Markdown
96 lines
5.5 KiB
Markdown
# 一、网络请求阶段
|
||
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 技术，实现高效的页面更新与交互。
|