前端学习30 相关面试题4
1.浏览器渲染过程（输入 URL 到页面展示）
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 不阻塞。
