第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 响应式完整流程：
reactive(obj)→ 创建 Proxy，代理整个对象- 读取属性 →
track(target, key)→ 把当前effect收集到dep里 - 修改属性 →
trigger(target, key)→ 找到对应的dep→ 执行所有effect effect就是组件的渲染函数，重新执行 → 更新视图
Vue2 的问题本质：
- 只能劫持已有属性
- 数组需要重写 7 个变异方法（push/pop/splice 等）
- 嵌套对象需要递归处理，初始化性能差
源码/原理层面（优秀）：
- Vue3 使用
WeakMap存储target -> Map -> Set -> effect的依赖关系 effect函数用栈管理（解决嵌套 effect 问题）- Proxy 的
Reflect.get/set保证 this 指向正确
第3题：从输入 URL 到页面显示，发生了什么？
基础层面（及格线）：
- DNS 解析：域名 → IP 地址（递归查询 + 缓存）
- TCP 连接：三次握手建立连接
- HTTP 请求：发送请求报文（方法、URL、Headers）
- 服务器处理：后端执行业务逻辑
- HTTP 响应：返回 HTML/CSS/JS/图片等资源
- 浏览器渲染：解析 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 响应式原理
- Vue 官方文档：深入响应式系统章节
- 手写 Vue3 reactive：自己实现一个简化版 Proxy 响应式
- 推荐文章：《Vue3 响应式原理源码解析》
浏览器渲染与网络
- 《图解 HTTP》：HTTP 协议、缓存、HTTPS
- 《浏览器工作原理与实践》：极客时间课程，强烈推荐
- Chrome DevTools：自己用 Performance 面板分析页面加载
