大小周，面了一个小时多点，这是一面前端技术面，你们觉得问的水平怎么样呢~有四轮面试的，一面当天已oc，但是二面我先拖着了不太想面。。。

面试题

1. 自我介绍
2. 讲一下事件循环是什么
3. 你觉得request animation frame这是一个宏任务还是微任务，它的执行时机是大概什么时候（其实既不是宏任务也不是微任务）
4. requestIdleCallback的执行时机是什么时候
5. 函数执行里面，这个过程是怎样的，有什么事情是需要额外注意的
6. 对于浏览器的垃圾回收机制，你是怎么理解的
7. 里面的引用计数器是怎么个原理的，如何去解决垃圾回收问题
8. 你vue更熟悉一点还是React熟悉一点
9. React的优化你是怎么做的
10. React fiber你有了解过吗，相关资料是怎样的，那你觉得核心是怎样的
11. 它跟普通的ssr有什么区别，为什么要用这个
12. React Server component有什么优势
13. 拷打ai项目当时为什么用sse不用WebSocket
14. 实习项目的心跳重连，断线，WebSocket这个是怎么做的
15. 断线的时候消息返回是怎么处理的，你怎么去保证里面的数据一致性
16. webpack迁移vite项目的时候，是怎么做的，怎么个流程，怎么解决联邦依赖，构建，代码兼容问题
17. 在权限管理RBAC项目里你怎么实现状态管理的，二变一系模型有接触吧，怎么结合起来的
18. 你这里面怎么实现权限的父子节点继承
19. 那如果是服务端的节点继承呢，你会怎么做
20. 你里面的白名单放行处理事怎么搞的
21. 做题：一个链表怎么判断有环，再深入两个单向链表，怎么去判断是否相交，
22. 你上面给了双指针和哈希表两个方案，两者的时间复杂度和空间复杂度的区别是什么
23. 做题：dfs，怎么求出矩阵网格里面左上角到右下角的最短路径，然后不可经过黄色方格
24. 反问

（应该还有几个问题我忘记录了）

简略版答案

简单的答案如下，当然面试不能讲得这么简略，不然会挖深问

1. 事件循环（Event Loop）是什么？

事件循环是浏览器执行JS代码的机制，分为宏任务（MacroTask）和微任务（MicroTask）：

• 宏任务：setTimeout、setInterval、I/O、UI渲染
• 微任务：Promise.then、MutationObserver执行顺序：同步代码 → 微任务 → 宏任务，循环执行。

2. requestAnimationFrame 是宏任务还是微任务？执行时机？

• 属于宏任务，但优先级高于普通宏任务（如 setTimeout）。
• 执行时机：在浏览器渲染前执行（每帧一次），适合动画优化。

3. requestIdleCallback 的执行时机？

• 在浏览器空闲时执行（帧渲染完成后，无用户交互时）。
• 适合执行低优先级任务（如日志上报、预加载）。

4. 函数执行过程及注意事项

1. 创建执行上下文（变量提升、作用域链）。
2. 执行代码，处理变量赋值、函数调用。
3. 注意：闭包可能导致内存泄漏，避免滥用全局变量。

5. 浏览器垃圾回收机制（GC）

• 引用计数：统计对象引用次数，归零时回收。
• 问题：循环引用无法回收（如 A→B→A）。
• 解决：现代浏览器改用标记-清除算法（从根对象遍历，标记不可达对象并回收）。

6. Vue 和 React 熟悉度

更熟悉 React，因项目经验更多，熟悉Hooks、Fiber架构及性能优化（如 memo、useMemo）。Vue 仅基础使用（Options API）。

7. React 优化方案

1. 减少渲染：React.memo、useMemo、useCallback。
2. 代码分割：React.lazy + Suspense。
3. 虚拟列表：react-window 优化长列表。

8. React Fiber 核心

• 目标：解决同步渲染阻塞问题，支持可中断更新。
• 原理：将渲染拆分为多个小任务（Fiber节点），通过优先级调度和双缓存机制优化性能。

9. React Server Component (RSC) vs SSR

• SSR：服务端渲染HTML， hydration后交互。
• RSC：组件在服务端动态渲染，零客户端JS，适合静态内容（如CMS）。

10. SSE vs WebSocket

• SSE：单向通信（服务端推数据），HTTP协议，适合实时日志。
• WebSocket：全双工通信，适合高频交互（如聊天室）。

11. WebSocket 心跳重连 & 数据一致性

• 心跳包：定时发送 ping/pong 检测连接。
• 断线处理：重连后通过消息ID或时间戳同步数据，确保不重复/丢失。

12. Webpack 迁移 Vite

1. 替换配置：vite.config.js 替代 webpack.config.js。
2. 联邦依赖：改用 Vite 的 预构建依赖（optimizeDeps）。
3. 兼容问题：替换 require 为 import，处理动态加载。

13. RBAC 权限管理

• 状态管理：用 Redux 或 Context 存储权限树。
• 父子继承：递归检查父节点权限（如 user.canAccess(child)）。
• 服务端继承：API 返回完整权限树，前端缓存。

14. 白名单放行

• 定义：/public 路由无需权限。
• 实现：路由守卫中检查 meta: { whiteList: true }。

15. 链表判环 & 相交

• 判环：快慢指针（O(n)时间，O(1)空间）。
• 判相交：哈希表：O(m+n)时间，O(m)空间。双指针：O(m+n)时间，O(1)空间（遍历两链表调整指针）。

16. 矩阵最短路径（DFS）

• DFS回溯：从起点探索四个方向，避开障碍，记录最短路径。
• 优化：用 visited 矩阵避免重复访问，或改用 BFS（更高效）。