影石秋招一面

1. 字节实习 BFF 采用什么框架？为什么需要 BFF？BFF 能实现什么职责？

2. 看你做过组件的重构，讲一下重构的思路。原先什么样子？改造成什么样子？

3. 你的提示词 AI 能力是是否是流式接口？对浏览器如何实现流式接口了解多少？

   📌 回答

   提示词的生成过程不会让用户等待太久，并且也没有 AI 应用一样多轮对话这样明显的场景，因此并没有做流式响应。

   浏览器实现流式响应的方式有哪些？

   • 基于 SSE(Server-Sent Events)。服务端向客户端发送时间流，客户端接收并处理这些事件。它基于持久化的 HTTP 连接，不需要重新建立连接来传输数据，因此特别适用于实时推送场景。比如：股票行情、社交媒体等通知，即时聊天、在线协作等应用。
   • 基于 WebSocket。它是一种在单个 TCP 连接上进行全双工通信的协议，适用于需要实时交互的场景，比如：在线游戏、实时聊天等。但是需要处理连接的管理（比如重连），而且不是所有浏览器都支持 WebSocket。
   • 基于 Fetch API。它是一种基于 Promise 的网络请求 API，支持流式响应。但是它不是所有浏览器都支持，而且需要手动处理响应流。比较适合大文件的下载、视频流、日志监控或数据获取等长时间运行在后台的任务。基本原理是开发者根据接口生成器返回的 done 和 value 字段组成的对象，判断流式传输是否结束，并对每次收到的局部信息作拼接。
   • 当然既然有 WebSocket，也可以使用长轮询。但是这种方法会增加服务器的压力，并且可能造成比较高的延迟。
   • Chunked Transfer Encoding 是 HTTP 1.1 引入的一种传输编码方式，它允许服务器将响应数据分成多个块进行传输，而不是一次性发送完整的响应。每个块都包含一个长度头字段，用于指示该块的字节数。浏览器可以在接收数据的同时开始处理数据，而不需要等待整个响应完成。但是必须浏览器和客户端都支持，同时只能处理单向流。
   • 对于一些比较固定的资源利用，也可以考虑 HTTP2/3 的服务端推送。

4. 对 SSE 的了解？

   📌 回答

   SSE，全称 Server-Sent Events，是一种基于 HTTP 的服务端推送机制。它的原理是浏览器通过 EventSource 建立一个长连接，服务器以 text/event-stream 的流式响应不断推送消息给客户端。SSE 的优点是实现简单，浏览器原生支持，支持自动重连，比较适合消息通知、日志流、实时数据更新等轻量级场景。但它也有一些限制，比如只能单向通信、不支持二进制数据、并发连接数有限，并且 IE 不兼容。在实际应用中，如果只是服务端到客户端的实时更新，用 SSE 成本更低；而需要双向通信或者传输二进制时，一般会选 WebSocket。

5. 是否接触过 WebSocket？

6. 设计埋点与看板体系是完成了说明文档还是其他形式？

7. JWT 是什么组成的？为什么需要 JWT 这种模式？

   📌 回答

   JWT 是 JSON Web Token 的缩写，它是一种基于 JSON 的开放标准（RFC 7519），用于在网络应用环境中传递声明。它由三部分组成：Header、Payload、Signature。Header 包含了算法和令牌类型，Payload 包含了声明信息，Signature 用于验证令牌的真实性。

   JWT 存在的必要性主要有以下几点：

   • 传统的认证方式是依靠 Session 或者 Cookie 来实现的。但是 Session 依赖于服务器端的存储，而 Cookie 是存储在客户端的。这就导致了 Session 认证方式的一个问题：如果服务器端的 Session 存储在内存中，那么当服务器重启或者负载均衡时，会导致用户的会话丢失；而如果服务器端的 Session 存储在数据库中，那么会增加数据库的压力；Cookie 则会引起 CSRF 等安全问题。
   • JWT 是无状态的，不存在会话丢失的问题。
   • JWT 是自包含的，开发者可以将想要传递的信息直接编码在 JWT 中，而不需要依赖服务器端的存储。
   • JWT 更加灵和安全活，不像 Cookie 那样需要依赖浏览器的存储，也不需要担心 CSRF 等安全问题。

8. SSR 是基于框架实现的还是原生能力实现的？

9. SEO 的优化有没有做其他的事情？

   📌 回答

   • Meta 信息优化：title、description、keywords 等。
   • 语义化标签：使用语义化的 HTML 标签，避免使用无意义的 div、span 等标签。
   • 站点地图 sitemap.xml 和 robots.txt：便于搜索引擎获取站点信息。
   • 内链和外链优化：便于提升页面权重，提高搜索引擎排名。
   • 图片优化：使用懒加载、CDN 等技术，减少页面加载时间。
   • 引入 JSON-LD 等结构化数据：便于搜索引擎理解页面内容。
   • URL 优化：使用语义化的 URL，避免使用参数传递信息。

10. 讲一讲 301 和 302 这两个状态码。301 是否会被浏览器缓存？

    📌 回答

    • 301 表示永久重定向，资源已经永久移动到新 URL，浏览器会缓存该重定向，下次访问旧 URL 会直接跳到新 URL，同时搜索引擎也会把原 URL 的权重传递到新 URL。
    • 302 表示临时重定向，资源只是临时在另一个 URL 提供，浏览器一般不会缓存，搜索引擎也不会改变原 URL 的索引权重。
    • 实际应用中，永久改版或域名迁移用 301，临时活动或维护页面用 302。

11. 是否用过服务端 Zustand？Zustand 是不是基于 Context 实现的？

    📌 回答

    • 在服务端通过 getServerSideProps 获取数据，然后用 useStore.setState 初始化 Zustand 状态，客户端 Hydration 后直接使用，减少首屏请求。
    • Zustand 本身并不是基于 React Context 实现的，它用闭包加订阅模式管理状态，比 Context 更高效，只有依赖的状态变化时才触发组件更新。

12. Vite 为什么会比 Webpack 快？

13. 讲一讲微前端里实现沙箱的一些机制？

14. 在工程化开发过程中，有没有自己修改过 Prettier 或者 ESLint 规则？

    📌 回答

    • 在 Prettier 里设置过一些规则，比如单引号、分号等。
    • 为了调试，在 ESLint 里设置了一些规则，比如取消禁止使用 console.log、Vue 默认不允许组件用单个单词命名等。

15. unknown 和 any 的区别？

    📌 回答

    • any 和 unknown 都可以接收任意类型，但区别在于类型安全。
    • any 是不安全的，可以直接调用任何属性或方法，也可以赋值给任意类型，容易隐藏错误。
    • unknown 是类型安全的 any，不能直接操作，需要先做类型检查或类型断言。
    • 通常在接收外部未知数据或 API 返回值时，用 unknown 更安全；而 any 只适合临时绕过类型检查。

16. keyof 的作用？

    📌 回答

    • keyof 是一个操作符，用于获取一个对象类型的所有键名，返回一个联合类型。
    • 可以用在泛型约束中，限制某个类型必须包含某个属性。比如：

    function getProperty<T, K extends keyof T>(obj: T, key: K) {
      return obj[key];
    }

    • 可以用在映射类型中，将一个对象类型的所有属性映射到另一个对象类型。比如：

    type MapType<T> = {
      [P in keyof T]: T[P];
    }

17. == 和 === 的区别？0 == false 是否成立？

18. 「反问」业务、团队规模、Base。