前言
大家好，我是木斯佳。
相信很多人都感受到了，在AI浪潮的席卷之下，前端领域的门槛在变高，纯粹的"增删改查"岗位正在肉眼可见地减少。曾经热闹非凡的面经分享，如今也沉寂了许多。但我们都知道，市场的潮水退去，留下的才是真正在踏实准备、努力沉淀的人。学习的需求，从未消失，只是变得更加务实和深入。
这个专栏的初衷很简单：拒绝过时的、流水线式的PDF引流贴，专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上，尝试从面试官的角度去拆解问题背后的逻辑，而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招，目标是中大厂还是新兴团队，只要是真实发生、有价值的面试经历，我都会在这个专栏里为你沉淀下来。专栏快速地址
温馨提示：市面上的面经鱼龙混杂，甄别真伪、把握时效，是我们对抗内卷最有效的武器。
面经原文内容
📍面试公司：百度-Agent部门
🕐面试时间：近期
💻面试岗位：前端一面
📝面试体验：超级轻松，面试官诱导式提问，无算法无手撕
❓面试问题：
- 面试官自我介绍，介绍团队部门和业务
- 日常开发中你是怎么用ai的？
- 你是怎么进行测试的？
- 你用ai到现在花了多少钱？
- 项目中的打字机效果是怎么实现的？
- 打字机的帧率是多少，是怎么计算的？
- markdown渲染你有没有什么安全措施？怎么防XSS
- CSRF攻击
- 为什么要用SSE做ai输出，不用websocket？
- 项目：ai生成歌曲肯定需要一定的事件，你怎么让用户等待更加舒畅？
- 等待进度条的当前task是怎么做的？（SSE自定义事件）
- 为什么播放器要全局状态管理？
- 假设我现在要做一个效果，就是根据音乐有音波的震动感，你会怎么做，谈谈思路就可以。
- 为什么你的项目要用Next.js
- 你知道哪些性能指标呢？你是怎么监测的呢？
- 简历上写了擅长性能优化，跟我说说你怎么做的吧。
- 你觉得ai会取代前端嘛？
- 你了解过哪些动画库或者UI库嘛？
- 通知一面过了
反问
- 如果能顺利通过面试的话，老师您更推荐我去哪个部门？
- 大厂的开发流程协作模式是怎么样的？
- 我现在用ai有个问题，日常开发中使用ai，如果代码是ai写的我会有深深的愧疚感，但是又不能不用。用了ai写代码，代码能力就慢慢地下降了，导致进一步使用ai，形成恶性循环，不知道老师您是怎么看的？
来源：牛客网 Furina_forcalors
💡 木木有话说（刷前先看）
上周暑期实习放出了一些岗位，有需要的同学可以多关注各个招聘网站。
📝 百度Agent前端一面·深度解析
🎯 面试整体画像
| 维度 | 特征 |
|---|---|
| 面试风格 | AI工作流深挖型 + 项目细节追问型 + 开放讨论型 |
| 难度评级 | ⭐⭐⭐⭐（四星，AI工作流、Workflow设计较深） |
| 考察重心 | AI辅助开发流程、测试策略、SSE/WebSocket、性能优化、XSS/CSRF |
| 特殊之处 | 面试官诱导式提问，从"怎么用AI"引导到"Workflow和Skill设计" |
🔍 逐题深度解析
二、日常开发中你是怎么用AI的
回答思路：具体列举使用场景，而非笼统说"用AI写代码"。
常见场景：
- 代码生成：重复性代码（表单、CRUD）、组件骨架
- 调试辅助：粘贴错误信息，AI分析原因和解决方案
- 代码审查：让AI检查边界条件、潜在bug
- 单元测试：AI生成测试用例
- 文档生成：API文档、组件使用说明
- 重构建议：AI分析代码结构，提出优化建议
加分回答："我会审查AI生成的每一行代码，确保理解其逻辑，不会盲目信任。"
三、你是怎么进行测试的
回答思路 ：面试官想引导你说出Workflow和Skill，而非简单回答"手动测试"。
测试策略：
- 单元测试：Jest/Vitest测试核心逻辑
- 集成测试：测试组件间交互
- E2E测试：Playwright/Cypress模拟用户操作
- AI辅助测试：让AI生成边界条件测试用例
Workflow思路（面试官引导的方向）：
- 主流程固定（如：拉取代码 → 安装依赖 → 运行测试 → 构建）
- 节点任务交给Agent/LLM（如：AI根据代码变更自动生成针对性测试）
text
# Workflow示例
1. 代码提交 → 触发CI
2. AI分析变更文件 → 生成测试用例
3. 运行测试 → 失败则AI分析原因并修复
4. 通过则继续构建五、项目中的打字机效果是怎么实现的
回答思路：流式输出 + 逐字追加DOM。
javascript
async function typewriter(text, element, speed = 30) {
for (let i = 0; i < text.length; i++) {
element.textContent += text[i]
await new Promise(r => setTimeout(r, speed))
}
}优化点：
- 使用
requestAnimationFrame批量更新 - 对长文本分块处理，避免阻塞主线程
六、打字机的帧率是多少，是怎么计算的
回答思路 ：打字机效果的"帧率"实际是逐字追加的频率。
- 通常每秒30-60字符（
speed = 16-33ms/字符） - 可以通过
requestAnimationFrame测量实际渲染帧率 - 字越多，整体耗时越长，需要考虑用户感知
javascript
// 测量帧率
let frameCount = 0
let lastTime = performance.now()
function measureFPS() {
frameCount++
const now = performance.now()
if (now - lastTime >= 1000) {
console.log(`FPS: ${frameCount}`)
frameCount = 0
lastTime = now
}
requestAnimationFrame(measureFPS)
}七、Markdown渲染的安全措施与XSS防护
回答思路：AI生成的内容可能包含恶意脚本，需要净化。
解决方案：
- DOMPurify：成熟的HTML净化库
- 白名单机制：只允许安全标签和属性
javascript
import DOMPurify from 'dompurify'
const sanitized = DOMPurify.sanitize(aiGeneratedHTML, {
ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'a', 'code', 'pre', 'h1', 'h2', 'h3'],
ALLOWED_ATTR: ['href', 'target', 'rel']
})GFM（GitHub Flavored Markdown）白名单 ：允许GFM标准语法，禁用<script>、<iframe>、onclick等危险内容。
八、CSRF攻击
定义：跨站请求伪造，攻击者诱导用户点击恶意链接，利用用户的登录态发起非法请求。
防御措施：
- CSRF Token：请求携带随机Token，服务端校验
- SameSite Cookie ：设置
SameSite=Strict或Lax - 验证Referer/Origin头
九、为什么用SSE做AI输出，不用WebSocket
回答思路：参考之前面经。
| 维度 | SSE | WebSocket |
|---|---|---|
| 方向 | 单向（服务端→客户端） | 双向 |
| 实现复杂度 | 低 | 中 |
| 自动重连 | 内置 | 手动 |
AI对话场景：服务端生成→客户端接收，是单向流，SSE足够且更简单。
十一、等待进度条的当前task是怎么做的
回答思路 ：使用SSE自定义事件实现任务进度推送。
javascript
// 服务端发送自定义事件
res.write(`event: taskProgress\n`)
res.write(`data: ${JSON.stringify({ task: 'analyzing', progress: 30 })}\n\n`)
// 客户端监听
const source = new EventSource('/api/generate')
source.addEventListener('taskProgress', (e) => {
const { task, progress } = JSON.parse(e.data)
updateProgressBar(task, progress)
})十二、为什么播放器要全局状态管理
回答思路：播放器的状态（播放/暂停、当前歌曲、音量、播放列表）被多个组件共享。
全局状态管理的优势：
- 跨组件共享状态，避免props逐层传递
- 状态变化可预测（通过actions/mutations）
- 便于调试（DevTools时间旅行）
适合的工具：Pinia、Vuex、Zustand、Redux
十三、音乐音波动效的实现思路
回答思路：面试官提到"音乐文件可以解析成数组"，这是关键提示。
实现步骤：
- 解析音频 ：使用Web Audio API的
AnalyserNode获取音频频域数据 - 获取数据 ：
analyser.getByteFrequencyData()获取频率数组 - 映射到视觉：根据频率值决定波形柱的高度
- 动画循环 ：使用
requestAnimationFrame实时更新
javascript
const audioContext = new AudioContext()
const analyser = audioContext.createAnalyser()
// 连接音频源到analyser
function draw() {
const dataArray = new Uint8Array(analyser.frequencyBinCount)
analyser.getByteFrequencyData(dataArray)
// 根据dataArray绘制波形
requestAnimationFrame(draw)
}十四、为什么项目用Next.js（SSR的吐槽）
回答思路：用户吐槽"SSR很多浏览器API不能用"，面试官指出"那是SSR用错了地方"。
正确理解：
- SSR适用场景：内容型网站（博客、电商、新闻），需要SEO和首屏速度
- CSR适用场景：高交互应用（后台管理系统、音视频编辑器），依赖浏览器API
Next.js混合模式：
- 页面级SSR：营销页、详情页
- 客户端渲染：交互组件
十五、性能指标及监测方法
核心Web Vitals：
- LCP（最大内容绘制）：≤2.5s
- INP（交互延迟）：≤200ms
- CLS（布局偏移）：≤0.1
监测方法：
- Lighthouse：本地分析
- Web Vitals JS库：上报真实用户数据
- Chrome DevTools Performance：录制分析
javascript
import { onLCP, onINP, onCLS } from 'web-vitals'
onLCP(console.log)
onINP(console.log)
onCLS(console.log)十六、性能优化具体做法
回答思路：结合项目实际，分维度列举。
| 维度 | 具体做法 |
|---|---|
| 加载优化 | 代码分割、图片懒加载、路由懒加载、资源预加载 |
| 渲染优化 | 虚拟滚动、transform动画、减少重排 |
| 网络优化 | CDN、Gzip、HTTP缓存（强缓存+协商缓存） |
| 运行时优化 | 防抖节流、Web Worker、避免内存泄漏 |
十七、AI会取代前端吗
回答思路：开放问题，展现思考深度。
示例回答 ：
"AI不会取代前端，但会重新定义前端的工作方式。重复性、模板化的代码会被AI替代，但复杂业务逻辑、架构设计、用户体验优化、跨团队协作这些'人性化'的工作，AI短期内无法胜任。前端会从'写代码的人'变成'用AI写代码的人'，需要更强的系统设计能力和产品思维。"
反问三：AI依赖导致代码能力下降怎么办
回答思路：这是很多开发者面临的真实困境。
示例回答 ：
"感谢老师的提问，这也是我一直在思考的问题。我的理解是：
- 分层使用：AI用来写重复性、模板化代码，核心算法和架构自己写
- 必须理解：AI生成的每一行代码都要理解，不理解的绝不采用
- 定期练习：脱离AI手写代码保持手感
- Code Review ：让AI解释自己的代码，验证理解
AI应该是'副驾驶'，而不是'自动驾驶'。驾驶技术还得自己掌握。"
📚 知识点速查表
| 知识点 | 核心要点 |
|---|---|
| AI使用场景 | 代码生成、调试、测试、文档、审查 |
| 测试Workflow | 固定主流程 + Agent节点任务 |
| 打字机效果 | 逐字追加DOM + requestAnimationFrame优化 |
| XSS防护 | DOMPurify净化、白名单标签/属性 |
| CSRF | Token、SameSite、Referer校验 |
| SSE vs WebSocket | 单向/双向、实现复杂度、自动重连 |
| 音波动效 | Web Audio API + AnalyserNode + requestAnimationFrame |
| Next.js | SSR适合内容型，CSR适合高交互 |
| 性能指标 | LCP/INP/CLS，Lighthouse/Web Vitals监测 |
| AI取代前端 | 不会取代，但会改变工作方式 |
📌 最后一句：
AI时代的面试，核心考察会不会用AI解决问题、能不能把思考过程清晰表达。