1. LLM 基礎概念面試必問概念一句話必背TokenLLM 的最小文本單位計費和上下文窗口都按 token 計上下文窗口context模型一次能看到的最大 token 數(shù)超出需截斷/壓縮/摘要Temperature采樣隨機性參數(shù)越高越有創(chuàng)造性越低越確定幻覺Hallucination模型編造事實前端要做來源引用與兜底提示System Prompt設定角色與行為約束的系統(tǒng)級提示詞2. 流式輸出前端核心實戰(zhàn)必背SSEServer-Sent Events是主流方案基于 HTTP單向服務端推送Content-Type: text/event-stream瀏覽器端用fetchReadableStream手動解析比EventSource更靈活可帶 header、可 POST必背如何用reader.read()循環(huán)解析data:行、處理[DONE]、分包/粘包問題buffer chunk再按\n\n切分對比SSE vs WebSocketSSE 單向輕量、WS 雙向、打字機效果的增量渲染實戰(zhàn)坑中斷生成AbortController、React 中 setState 頻繁更新導致卡頓用 ref 緩沖 requestAnimationFrame 批量刷3. Function Calling / Tool Use必考流程必背用戶提問 → 模型決定調用工具返回結構化 JSON 參數(shù)→ 前端/后端執(zhí)行工具 → 結果回傳模型 → 生成最終回答前端職責渲染工具調用卡片如正在查詢訂單…的過程可視化、多輪工具調用的狀態(tài)機管理4. Agent 核心架構ReAct 模式Reason推理 Act行動循環(huán)Agent LLM 記憶 工具 規(guī)劃多輪對話管理消息歷史裁剪策略、滑動窗口、摘要壓縮記憶機制短期記憶對話歷史vs 長期記憶向量庫常見前端場景聊天 UI 的消息狀態(tài)生成中/失敗/重試/停止、思考過程的折疊展示5. RAG檢索增強生成流程必背文檔切分Chunking→ Embedding 向量化 → 存向量庫 → 檢索 Top-K → 拼進 Prompt → 生成前端相關引用來源展示、上傳文檔的進度與狀態(tài)管理6. MCPModel Context Protocol2024~2025 的高頻新考點Anthropic 推出的模型-工具連接標準協(xié)議架構Host如 IDE/客戶端→ Client → ServerServer 暴露 tools/resources/prompts一句話背MCP 是AI 應用的 USB-C 接口統(tǒng)一了工具接入標準替代各家私有的 Function Calling 插件協(xié)議7. Prompt Engineering前端也要會結構化提示詞角色 背景 任務 約束 輸出格式少樣本 Few-shot讓模型輸出 JSON 的技巧與解析容錯markdown 代碼塊包裹問題四、Agent 前端特有的場景設計題面試壓軸設計一個 ChatGPT 式對話頁面——考察流式渲染、虛擬列表、消息狀態(tài)機、Markdown/代碼高亮渲染注意 XSS用DOMPurify消毒、中斷與重試長對話性能優(yōu)化——消息列表越來越長怎么辦虛擬滾動、避免全量 diff、分頁加載歷史網(wǎng)絡不穩(wěn)定下 SSE 斷連——斷線重連、Last-Event-ID續(xù)傳、降級為輪詢工具調用過程的 UI 交互設計——多步 Agent 執(zhí)行時的進度可視化、失敗重試粒度安全性——模型輸出渲染 XSS、Prompt 注入在前端的防御邊界說明注入主要靠服務端防御前端要做輸出消毒五、手寫代碼 Top 8背熟防抖 節(jié)流Promise 并發(fā)限制器用 fetch ReadableStream 實現(xiàn) SSE 流式解析? 本崗位最核心手寫題深拷貝處理循環(huán)引用數(shù)組扁平化 / 去重虛擬列表核心邏輯發(fā)布訂閱模式EventEmitterAbortController取消請求封裝SSE 流式解析參考實現(xiàn)必背骨架async function streamChat(url, body, onChunk, signal) { const res await fetch(url, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify(body), signal, }); const reader res.body.getReader(); const decoder new TextDecoder(); let buffer ; while (true) { const { done, value } await reader.read(); if (done) break; buffer decoder.decode(value, { stream: true }); const parts buffer.split(\n\n); buffer parts.pop(); // 處理分包最后一段可能不完整 for (const part of parts) { const line part.trim(); if (!line.startsWith(data:)) continue; const data line.slice(5).trim(); if (data [DONE]) return; onChunk(JSON.parse(data)); } } }六、復習優(yōu)先級建議優(yōu)先級內容理由P0JS 基礎 框架原理 手寫題任何前端崗位的門檻P0SSE 流式輸出 對話頁設計本崗位核心場景P1Function Calling / ReAct / MCPAgent 崗位差異化考點P1性能優(yōu)化虛擬列表、首屏常見追問P2RAG、Prompt 工程、多 Agent 架構加分項能聊出深度即可P2微前端、SSR視 JD 而定 Agent前端面試基礎
1. LLM 基礎概念面試必問概念一句話必背TokenLLM 的最小文本單位計費和上下文窗口都按 token 計上下文窗口context模型一次能看到的最大 token 數(shù)超出需截斷/壓縮/摘要Temperature采樣隨機性參數(shù)越高越有創(chuàng)造性越低越確定幻覺Hallucination模型編造事實前端要做來源引用與兜底提示System Prompt設定角色與行為約束的系統(tǒng)級提示詞2. 流式輸出前端核心實戰(zhàn)必背SSEServer-Sent Events是主流方案基于 HTTP單向服務端推送Content-Type: text/event-stream瀏覽器端用fetchReadableStream手動解析比EventSource更靈活可帶 header、可 POST必背如何用reader.read()循環(huán)解析data:行、處理[DONE]、分包/粘包問題buffer chunk再按\n\n切分對比SSE vs WebSocketSSE 單向輕量、WS 雙向、打字機效果的增量渲染實戰(zhàn)坑中斷生成AbortController、React 中 setState 頻繁更新導致卡頓用 ref 緩沖 requestAnimationFrame 批量刷3. Function Calling / Tool Use必考流程必背用戶提問 → 模型決定調用工具返回結構化 JSON 參數(shù)→ 前端/后端執(zhí)行工具 → 結果回傳模型 → 生成最終回答前端職責渲染工具調用卡片如正在查詢訂單…的過程可視化、多輪工具調用的狀態(tài)機管理4. Agent 核心架構ReAct 模式Reason推理 Act行動循環(huán)Agent LLM 記憶 工具 規(guī)劃多輪對話管理消息歷史裁剪策略、滑動窗口、摘要壓縮記憶機制短期記憶對話歷史vs 長期記憶向量庫常見前端場景聊天 UI 的消息狀態(tài)生成中/失敗/重試/停止、思考過程的折疊展示5. RAG檢索增強生成流程必背文檔切分Chunking→ Embedding 向量化 → 存向量庫 → 檢索 Top-K → 拼進 Prompt → 生成前端相關引用來源展示、上傳文檔的進度與狀態(tài)管理6. MCPModel Context Protocol2024~2025 的高頻新考點Anthropic 推出的模型-工具連接標準協(xié)議架構Host如 IDE/客戶端→ Client → ServerServer 暴露 tools/resources/prompts一句話背MCP 是AI 應用的 USB-C 接口統(tǒng)一了工具接入標準替代各家私有的 Function Calling 插件協(xié)議7. Prompt Engineering前端也要會結構化提示詞角色 背景 任務 約束 輸出格式少樣本 Few-shot讓模型輸出 JSON 的技巧與解析容錯markdown 代碼塊包裹問題四、Agent 前端特有的場景設計題面試壓軸設計一個 ChatGPT 式對話頁面——考察流式渲染、虛擬列表、消息狀態(tài)機、Markdown/代碼高亮渲染注意 XSS用DOMPurify消毒、中斷與重試長對話性能優(yōu)化——消息列表越來越長怎么辦虛擬滾動、避免全量 diff、分頁加載歷史網(wǎng)絡不穩(wěn)定下 SSE 斷連——斷線重連、Last-Event-ID續(xù)傳、降級為輪詢工具調用過程的 UI 交互設計——多步 Agent 執(zhí)行時的進度可視化、失敗重試粒度安全性——模型輸出渲染 XSS、Prompt 注入在前端的防御邊界說明注入主要靠服務端防御前端要做輸出消毒五、手寫代碼 Top 8背熟防抖 節(jié)流Promise 并發(fā)限制器用 fetch ReadableStream 實現(xiàn) SSE 流式解析? 本崗位最核心手寫題深拷貝處理循環(huán)引用數(shù)組扁平化 / 去重虛擬列表核心邏輯發(fā)布訂閱模式EventEmitterAbortController取消請求封裝SSE 流式解析參考實現(xiàn)必背骨架async function streamChat(url, body, onChunk, signal) { const res await fetch(url, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify(body), signal, }); const reader res.body.getReader(); const decoder new TextDecoder(); let buffer ; while (true) { const { done, value } await reader.read(); if (done) break; buffer decoder.decode(value, { stream: true }); const parts buffer.split(\n\n); buffer parts.pop(); // 處理分包最后一段可能不完整 for (const part of parts) { const line part.trim(); if (!line.startsWith(data:)) continue; const data line.slice(5).trim(); if (data [DONE]) return; onChunk(JSON.parse(data)); } } }六、復習優(yōu)先級建議優(yōu)先級內容理由P0JS 基礎 框架原理 手寫題任何前端崗位的門檻P0SSE 流式輸出 對話頁設計本崗位核心場景P1Function Calling / ReAct / MCPAgent 崗位差異化考點P1性能優(yōu)化虛擬列表、首屏常見追問P2RAG、Prompt 工程、多 Agent 架構加分項能聊出深度即可P2微前端、SSR視 JD 而定