最近在使用 NestJs 和 NextJs 在做一个协同文档 DocFlow，如果感兴趣，欢迎 star，有任何疑问，欢迎加我微信进行咨询 yunmz777
1. 使用的 React 版本？ React 版本演进的趋势是怎样的？
React 的版本迭代趋势体现了其向更高效、更简洁的开发体验不断发展的方向。从 React 16 开始，React 引入了许多新特性，如错误边界（Error Boundaries）和 Fiber 架构，显著提高了渲染效率。React 17 主要是稳定性的更新，并没有引入大的特性变化，而 React 18 引入了并发渲染、自动批处理等功能，让 React 应用的响应速度和性能得到了显著提升。未来 React 可能会继续强化并发渲染和 React Server 端渲染（SSR）的支持，以及进一步优化性能。
2. 经常使用哪些 Hooks 来优化组件的渲染表现？
常用的 hooks 来优化组件渲染表现包括：
useMemo：缓存计算结果，避免不必要的重计算，适用于复杂的计算逻辑。useCallback：缓存函数引用，避免在每次渲染时重新生成函数引用，适用于传递给子组件的函数。useEffect：合适使用useEffect可以避免不必要的副作用执行。例如，通过useEffect来处理只需要在特定条件下执行的逻辑，减少渲染时的副作用。React.memo：高阶组件，用来优化函数组件，避免因为 props 未变化而导致不必要的重渲染。
3. 如果过度使用 useEffect 导致了多次渲染，如何处理？
过度使用 useEffect 可能会导致不必要的副作用和组件多次渲染，通常可以通过以下方式进行优化：
- 依赖项管理：确保
useEffect的依赖项只包含真正需要监视的状态或 props，避免不必要的渲染。 - 使用
useMemo和useCallback：可以将计算和函数逻辑提取出去，减少在每次渲染时重新计算或创建函数。 - 合并逻辑：尽量避免多个
useEffect来处理相同或相关的副作用，可以将这些副作用合并在一个useEffect中进行管理。 - 条件执行：通过条件判断，确保副作用只有在特定的状态变化时才会触发。
4. 介绍一下信息流长列表优化
信息流长列表优化是处理包含大量数据的列表时，提升渲染性能的关键技术。常用的优化方法包括：
- 虚拟化（Virtualization）：通过只渲染可见区域的内容，减少 DOM 元素数量，从而提高性能。常见的库如
react-window和react-virtualized。 - 懒加载：在用户滚动到列表底部时动态加载更多内容。
- 分页：将数据拆分为多个页面，每次只渲染一个分页的数据，减少一次性加载的数据量。
- 避免不必要的 reflow：通过合理的布局和避免频繁的样式变更，减少浏览器重新渲染的次数。
5. 简历上提到帧率有很大提升，给用户带来了怎样的体感变化？用户反馈？
帧率的提升通常会使用户界面更加流畅和响应迅速，尤其是在动画、滚动和交互过程中，用户会感觉到界面的平滑度大大增强。提升帧率后，页面加载、滚动、点击响应等操作变得更为流畅，减少了卡顿现象。用户反馈通常表现为“界面感觉更快”、“操作更顺畅”，这对于增强用户体验和满意度至关重要。
6. 介绍一下 SSE，包括它属于哪种协议、使用场景以及需要注意的点
SSE（Server-Sent Events）是基于 HTTP 协议的一种单向通信协议，允许服务器向客户端推送实时数据。它通常用于实时通知、新闻推送、消息流等场景。SSE 适用于需要从服务器向客户端持续推送数据的场景，而 WebSocket 更适合需要双向实时通信的场景。需要注意的是，SSE 是单向的，只能由服务器推送数据给客户端，并且它的连接是持久化的，浏览器会自动重连。
7. 如果 SSE 推送中断了，如何处理异常？
SSE 会自动处理连接断开问题。浏览器会自动进行断线重连，通常无需手动干预。但为了增强鲁棒性，可以在 onerror 事件中进行额外的错误处理，例如：检查网络连接、重试机制等，确保连接的稳定性和数据的连续性。
8. 使用的 SSE 是原生 API 还是第三方库？断线重连是 SSE 本身支持的还是库封装的功能？
SSE 的原生 API 就有断线重连的功能。如果连接断开，浏览器会自动尝试重新连接。然而，很多开发者可能会选择第三方库来封装 SSE，以便在复杂应用中提供更多控制和配置选项，如自动重试机制、连接状态监听等。常见的库如 eventsource。
9. WebSocket 的传输机制和 HTTP 有关系吗？
WebSocket 与 HTTP 在建立连接时有关系。WebSocket 初始连接是通过 HTTP 协议进行握手的，但一旦握手成功，连接就会切换到 WebSocket 协议，之后 WebSocket 将在持久化连接上进行双向数据传输，避免了 HTTP 请求和响应的重复开销。WebSocket 的传输机制比 HTTP 更高效，适合需要实时数据交换的应用。
10. WebSocket 在建立连接之初会基于 HTTP 吗？
是的，WebSocket 在建立连接之初会通过 HTTP 协议进行握手。客户端向服务器发起一个 HTTP 请求，其中包含 Upgrade 和 Connection 头部，告诉服务器希望升级为 WebSocket 连接。如果服务器支持 WebSocket，返回一个 101 状态码（切换协议），并完成握手，之后连接将转换为 WebSocket 协议，进行双向数据传输。
11. 介绍一下浏览器的垃圾回收（GC）机制
浏览器的垃圾回收（GC）机制用于自动管理内存，确保不再使用的对象被及时清除，从而避免内存泄漏。浏览器使用的 GC 算法通常是基于标记-清除（Mark-and-Sweep）和引用计数等技术。具体的工作流程包括：
- 标记阶段：浏览器会扫描对象图，标记所有被引用的对象。
- 清除阶段：清除所有未被标记的对象。
- 压缩阶段：有些浏览器的 GC 会在清除后进行内存压缩，优化内存分布。
GC 的执行是自动的，但频繁的垃圾回收可能会导致性能问题，因此需要通过优化内存使用，减少不必要的对象创建来避免 GC 频繁触发。
总结与评价
这些问题涵盖了从 React 的性能优化到 SSE、WebSocket 的使用等多个领域，考察了技术的深度和广度。面试官不仅关注候选人对技术的理解，还考察了其解决实际问题的能力，尤其是在高性能、实时通信等场景下的经验。
这些问题的评价：
- 难度适中：涉及的知识点比较基础，但结合实际应用时需要一定的深度理解。
- 涉及面广：问题横跨前端优化、实时通信、性能调优等多个领域，考察了候选人的全面能力。
- 实践性强：大部分问题都涉及实际开发中常见的技术问题，回答的质量直接影响到实际开发中的表现。
通过这些问题，面试官能够较为全面地了解候选人的技术栈、经验以及解决实际问题的能力。
《面经分享——字节前端一面》 是转载文章，点击查看原文。
