和我一起刷面试题呀

第1题：闭包是什么？有什么应用场景？

【难度】 L2（15-20K）

基础层面（及格线）： 闭包是指有权访问另一个函数作用域中变量的函数。形成条件：函数嵌套 + 内部函数引用外部变量 + 内部函数被外部引用。

常见应用：

• 模块化封装（IIFE）
• 柯里化函数
• 防抖节流
• 缓存计算结果（memoize）

进阶层面（良好）： 闭包的内存机制：内部函数持有外部作用域的引用，导致外部函数的变量无法被垃圾回收，因此可能引发内存泄漏。

排查方法：

• Chrome DevTools Memory 面板拍 Heap Snapshot
• 对比多次快照，查找 Detached DOM Tree 或闭包引用链

源码/原理层面（优秀）： 从 V8 角度看，闭包在底层通过 Context 对象实现。每个函数执行时创建执行上下文，闭包变量存储在 HeapContext 中，而非栈上，因此生命周期与函数执行无关。

Redux createStore、Vue3 的 effect 函数都是闭包的经典应用。

---

第2题：Vue3 的响应式原理是什么？和 Vue2 有什么区别？

【难度】 L2（15-20K） 基础层面（及格线）： Vue3 使用 Proxy 代理对象：

• get：收集依赖（track）
• set：触发更新（trigger）

Vue2 使用 Object.defineProperty：

• 递归遍历对象所有属性，逐个添加 getter/setter
• 缺点：新增/删除属性监听不到、数组索引/length 监听不到

进阶层面（良好）： Vue3 响应式完整流程：

1. reactive(obj) → 创建 Proxy，代理整个对象
2. 读取属性 → track(target, key) → 把当前 effect 收集到 dep 里
3. 修改属性 → trigger(target, key) → 找到对应的 dep → 执行所有 effect
4. effect 就是组件的渲染函数，重新执行 → 更新视图

Vue2 的问题本质：

• 只能劫持已有属性
• 数组需要重写 7 个变异方法（push/pop/splice 等）
• 嵌套对象需要递归处理，初始化性能差

源码/原理层面（优秀）：

• Vue3 使用 WeakMap 存储 target -> Map -> Set -> effect 的依赖关系
• effect 函数用栈管理（解决嵌套 effect 问题）
• Proxy 的 Reflect.get/set 保证 this 指向正确

---

第3题：从输入 URL 到页面显示，发生了什么？

基础层面（及格线）：

1. DNS 解析：域名 → IP 地址（递归查询 + 缓存）
2. TCP 连接：三次握手建立连接
3. HTTP 请求：发送请求报文（方法、URL、Headers）
4. 服务器处理：后端执行业务逻辑
5. HTTP 响应：返回 HTML/CSS/JS/图片等资源
6. 浏览器渲染：解析 HTML → 构建 DOM → CSSOM → 渲染树 → 布局 → 绘制

进阶层面（良好）：

• HTTPS 额外步骤：TLS 握手（证书验证、密钥交换）
• 缓存判断：强缓存（Cache-Control）→ 协商缓存（ETag）
• 渲染阻塞：CSS 阻塞渲染、JS 阻塞解析（defer/async）
• 关键渲染路径：优化首屏需要优先加载关键资源

源码/原理层面（优秀）：

• TCP 三次握手详细过程：SYN → SYN+ACK → ACK
• 浏览器多进程架构：主进程、GPU 进程、渲染进程
• 渲染进程内部：GUI 渲染线程 + JS 引擎线程（互斥）+ 合成线程
• 渲染树（Render Tree）只包含可见节点
• 布局（Layout/Reflow）计算几何信息
• 绘制（Paint）生成绘制指令
• 合成（Composite）分层渲染，GPU 加速 【难度】 L2（15-20K）

重点复习清单

优先级	知识点	对应题目	掌握程度	预计提升
P0	Vue3 响应式完整流程（track/trigger/effect）	第2题	部分掌握	+2K
P0	浏览器渲染全流程（DOM→CSSOM→渲染树→布局→绘制→合成）	第3题	框架了解	+1.5K
P1	HTTP 缓存机制（强缓存/协商缓存）	第3题	未提及	+1K
P1	TCP 三次握手 / HTTPS TLS 握手	第3题	未提及	+1K
P2	闭包内存泄漏排查（Heap Snapshot）	第1题	了解概念	+0.5K

---

推荐学习资源

Vue 响应式原理

1. Vue 官方文档：深入响应式系统章节
2. 手写 Vue3 reactive：自己实现一个简化版 Proxy 响应式
3. 推荐文章：《Vue3 响应式原理源码解析》

浏览器渲染与网络

1. 《图解 HTTP》：HTTP 协议、缓存、HTTPS
2. 《浏览器工作原理与实践》：极客时间课程，强烈推荐
3. Chrome DevTools：自己用 Performance 面板分析页面加载

---