二、流式处理与实时通信（25题）
1\. 请设计一个支持"断线重连+消息去重"的SSE客户端，并处理AI长文本生成中的网络抖动问题 场景：在AI答疑系统中，学生提问后AI需要长时间生成答案，期间网络可能不稳定，需要确保连接中断后能自动重连，并且不丢失、不重复已接收数据。 核心答案： 设计一个SSE客户端，封装原生EventSource，添加以下功能： 1. 断线重连：监听onerror事件，连接断开后按指数退避策略重连 2. 消息去重：服务器为每个消息分配唯一ID，客户...
五、前端AI架构设计（19题）
1. 请设计一个"微前端+模块联邦"的AI应用架构 场景：在AI学习平台演进过程中，原有的单体前端应用变得臃肿，团队希望将聊天、代码编辑、可视化分析等模块拆分为独立应用，由不同团队独立开发和部署。 核心答案：采用模块联邦架构，将AI应用拆分为多个自治的微前端应用。每个应用独立开发、构建、部署，通过Webpack 5的Module Federation实现跨应用模块共享。构建统一的应用壳（App Shell）管理路由、状态、样式和共享依赖...
八、大模型前端集成（7题）
1. 如何用OpenAI Function Calling或Tools在前端实现AI工具调用 核心架构：构建一个可扩展的工具调用框架，将自然语言转换为结构化工具调用指令，并处理工具执行和结果返回的完整生命周期。 实现思路： 1. 工具注册与描述系统 工具元数据定义：每个工具包含名称、描述、参数模式、执行函数 工具分类管理：按功能域（计算、搜索、数据操作、系统交互）分类 权限与安全控制：工具执行权限验证，敏感操作确认 版本兼容性：支持工具...
六、AI特性与前端工程实践（14题）
1. 在前端实现一个Agent循环时，如何管理工具调用的异步执行、超时处理与结果合并？ 场景：在智能助教系统中，AI Agent需要按顺序调用多个工具（如计算器、天气查询、代码执行），并处理可能出现的超时和错误。 核心答案：设计一个基于状态机的Agent执行引擎，通过优先级队列管理工具调用，实现超时重试和错误降级机制，最后通过结果聚合器合并多个工具的输出。 实现思路： 1. 任务调度器：将Agent的思考过程分解为多个原子任务，每个工具...
前端AI八股文题目汇总
一、TypeScript 与类型系统（20题） 1. 在定义 AI 接口返回的嵌套数据结构（如多轮对话、工具调用结果）时，如何用 TypeScript 的泛型与条件类型实现灵活的类型推导？ 2. 当 AI 接口返回的字段可能因模型版本不同而动态变化时，如何设计类型守卫（type guard）与类型收缩策略？ 3. 请用 TypeScript 实现一个"类型安全的 Prompt 模板解析器"，要求支持变量插值、类型校验与默认值。 4. 如...
四、性能优化与渲染（20题）
1. 在万条级别的AI对话历史中，如何实现毫秒级搜索与过滤？ 场景：智能辅导系统累积了数万条学生与AI的对话记录，教师需要快速检索特定知识点的问题或学生常错点。 核心答案：采用多级索引架构和内存计算优化。建立倒排索引用于关键词搜索，位图索引用于分类筛选，B+树索引用于时间范围查询。通过索引预计算、查询合并和结果缓存实现毫秒级响应。 实现方案： 1. 索引结构设计： 倒排索引：关键词 [消息ID列表]，使用TF IDF加权 位图索引：标签...
改了CSS刷新没反应-你可能不懂HTTP缓存
做前端的应该都遇到过这种情况：明明改了 CSS，浏览器里看到的还是旧样式。网上搜一下，告诉你"清缓存"，Ctrl+F5 一刷新就好了。 但问题是： 缓存到底是怎么工作的？ 为什么有时候会用缓存，有时候不会？ Network 面板里的 和 有什么区别？ 今天把这个问题彻底搞清楚。 HTTP 缓存的两层机制 浏览器缓存分两层： 强缓存 和 协商缓存 。 简单说： 强缓存 ：直接用本地缓存，不问服务器 协商缓存 ：问一下服务器"我这个还能用吗...
LocalStorage、Cookie、IndexedDB 同步与异步机制对比
一、LocalStorage —— 同步 特性 LocalStorage 的 API 是同步的。调用 、 、 、 会立即执行并阻塞主线程。 示例 备注 少量读写通常很快；在大量循环写入场景中可能导致 UI 卡顿。 二、Cookie —— 同步 特性 通过 读写是同步的，操作会立即生效。 示例 备注 Cookie 的读写是同步的；但它随 HTTP 请求发送到服务器的过程属于网络传输，不阻塞当前 JS 执行。 三、IndexedDB ——...
Nuxt SSR 与 Next.js SSR
🧭 引言 在现代前端生态中， Nuxt（Vue） 与 Next.js（React） 是最成熟的两大全栈框架。 它们都具备 SSR（Server Side Rendering） 能力，但实现原理与运行机制差异巨大。 如果你在使用 Nuxt 构建 SSR 项目，却发现“路由跳转后不再 SSR”， 而在 Next.js 中同样操作却会重新发起服务端渲染——这不是 bug，而是 理念差异 。 本文将详细对比这两种框架的 SSR 行为，帮助你彻...