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