我扒了最近的前端面经——2026年面试不背八股文了，考这5样
最近帮朋友看面经准备跳槽，翻了掘金和牛客上一堆面试帖，发现一件事：2026年的前端面经，和两年前完全不是一个物种了。
以前的面经是这样的：
- “手写一个快排”
- “说一下事件循环”
- “闭包和作用域链解释一下”
现在的面经是这样的：
- “给你30分钟，用Codex现场写一个XX功能”
- “这段AI生成的代码有什么问题？”
- “说说你平时怎么用AI工具的，遇到过什么坑”
面试这个东西，悄悄变了。下面说说具体怎么变的。
先说不考的：这些题正在退出面试
不是说完全不考了，而是这些题在面试中的权重已经明显下降：
| 题型 | 以前的权重 | 2026年的趋势 | 原因 |
|---|---|---|---|
| 手写排序算法 | 高频必考 | 大幅下降 | AI一秒生成，考手写没意义 |
| 八股文背诵 | 必考 | 权重下降 | 字节校招已"告别八股背诵"，聚焦工程能力 |
| 手写CSS复杂布局 | 常考 | 很少考 | AI写CSS又快又好 |
| API名记忆题 | 偶尔考 | 基本不考 | IDE补全+AI提示，记API是浪费脑细胞 |
| 手写Promise/EventEmitter | 高频 | 仍在考但变了 | 不再考"能不能写出来"，改考"能不能讲清楚原理" |
一个很有代表性的变化：手写Promise这道题没消失，但考法变了。
以前：“给你10分钟，手写一个Promise。”
现在：“你用AI生成了一个Promise实现，但有个边界case处理不对——找出来，解释为什么。”
从"你会不会写"变成了"你能不能判断AI写得对不对"。
现在考的5样
1. 现场用AI工具解题
代表公司：Meta、Shopify、Canva
Meta在2026年把前端编码面试改成了"AI-Enabled Coding"——60分钟，面试环境里内置AI工具，你不但可以用，而且他们观察你怎么用。
Shopify更激进：面试流程里有两轮专门的AI辅助编码环节，AI使用不是"允许"，是"预期你会用"。
面试官真正在看的不是最终代码对不对，而是：
| 观察维度 | 加分 | 减分 |
|---|---|---|
| Prompt质量 | 需求拆解清晰、约束条件写全 | 一句话甩给AI"帮我写个XX" |
| 迭代策略 | 拿到结果后追问、优化、加约束 | 接受第一次输出不做任何修改 |
| 错误判断 | 快速发现AI输出的问题并修正 | 代码报错了还在等AI自己修 |
| 边界意识 | 主动考虑AI没覆盖的边界case | 只跑happy path就说"写完了" |
备考建议：每天用Codex / Claude Code 写至少一个小功能。重点不是写什么，是练"怎么给AI提需求"的手感。面试时手忙脚乱地打Prompt，比手写代码慢还丢分。
2. AI代码审查能力
这是2026年前端面试中增长最快的题型。面试官给你一段AI生成的代码，让你找问题。
典型题目：
// 面试官：这是AI生成的一个搜索组件，找出里面的问题functionSearchResults({query}){const[results, setResults]=useState([]);const[loading, setLoading]=useState(false);useEffect(()=>{ setLoading(true);fetch(`/api/search?q=${query}`).then(res=>res.json()).then(data=>{setResults(data);setLoading(false);});},[query]);return(<div>{loading ?<Spinner />:results.map(r=>(<divkey={r.id}>{r.title}</div>))}</div>);}你能找出几个问题？
（答案在文末，建议先自己想）
这道题考的不是"你会不会写React"，是"你能不能看出AI写的代码哪里有坑"。AI写的代码看起来总是对的——语法正确、逻辑通顺、跑起来不报错。但生产环境一压测就炸。
面试官想知道的是：你把AI当"打字机"还是当"初级实习生"？打字机输出什么你就接受什么，实习生的代码你至少会review一遍。
3. 需求拆解能力
面试官给你一个模糊的产品需求，不是让你写代码，而是让你拆成可以交给AI执行的子任务。
典型题目：
“用户反馈首页加载太慢，优化一下。”
以前的回答：直接说"首屏渲染优化、图片懒加载、代码分割……"背方案。
现在的回答要求你现场拆：
第一步：定位问题 → 让AI跑一次Lighthouse，拿到LCP/FCP/CLS数据 第二步：分析瓶颈 → 让AI分析bundle size，找出最大的3个chunk → 让AI检查是否有render-blocking资源 第三步：逐个优化 → 任务1：让AI把首屏以下的组件改成lazyimport→ 任务2：让AI把图片组件加上loading="lazy"→ 任务3：让AI把字体加载改成font-display: swap 第四步：验证 → 再跑一次Lighthouse，对比数据面试官看的是你的拆解能力——同一个问题，拆得好的人用AI能在30分钟内搞定，拆得差的人和AI对话2小时出不来结果。
核心差距不在AI工具，在人脑里的"任务分解树"。
4. 系统设计中的AI决策
以前的系统设计题：“设计一个在线文档协作系统。”
现在加了一层：“哪些模块用AI生成，哪些必须手写？为什么？”
这道题没有标准答案，但面试官想听到的判断框架大概是：
| 适合交给AI的 | 必须人工把控的 |
|---|---|
| CRUD接口、数据校验 | 协同冲突解决算法（CRDT/OT） |
| UI组件搭建 | 权限系统设计 |
| 单元测试生成 | 数据一致性逻辑 |
| 文档/注释 | 安全相关（XSS/CSRF防护策略） |
| 常规性能优化 | 核心业务规则 |
面试官不需要你说"全用AI"或"全手写"。他们想看到的是判断力——你知道AI什么时候靠谱、什么时候不靠谱。
一个加分的回答是：“协同编辑的冲突解决我不会交给AI，因为这类算法的正确性依赖严格的数学证明，AI生成的CRDT实现很可能在边界case上出错，而且错了很难发现。但数据校验和CRUD我会让AI生成，因为这些模式成熟、验证简单。”
5. 工程判断力：知道AI的边界
这是最难准备的一项，也是高级候选人和初中级候选人拉开差距的地方。
面试官会用这类开放题来考察：
- “你用AI写代码遇到过最坑的一次是什么？”
- “有没有什么场景你试了AI觉得不如手写？”
- “你们团队用AI的流程是什么？有没有踩过坑？”
这类题的本质是：你真的用过AI写生产代码，还是只在demo里玩了玩？
面试官听几句就能判断：
| 真用过的人说的话 | 只玩过demo的人说的话 |
|---|---|
| “AI写的CSS在Safari上经常出兼容问题” | “AI写代码特别快” |
| “长对话后AI会忘记前面的约束” | “AI什么都能写” |
| “让AI改bug有时候越改越多” | “AI代替了很多手工活” |
| “我发现给AI看报错截图比复制文字好” | “我觉得AI以后会替代程序员” |
真实的、具体的、带坑的经验——这是AI面试题里最有价值的东西，也是没法临时准备的。
速查表：2026前端面试准备清单
| 准备方向 | 具体做什么 | 优先级 |
|---|---|---|
| AI工具熟练度 | 每天用Codex / Claude Code写一个小功能，练Prompt手感 | ⭐⭐⭐⭐⭐ |
| AI代码审查 | 让AI生成代码后故意不看直接跑，记录出了什么问题 | ⭐⭐⭐⭐⭐ |
| 需求拆解 | 拿到任何需求先拆成5个子任务再动手 | ⭐⭐⭐⭐ |
| 系统设计 | 画架构图时标注"AI生成"和"手写"模块 | ⭐⭐⭐⭐ |
| 踩坑经验 | 积累AI写代码的真实踩坑case，面试时直接说 | ⭐⭐⭐⭐ |
| 基础原理 | 八股文不用背，但Promise/事件循环/闭包的原理得懂 | ⭐⭐⭐ |
| 传统算法 | 不用手写，但复杂度分析和思路得会讲 | ⭐⭐ |
AI生成代码问题的答案
上面那段搜索组件至少有5个问题：
- 竞态条件：query快速变化时，旧请求可能覆盖新结果
- 没有错误处理：fetch失败了loading永远转圈
- XSS风险：query直接拼接URL，没有encodeURIComponent
- 内存泄漏：组件卸载后setState仍然执行
- 无防抖：每次query变化都发请求，输入时疯狂请求
看，AI写的代码跑起来完全没问题。但带着这5个bug上生产，用户一多就炸。这就是面试官要考的东西——你能不能看穿AI的"表面正确"。
一个判断
2026年的前端面试，不是在考"你会不会写代码"，是在考"你会不会用AI写代码"。
这两件事的差距，比大部分人想象的要大得多。
你面试时被问过AI相关的问题吗？最难的是哪道？评论区聊聊。