)
1. LLM 基礎(chǔ)概念面試必問概念一句話必背TokenLLM 的最小文本單位計費和上下文窗口都按 token 計上下文窗口context模型一次能看到的最大 token 數(shù)超出需截斷/壓縮/摘要Temperature采樣隨機性參數(shù)越高越有創(chuàng)造性越低越確定幻覺Hallucination模型編造事實前端要做來源引用與兜底提示System Prompt設(shè)定角色與行為約束的系統(tǒng)級提示詞2. 流式輸出前端核心實戰(zhàn)必背SSEServer-Sent Events是主流方案基于 HTTP單向服務(wù)端推送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 頻繁更新導(dǎo)致卡頓用 ref 緩沖 requestAnimationFrame 批量刷3. Function Calling / Tool Use必考流程必背用戶提問 → 模型決定調(diào)用工具返回結(jié)構(gòu)化 JSON 參數(shù)→ 前端/后端執(zhí)行工具 → 結(jié)果回傳模型 → 生成最終回答前端職責(zé)渲染工具調(diào)用卡片如正在查詢訂單…的過程可視化、多輪工具調(diào)用的狀態(tài)機管理4. Agent 核心架構(gòu)ReAct 模式Reason推理 Act行動循環(huán)Agent LLM 記憶 工具 規(guī)劃多輪對話管理消息歷史裁剪策略、滑動窗口、摘要壓縮記憶機制短期記憶對話歷史vs 長期記憶向量庫常見前端場景聊天 UI 的消息狀態(tài)生成中/失敗/重試/停止、思考過程的折疊展示5. RAG檢索增強生成流程必背文檔切分Chunking→ Embedding 向量化 → 存向量庫 → 檢索 Top-K → 拼進 Prompt → 生成前端相關(guān)引用來源展示、上傳文檔的進度與狀態(tài)管理6. MCPModel Context Protocol2024~2025 的高頻新考點Anthropic 推出的模型-工具連接標(biāo)準(zhǔn)協(xié)議架構(gòu)Host如 IDE/客戶端→ Client → ServerServer 暴露 tools/resources/prompts一句話背MCP 是AI 應(yīng)用的 USB-C 接口統(tǒng)一了工具接入標(biāo)準(zhǔn)替代各家私有的 Function Calling 插件協(xié)議7. Prompt Engineering前端也要會結(jié)構(gòu)化提示詞角色 背景 任務(wù) 約束 輸出格式少樣本 Few-shot讓模型輸出 JSON 的技巧與解析容錯markdown 代碼塊包裹問題四、Agent 前端特有的場景設(shè)計題面試壓軸設(shè)計一個 ChatGPT 式對話頁面——考察流式渲染、虛擬列表、消息狀態(tài)機、Markdown/代碼高亮渲染注意 XSS用DOMPurify消毒、中斷與重試長對話性能優(yōu)化——消息列表越來越長怎么辦虛擬滾動、避免全量 diff、分頁加載歷史網(wǎng)絡(luò)不穩(wěn)定下 SSE 斷連——斷線重連、Last-Event-ID續(xù)傳、降級為輪詢工具調(diào)用過程的 UI 交互設(shè)計——多步 Agent 執(zhí)行時的進度可視化、失敗重試粒度安全性——模型輸出渲染 XSS、Prompt 注入在前端的防御邊界說明注入主要靠服務(wù)端防御前端要做輸出消毒五、手寫代碼 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)); } } }六、復(fù)習(xí)優(yōu)先級建議優(yōu)先級內(nèi)容理由P0JS 基礎(chǔ) 框架原理 手寫題任何前端崗位的門檻P0SSE 流式輸出 對話頁設(shè)計本崗位核心場景P1Function Calling / ReAct / MCPAgent 崗位差異化考點P1性能優(yōu)化虛擬列表、首屏常見追問P2RAG、Prompt 工程、多 Agent 架構(gòu)加分項能聊出深度即可P2微前端、SSR視 JD 而定 Agent前端面試基礎(chǔ)
1. LLM 基礎(chǔ)概念面試必問概念一句話必背TokenLLM 的最小文本單位計費和上下文窗口都按 token 計上下文窗口context模型一次能看到的最大 token 數(shù)超出需截斷/壓縮/摘要Temperature采樣隨機性參數(shù)越高越有創(chuàng)造性越低越確定幻覺Hallucination模型編造事實前端要做來源引用與兜底提示System Prompt設(shè)定角色與行為約束的系統(tǒng)級提示詞2. 流式輸出前端核心實戰(zhàn)必背SSEServer-Sent Events是主流方案基于 HTTP單向服務(wù)端推送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 頻繁更新導(dǎo)致卡頓用 ref 緩沖 requestAnimationFrame 批量刷3. Function Calling / Tool Use必考流程必背用戶提問 → 模型決定調(diào)用工具返回結(jié)構(gòu)化 JSON 參數(shù)→ 前端/后端執(zhí)行工具 → 結(jié)果回傳模型 → 生成最終回答前端職責(zé)渲染工具調(diào)用卡片如正在查詢訂單…的過程可視化、多輪工具調(diào)用的狀態(tài)機管理4. Agent 核心架構(gòu)ReAct 模式Reason推理 Act行動循環(huán)Agent LLM 記憶 工具 規(guī)劃多輪對話管理消息歷史裁剪策略、滑動窗口、摘要壓縮記憶機制短期記憶對話歷史vs 長期記憶向量庫常見前端場景聊天 UI 的消息狀態(tài)生成中/失敗/重試/停止、思考過程的折疊展示5. RAG檢索增強生成流程必背文檔切分Chunking→ Embedding 向量化 → 存向量庫 → 檢索 Top-K → 拼進 Prompt → 生成前端相關(guān)引用來源展示、上傳文檔的進度與狀態(tài)管理6. MCPModel Context Protocol2024~2025 的高頻新考點Anthropic 推出的模型-工具連接標(biāo)準(zhǔn)協(xié)議架構(gòu)Host如 IDE/客戶端→ Client → ServerServer 暴露 tools/resources/prompts一句話背MCP 是AI 應(yīng)用的 USB-C 接口統(tǒng)一了工具接入標(biāo)準(zhǔn)替代各家私有的 Function Calling 插件協(xié)議7. Prompt Engineering前端也要會結(jié)構(gòu)化提示詞角色 背景 任務(wù) 約束 輸出格式少樣本 Few-shot讓模型輸出 JSON 的技巧與解析容錯markdown 代碼塊包裹問題四、Agent 前端特有的場景設(shè)計題面試壓軸設(shè)計一個 ChatGPT 式對話頁面——考察流式渲染、虛擬列表、消息狀態(tài)機、Markdown/代碼高亮渲染注意 XSS用DOMPurify消毒、中斷與重試長對話性能優(yōu)化——消息列表越來越長怎么辦虛擬滾動、避免全量 diff、分頁加載歷史網(wǎng)絡(luò)不穩(wěn)定下 SSE 斷連——斷線重連、Last-Event-ID續(xù)傳、降級為輪詢工具調(diào)用過程的 UI 交互設(shè)計——多步 Agent 執(zhí)行時的進度可視化、失敗重試粒度安全性——模型輸出渲染 XSS、Prompt 注入在前端的防御邊界說明注入主要靠服務(wù)端防御前端要做輸出消毒五、手寫代碼 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)); } } }六、復(fù)習(xí)優(yōu)先級建議優(yōu)先級內(nèi)容理由P0JS 基礎(chǔ) 框架原理 手寫題任何前端崗位的門檻P0SSE 流式輸出 對話頁設(shè)計本崗位核心場景P1Function Calling / ReAct / MCPAgent 崗位差異化考點P1性能優(yōu)化虛擬列表、首屏常見追問P2RAG、Prompt 工程、多 Agent 架構(gòu)加分項能聊出深度即可P2微前端、SSR視 JD 而定