BOSS直聘前端一面面经

1. 详细的说一下流式传输的流程2. 为什么要选择SSE呢？（api服务提供的就是返回就是SSE的吧？）3. 有没有其他的方式也可以接受到服务端的信息？（WebSocket）4. localStorage和sessionStorage区别5. vue2和vue3的差别6. vue2中的Object.defineProperty和vue3的Proxy的差异7. Composition api比Options api的优势在哪里8. 说一下vue组件通信之间的方法9. 事件总线是怎么实现的10. 详细讲一下发布订阅模式11. v-if和v-show12. v-if和v-show的生命周期有什么区别13. 讲一下keep-alive14. 手撕LRU（这个想不起来了，挣扎了一下最后说了思路）15. 说一下对ts的了解16. 怎么使用图片懒加载优化17. 一般图片懒加载用在什么场景18. 预加载了解过吗19. axios是怎么进行二次封装的20. 在axios中发送多个请求，但是只实现最后一个请求，如何实现？21. 说一下事件循环22. 宏任务和微任务都有什么23. promise的出现是用来解决什么问题的24. async/await又是解决了什么问题25. promise并行发多个请求怎么做？26. promise.all allsettled race 之间的区别是什么27. 箭头函数和普通函数有什么差别28. 闭包在什么情况下会使用29. 函数柯里化一般在什么情况下会使用30. 事件委托的触发流程

1. display: none 和 visibility: hidden 的区别• 渲染层面：◦ display: none：元素完全从渲染树移除，不占据空间（回流+重绘）。◦ visibility: hidden：元素仍在渲染树中，占据空间但不可见（仅重绘）。• 子元素影响：◦ display: none：子元素也会被隐藏。◦ visibility: hidden：子元素可通过 visibility: visible 单独显示。2. 三列布局（两边固定，中间自适应）方案1：Flex 布局.container { display: flex; }  .left, .right { width: 200px; }  .center { flex: 1; }  方案2：Calc 计算.center { width: calc(100% - 400px); margin: 0 200px; }  方案3：绝对定位 + margin.container { position: relative; }  .left, .right { position: absolute; width: 200px; }  .center { margin: 0 200px; }  3. 闭包• 定义：函数内部引用外部作用域变量，且变量在外部作用域释放后仍被保留。• 作用：实现私有变量、函数防抖/节流等。• 注意：过度使用可能导致内存泄漏。4. React 状态管理方案及区别方案 特点 ** useState** 组件级状态，适合简单逻辑。 ** useContext** 跨组件状态，适合全局轻量级状态（避免逐层传递 props）。 ** Zustand** 轻量级全局状态管理，基于 Context + immer，支持订阅和模块化。 ** Redux** 复杂全局状态管理，需手动配置 reducer、action 等，适合大型应用。 5. 虚拟列表实现• 核心原理：仅渲染可见区域内的列表项，通过滚动事件动态计算并更新显示内容。• 关键步骤：1. 计算可见区域起始索引和结束索引。2. 渲染对应索引的列表项。3. 通过 transform 或 padding 模拟滚动位置，保持滚动条正常显示。6. React 性能优化• 组件优化：◦ 使用 React.memo 缓存函数组件，避免无必要重渲染。◦ useCallback 缓存回调函数，避免子组件因引用变化重渲染。• 状态优化：◦ 避免在 useState 中存储不必要的状态（如临时计算值）。◦ 使用 useReducer 处理复杂状态逻辑，减少重复更新。• 其他：◦ 虚拟列表/表格（长列表优化）。◦ 懒加载（React.lazy + Suspense）。◦ 避免内联函数在渲染中重复创建。7. React 的状态（补充常见问题）• 状态更新异步性：◦ 合成事件和生命周期中，setState 异步更新，需通过回调获取最新值。◦ 原生事件（如 setTimeout）中，setState 同步更新。• 状态穿透问题：◦ 多层组件传递状态时，可用 useContext 或状态管理库简化。8. 代码题：生成有效括号组合（回溯法）var generateParenthesis = (n) => {    const res = [];    const backtrack = (path, left, right) => {      if (path.length === 2 * n) res.push(path);      if (left < n) backtrack(path + '(', left + 1, right);      if (right < left) backtrack(path + ')', left, right + 1);    };    backtrack('', 0, 0);    return res;  };  思路：通过回溯法枚举所有可能，用 left 和 right 控制左右括号数量，确保任意时刻 right ≤ left 且总数不超过 n。

  1. 了解小鹅通吗2. 你最近有比较丧气的事儿吗3. 你最近有什么完成的比较好的事儿吗4. 你有其他offer吗5. 我看你是27届的，我们大部分投递的是26的，你课程这些怎么办呢6. 如果你收到了小红书和小鹅通的offer，你怎么选择7. （我说根据发展方向和技术方面决定）那你怎么判断这个方向8. 三个词形容你自己9. 工作室内干什么10. 如果leader给你任务，你无法完成，需要找另一个组的人帮忙，他说很忙，推进不了，你怎么办11. 为什么学前端，职业规划

1. 面试官自我介绍2. 自我介绍3. react学了些什么东西4. 那性能优化有哪些涉猎5. DNS优化可以怎么做呢6. 浏览器缓存机制7. 为什么js，css强缓存，html不缓存8. 文件指纹是什么9. 文件指纹跟文件内容有什么关系10. 你说的这些都是从哪学到的11. ts和js最大的区别12. ts里面有type和interface，区别是什么13. 有个场景既可以选用type也可以用interface，更建议使用哪个14. 那为什么ts官方有一部分声音在讨论说将来要把interface给砍掉，只留type15. ts的never和unknown是什么，区别16. SVG和Canvas的区别，你对这两个内容的了解17. 你实习最想得到什么18. 工作时长19. 对工作团队的期望20. 反问：您面试了那么多人，您觉得转正的人都具备怎么样的品质，答：学习能力特别强，解决问题能力强。（对此展开了深刻解释，主要是要有自己的方法论）21. 我们的项目和低代码的区别