前端学习30 相关面试题4

1.浏览器渲染过程（输入 URL 到页面展示）

地址解析与网络请求用户在浏览器地址栏输入 URL，浏览器开始进行 DNS 解析（域名转 IP），建立 TCP 连接（三次握手），发送 HTTP 请求到服务器。

服务器响应与资源下载服务器返回 HTML 文档，浏览器开始解析 HTML 流，遇到 CSS、JS、图片等资源时，继续发起请求下载。

HTML 解析生成 DOM 树浏览器解析 HTML，构建出DOM 树（Document Object Model），这是页面的节点树，代表页面结构。

CSS 解析生成 CSSOM 树浏览器解析 CSS，生成CSSOM（CSS Object Model），表示样式信息。

生成渲染树（Render Tree）浏览器结合 DOM 树和 CSSOM 树，生成渲染树，它只包含可见节点和对应样式信息。

布局（Layout 或 Reflow）浏览器根据渲染树计算每个节点的几何信息（大小、位置）。

绘制（Paint）浏览器根据布局结果，把每个节点绘制成屏幕像素。

2.Vue 3 中的 VNode 渲染流程

VNode是构成虚拟DOM树的节点对象，虚拟DOM树是由VNode组成的树结构。

在 Vue 3 应用中，模板被编译为 VNode（虚拟 DOM）树，由 JavaScript 构建并维护，初次渲染时将 VNode 转为真实 DOM，响应式数据变化时通过高效的 diff 算法对比新旧 VNode，实现最小化 DOM 更新。这个虚拟 DOM 渲染机制是 Vue 提升页面渲染性能和响应速度的关键所在。

Vue 的 SPA 应用中：

Vue 先基于响应式数据生成虚拟 DOM 树（VNode）。
Vue 通过 diff 算法更新虚拟 DOM 树的差异。
Vue 最终把这些变化应用到真实 DOM。
浏览器根据真实 DOM 和 CSS，构建渲染树，进行布局（Layout）和绘制（Paint）

3.JavaScript 的下载与运行过程

1.下载阶段：

浏览器解析 HTML 文档时，遇到 <script> 标签（外部脚本或内联脚本）对于外部脚本（带 src 属性的 <script src="xxx.js">），浏览器会向服务器发起额外的 HTTP 请求下载这个 JS 文件下载 JS 文件是网络 I/O 过程，浏览器会同时进行解析 HTML、下载其他资源，但一般脚本下载会阻塞后续 HTML 的解析（除非使用 defer 或 async 属性）。

2.解析与编译阶段：

浏览器下载完 JavaScript 文件后，会将脚本文本传给 JavaScript 引擎（比如 Chrome 的 V8）JS 引擎先进行词法分析和语法分析，生成抽象语法树（AST）随后将 AST 编译为字节码或机器码，准备执行。

3.执行阶段：

JS 引擎执行编译后的代码，进行变量声明、函数定义、表达式计算等在浏览器环境中，JS 运行时会访问 DOM API、BOM API（浏览器对象模型），可以操作页面内容和浏览器行为如果是 Vue 等框架，JS 代码会创建 VNode，管理响应式数据，触发组件渲染。

异步任务与事件循环JS 单线程执行同步代码异步任务（如网络请求、定时器、DOM 事件）通过事件循环机制处理，保证 UI 不阻塞。