feat:增加前端工程博客

docs/Web-Front/Others/Browser-Process.md

@@ -0,0 +1,95 @@
+# 一、网络请求阶段
+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 技术，实现高效的页面更新与交互。