前端高级工程师面试突击计划（基于韦业简历定制）
这份计划旨在帮助你充分利用简历中的亮点（开源贡献、架构设计、复杂业务场景），并在 2-3 周内完成系统性的面试准备。你的简历非常优秀，面试策略应侧重于**“由点带面”**，用项目亮点引导面试官。
🎯 核心策略：扬长避短
- 核心优势：开源项目 (Wot UI)、架构设计能力 (插件化、权限系统)、复杂场景解决能力 (视频流、双Token)。
- 重点防御：Vue 3 源码深度追问、工程化细节原理、基础原理 (JS/浏览器) 的底层逻辑。
📅 第一阶段：简历亮点深挖与话术准备 (3-5 天)
目标：确保简历上写的每一个字都能经得起 3 层以上的追问。
1. 开源项目 Wot UI (核心杀手锏)
- 准备话术：
- 为什么做这个开源项目？解决了什么痛点？
- 高性能瀑布流：具体算法是什么？如何解决高度计算偏差？如何处理大量图片的加载性能？
- 车牌号键盘：交互逻辑的难点在哪里？
- Toast 重构：为什么要重构？重构前后性能/易用性对比？
- 协作模式：如何进行 Code Review？如何管理版本和发布流？
- 模拟追问：
- “你在开源项目中遇到的最大的技术挑战是什么？”
- “如何保证组件库的 Tree Shaking？”
2. 稳安特停车追缴管理系统 (架构能力展示)
- 插件化架构：
- 复盘 Vite Glob 导入机制的实现细节。
- 插件通信机制是如何设计的？
- 生命周期钩子是如何实现的？
- 前端权限控制 (RBAC)：
- 准备好按钮级权限指令 (
v-auth) 的代码实现逻辑。 - 路由守卫的具体拦截逻辑。
- 准备好按钮级权限指令 (
- 双 Token 无感刷新：
- 画出时序图：Access Token 过期 -> 拦截 -> 挂起并发请求 -> Refresh Token 换票 -> 重试挂起请求。
- 如何防止并发请求导致多次刷新？
3. 智慧社区服务平台 (C端/移动端难点)
- UniApp 架构突破：
- Global Toast：在非 Vue 上下文（如 Pinia/Axios 拦截器）中唤起 UI 组件的原理是什么？（如何利用 Pinia + Layout 注入实现？）
- PageSpy 远程调试：原理是什么？如何重写 Console/Network 对象捕获真机日志？
- 复杂业务逻辑：
- 支付调度中心：策略模式在支付场景的应用。如何处理微信支付、积分支付、组合支付的逻辑解耦？
- 高可靠倒计时：
SetTimeout误差是如何产生的？（Event Loop 阻塞）。“服务端基准 + 实时差值”具体算法公式是什么？
- 性能优化：
- H5 首屏优化：具体做了哪些措施？（骨架屏、分包、图片懒加载、资源预加载）。
- 瀑布流组件：如何实现“队列化异步布局”？如何监听图片加载完成事件？
4. 南头镇智慧停车平台 (音视频/难点)
- 视频流优化：
- HTTP-FLV vs HLS vs WebRTC 的对比选型理由。
- WebSocket 消息聚合与差量更新的具体实现。
- 按需拉流 (IntersectionObserver) 的实现细节。
📚 第二阶段：技术栈查漏补缺 (5-7 天)
目标：巩固简历中提到的“深入理解”、“熟练使用”的技术点。
1. Vue 3 深度原理 (必问)
- 响应式系统：Proxy vs Object.defineProperty，Reflect 的作用，
refvsreactive实现差异。 - Diff 算法：Vue 3 对比 Vue 2 的 Diff 算法优化（最长递增子序列）。
- 编译优化：Patch Flags、Hoisting、Block Tree。
- Composition API：逻辑复用的优势，
setup执行时机。 - 源码阅读：建议复习
mini-vue或相关源码解析文章。
2. TypeScript
- 类型体操：复习
Pick,Omit,Partial,Record,infer等高级用法。 - 泛型：在组件库封装中的实际应用（结合 Wot UI 举例）。
3. 工程化 (Vite/Webpack)
- Vite 原理：ESM Dev Server 原理，预构建 (Esbuild) 机制。
- 性能优化：
- 简历提到的：Gzip/Brotli, 懒加载, 代码分割, 静态资源缓存。
- 补充：指标体系 (LCP, FID, CLS), 浏览器渲染性能 (重排/重绘), Service Worker。
4. UniApp & 小程序
- 原理：双线程模型 (逻辑层 + 视图层)，通信开销。
- 坑点与优化：分包加载，图片优化，setData 优化建议。
🧠 第三阶段：计算机基础与底层原理 (3-4 天)
目标：回答出“为什么”，展示扎实的基本功。
1. JavaScript 基础
- 执行机制：Event Loop (宏任务/微任务)，闭包与内存泄漏，作用域链。
- 异步编程：Promise 实现原理 (手写 Promise.all/race)，Async/Await 编译产物。
- 原型链：继承方式。
2. 浏览器与网络
- 渲染原理：DOM 树 -> CSSOM -> Render Tree -> Layout -> Paint -> Composite。
- 网络协议：HTTP 1.1 vs 2.0 vs 3.0，HTTPS 握手过程，TCP 三次握手/四次挥手。
- 缓存策略：强缓存 (Cache-Control) vs 协商缓存 (ETag/Last-Modified)。
- 安全：XSS (转义/CSP), CSRF (SameSite/Token)。
✍️ 第四阶段：手写代码与算法 (持续进行)
目标：保持手感，应对 Coding 面试。
- 高频手写题：
- 防抖 (debounce) / 节流 (throttle)
- 深拷贝 (deepClone)
- 发布订阅模式 (EventEmitter)
- 数组扁平化 (flat) / 去重
- 手写
call/apply/bind - 解析 URL 参数
- 算法 (LeetCode Hot 100 选刷)：
- 重点：数组、链表、树的遍历 (DFS/BFS)、排序 (快排)。
- 不用刷太难，重点在思路清晰。
🎤 第五阶段：模拟面试与行为面试 (面试前 1-2 天)
1. 自我介绍 (精炼版)
"面试官好，我是韦业。23年毕业于河南南阳理工学院，目前为止我有近 3 年前端开发经验，专注于 Vue 生态和跨端开发。曾在武汉一家中型物流公司做过前端实习，负责物流仓储相关的前端开发。目前就职于中山的稳安特科技有限公司，主要负责公司的智慧停车业务线，主导了 B 端管理系统和 C 端 H5/小程序的架构设计。
我的核心优势在于： 第一，开源贡献。我是 Wot UI 组件库的核心成员，主导了高性能组件的开发，项目获 Gitee 年度开源奖。 第二，架构能力。我在公司内部落地了插件化架构和前端权限体系，显著提升了研发效率。 第三，复杂场景攻坚。我有处理视频流低延迟播放、双 Token 认证等复杂业务场景的实战经验。
我对技术有热情，喜欢钻研底层原理，希望能在这个岗位上发挥我的价值。
2. 常见行为问题 (HR 面)
- "你遇到的最困难的问题是什么？是如何解决的？" (使用 STAR 法则：情境 -> 任务 -> 行动 -> 结果)
- "为什么离职？"
- "未来的职业规划？"
- "如何看待加班？"
✅ 每日复习 Checklist
- [ ] Day 1: 深度复盘 Wot UI 组件库源码，总结亮点。
- [ ] Day 2: 复盘“停车追缴系统”，整理插件化和权限控制的代码逻辑。
- [ ] Day 3: 复盘“智慧停车平台”，搞懂视频流和 WebSocket 细节；复习 JS 基础 (闭包/原型/异步)。
- [ ] Day 4: 突击 Vue 3 响应式原理与 Diff 算法；手写防抖节流、深拷贝。
- [ ] Day 5: 复习 Vite 原理与浏览器渲染/缓存机制；手写 Promise、发布订阅。
- [ ] Day 6: 模拟面试自测，查漏补缺；准备自我介绍。