★ FEATURED ARTICLE 简介覆盖前端90%以上技术模块的面试题集锦面向准备跳槽或冲刺大厂的前端开发者内容涵盖HTML、CSS、JavaScript、TypeScript、Node.js、前端工程化、MVVM、计算机网络、前端安全、跨端开发、数据结构与算法、操作系统及手写题等模块基本对应前端八股文高频考点适合作为系统背诵和查漏补缺的主线。无论初入行的前端新人还是有一定经验的中级开发者都能按模块找到对应阶段的考点。压缩包内为单个PDF文件大小8.59MB文件结构简单、便于离线阅读和按目录检索。目前已有1373人学习下载是被不少前端求职者实际参考过的复习资料。从内容节选看题目颗粒度较细既有HTML DOCTYPE、CSS盒模型、闭包、原型链、事件循环、Promise等基础原理也有Vue/React diff、Webpack优化、XSS/CSRF、小程序双线程、Nginx与Docker等实战扩展约200道题可当作每日一题练习、模拟自测和面试前速记清单帮助快速梳理知识盲区节省搜索整理时间。1. 前端面试题200道别当“辞海”背要当“题眼清单”用“前端面试题200道八股文背就完事了”这句话我在刷题群里看到过无数次也在候选人嘴里听到过。但亲身实践下来真正靠背书拿下 offer 的人没有一个是真的把两百道题逐字背下来的。他们都是把题目当“题眼清单”用从题目反推考点从考点关联到场景再从场景预演面试官会怎么追问。这篇笔记适合三类人刚学完前端基础、面对两百道题无从下手的初学者正在准备暑期实习或社招、需要系统性查漏补缺的从业者以及背了一周却总觉得自己在“虚假复习”的求职者。我会按题目分类、刷题工具、踩坑排查和自测复盘四个方向把这套用法讲透。2. 剖析八股文题目按考点频率、场景追问和版本敏感度三根线分类拿到一份两百道的题库第一件事不是从头背而是先给题目“分线”。同一道题在不同复习阶段的价值完全不同有的考的是语法细节有的考的是工程判断还有的纯粹是版本的产物。我一般会把题库里的题分成三条线基础知识线、场景判断线、版本敏感线。这样分类之后每道题该花多少时间、该背到什么深度就一目了然了。2.1 遇到输出顺序的题就卡顿事件循环、宏任务与微任务这类题是前端八股文里最经典的“一眼定生死”题。比如下面这段代码console.log(1); setTimeout(() console.log(2), 0); Promise.resolve().then(() console.log(3)); console.log(4); // 输出顺序是多少答案是 1、4、3、2。整道题考察的不是“背顺序”而是你是否理解 JavaScript 的执行模型同步任务执行完毕后微任务队列会先于宏任务队列被清空setTimeout属于宏任务Promise.then属于微任务。面试官喜欢拿这类题目作为第一道题因为回答卡不卡、解释得清不清楚直接暴露了对事件循环的理解深度。我在复习这类题目时有一个很笨但有效的习惯拿到答案后不直接背而是自己在控制台跑一遍再把每一步执行时“当前调用栈里还剩什么”写出来。很多候选人能说出“微任务先于宏任务”但被问到“两个微任务之间穿插一个宏任务怎么办”就露馅了。这就是只背结论没推导过程的结果。所以我要求自己在刷题时把每道输出题都改成“预测后运行验证”错了就记录不轻易放过。常见考点还有闭包陷阱、原型链查找、var/let在循环中的区别、防抖与节流的实现。闭包的经典题是for (var i 0; i 5; i)里用setTimeout打印最终输出全是 5。这道题考的其实是变量作用域和闭包捕获而不是 setTimeout 本身。这些题目不是靠背题能应付的因为面试官随便改一个关键字答案就完全不同。拿这类题自我检验时我建议把“为什么”讲给自己听一句带过就算没过。2.2 布局与样式题BFC、flex、grid 的考点不是属性是判断力CSS 八股文常被低估。候选人普遍觉得“反正布局我工作里写得多”但一碰到“解释一下 BFC 是什么、怎么触发、解决了什么问题”就答得零散。BFC 这类题目考察的是渲染模型的底层认知块级格式化上下文如何影响外边距合并、高度塌陷、浮动清除。常见触发方式有overflow: hidden、display: inline-block、position: absolute等但要按场景选对而不是背全列表。flex 相关题目里最高频的是“解释flex: 1是什么意思”。很多人只记得“平均分配”但完整答案是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的简写。我习惯把简写展开成表格来对比记忆简写flex-growflex-shrinkflex-basis典型行为flex: 1110%按剩余空间平均分配flex: auto11auto按内容原始大小优先flex: none00auto不伸缩flex: initial01auto只允许缩小不允许变大grid 方面的重点则是grid-template-columns配合minmax、auto-fit做响应式布局以及fr单位与%的区别。这类题目背维度在于比如“三个等宽列、要求最小 200px、能自动换行”这类需求是用 flex wrap 还是 grid 更合适面试官常把问题包装成“你们项目中怎么做的”所以只看属性和口诀远远不够。2.3 浏览器与 HTTP 题缓存、渲染路径和面试流程里最值的考点“输入 URL 到页面展示”这道题几乎是前端面试题200道必收录的大综合题。它能把 DNS 解析、TCP 连接、HTTP 缓存、HTML 解析、CSSOM、渲染树、回流重绘全部串起来。准备这道题时不要照着网上的长答案背而要把每一段讲成“发生了什么”和“如果不这样会怎样”的两步结构。HTTP 缓存我习惯用一张表来记缓存类型相关头字段触发条件失效处理强缓存Cache-Control: max-age未过期直接命中过期后发请求协商协商缓存Last-Modified / ETag返回 304根据过期时间判断强制刷新no-cacheF5 / CtrlF5绕过强缓存重新请求另外一个高频场景题是“页面加载慢你怎么定位首屏问题”。这不是单纯背概念要能说出FP、FCP、LCP、CLS这四个指标分别衡量什么以及最常做的优化手段静态资源加哈希、图片懒加载、第三方脚本延迟加载、路由级拆包。准备这类题时要能顺手给出项目中一个具体优化数据否则面试官很难相信你真的做过。2.4 框架题要标记“版本”一口气分清 Vue2 与 Vue3、webpack 与 vite 的差异框架题是八股文的“重灾区分区”。原因在于很多题库长期不更新候选人也背了过时答案。比如 Vue2 的响应式是通过Object.defineProperty实现Vue3 改用Proxy。你不光要说出这个变化还要解释清楚为什么变defineProperty 无法监听新增属性和数组索引修改Vue3 用 Proxy 能直接代理整个对象同时性能上减少了递归遍历对象属性的消耗。这个“为什么”比“是什么”更值钱。React 版本差异同样需要注意。函数组件与 hook 的出现让类组件相关的旧题价值降低。现在被问得更多的是 hook 的依赖数组、useEffect清理函数、fiber 的调度机制。如果题库里还是大量“React 生命周期”旧题你要主动补上新内容。工具链方面webpack 4/5 的 loader 与 plugin 区别、vite 的预构建依赖原理也是现在面试里出现频率很高的题目。所以我在第 2 轮复习时会做一件小事在题库文件里给每道题加一个版本标签标签是“基础”“场景”“版本”之一。凡是“版本”标签的内容要求自己必须能说出当前主流工具与旧工具的差异。这个动作很费时间但能有效避免“背了价值观却不会应对生产环境”的尴尬。3. 把题库变成可背诵的题卡格式化、错题队列与自动化手写题两百道题背不下来很多时候不是记忆力差而是题目格式不适合记忆。原始的题库往往是一问一答的长段落看第一遍感觉全会过一天全忘。我给团队小伙伴推荐的做法是先把题库改造成“问-答-追问”三栏结构再按间隔重复策略安排复习节奏最后一类“手写代码题”用脚本自动化判卷。这一步做完两百道题的信息量至少减半背诵负担会瞬间小很多。3.1 用一段 Python 脚本把题目拆成“问-答-追问”三栏卡片我一般会把题库先整理成结构化的 JSON比如每个题目对象包含question、answer、followup三个字段。然后跑一个格式化脚本把它们输出成 Markdown 卡片和一个 CSV 表格。CSV 可以导入常见的间隔重复软件Anki 这类方便以牌组的方式刷。import json import csv def load_questions(path): with open(path, r, encodingutf-8) as f: return json.load(f) def to_csv(questions, output_path): with open(output_path, w, encodingutf-8, newline) as f: writer csv.writer(f) writer.writerow([编号, 题目, 参考答案, 面试官追问]) for idx, q in enumerate(questions, start1): writer.writerow([idx, q[question], q[answer], q.get(followup, )]) if __name__ __main__: questions load_questions(questions.json) to_csv(questions, anki_deck.csv)这段脚本做的事很简单读取一个 JSON 题库把每个题目的四个字段写入 CSV 的每一行。参数上questions.json的字段名要保持统一followup是可选字段没有追问的题留空即可。这个脚本的价值不在于技术含量而在于强迫你为每道题补充“追问”。因为写followup的过程就是预演面试官行为的过程。比如题目“解释闭包”参考答案可以写定义和例子追问我会填“闭包会导致什么内存问题如何排查”——这一栏才是拉开复习质量的差距所在。可以说做完这一步题目基本就变成你自己的表述了。3.2 用间隔重复而不是“一遍又一遍”来刷题刷题计划上我采用三轮制。第一轮是“分类速览”每天处理 40 道题只看不改花五天过完整个题库第二轮是“主动回忆”把每一道题当作面试题把答案盖住自己先讲一遍再对照第三轮只刷前两轮的错题以及所有带“版本”标签的题。这样安排的核心原因很简单主动回忆比重复阅读的记忆效率高得多。轮次时间安排每日题量完成标准第一轮第 1-5 天40 题能说出每道题的考点关键词第二轮第 6-10 天40 题不看答案能完整回答并复述追问第三轮第 11-14 天错题 版本题全部能通过“三分钟讲题”检验如果每天只能拿出 40 分钟我建议把时间全花在第二轮和第三轮第一轮速览甚至可以压缩到三天。原因是在间隔重复里“提取”的难度越大记忆效果越好。死记硬背很多时候看起来很努力但一到面试现场提取不出来依然等于白费。3.3 手写代码题别靠“眼睛会了”用 Node 脚本和十个断言来自动判卷手写代码题是两百道题里最容易“虚假复习”的地带。看答案时觉得每一步都很合理合上书一写就漏边界。我的做法是把这些题分成深拷贝、防抖节流、Promise.all、数组去重、发布订阅、模板字符串、红绿灯任务调度、递归遍历等高频手写题然后给每道题写一组自动化测试。下面以Promise.all为例function myPromiseAll(promises) { return new Promise((resolve, reject) { const results []; let count 0; if (promises.length 0) { resolve(results); return; } promises.forEach((p, index) { Promise.resolve(p).then((value) { results[index] value; count 1; if (count promises.length) resolve(results); }, reject); }); }); } // 测试断言 const p1 Promise.resolve(1); const p2 new Promise((res) setTimeout(() res(2), 100)); myPromiseAll([p1, p2]).then((res) console.log(通过用例1结果, res)); myPromiseAll([]).then((res) console.log(通过用例2空数组, res));这段代码里有两个必写的边界条件传入空数组时应该立刻 resolve任何一个 Promise reject 时要立即 reject并且后续结果不再处理。很多背模板的候选人在前五分钟都能写对主体逻辑但空数组和“先 reject 后 resolve”这两个场景往往直接暴露真实水平。给手写题做自动化判卷的最大好处是反馈即时。我在自己复习时建了一个hand_written文件夹每个题目一个文件每道题配至少六个用例包含正常输入、空输入、异常输入、异步时序、重复调用、循环引用。执行一次node xxx.test.js就知道自己到底有没有掌握。这个习惯延续到了后来的带人经验里比口头检查可靠太多。4. 背题背出“虚假自信”的五个坑现象、原因与排查清单这一章是我最想分享的血泪经验。带过的候选人中至少有七八个人在模拟面试时都出现过同一个问题题库背得滚瓜烂熟一问三不知的尴尬反而出现在最简单的地方。说白了就是背题的方法从一开始就埋了雷。下面五个坑只要出现一个面试大概率会翻车。4.1 背熟了却接不住追问现象面试官问“解释一下 Vue 的响应式原理”你能顺畅背出“Object.defineProperty 遍历对象属性”这一段。但面试官追问“如果给对象新增一个属性Vue2 能检测到吗”你愣了一下回答“应该能吧”。原因你背的是答案文本不是知识网络。答案里的每一句话都可能是追问的起点而背答案的人没有对每个词做“为什么”的预备。解决给每道题的人工整理三栏卡片时追问栏至少要列两个问题。并且追问的方向不要顺着答案写要“反着写”从答案的一个关键结论出发假设它不存在会怎样。这样练几道之后接追问的能力会立竿见影。4.2 题库版本太旧新题一出来就露怯现象模拟面试时聊到 Vue 3你说“响应式用的 defineProperty”面试官当场纠正。你解释说“我背的题库就是这么写的”。原因很多流传的面试题200道是两三年以前的版本里面还是老框架、旧工具链的题而现在的面试早已把 Vue3、React18、vite 作为默认背景。解决拿到一份题库后先做版本体检。凡是遇到 webpack4 默认配置、Vue2 生命周期、React 旧生命周期这类内容先查一下当前主流的替代方案是什么。我给题库里的每道题维护一个last_checked字段超过半年的题目重新核对一遍这个工作量并不大但能避免“背的很努力一开口就暴露过时”的尴尬。4.3 手写题只背模板边界条件一测就倒现象写防抖函数主体逻辑都对设置定时器、clearTimeout、重新计时。但你写的版本没处理this指向也没传参数面试官一运行测试用例就报错。原因背诵时只记了主干代码没有记住手写题的完整契约参数、上下文、返回值、边界缺一不可。解决所有手写题用测试用例驱动学习。我自己的标准是每道手写题至少能通过上述第 3 章给出的那组断言否则不算“会”。检验的指标不是“能写出来”而是“写出来能跑、边界条件全”。平时多跑几次测试面试时才有底。4.4 答案太“教科书”面试官听不出你的理解现象回答事件循环时你原封不动搬出“调用栈、任务队列、微任务、宏任务”四个名词但面试官追问“为什么要有微任务和宏任务的区分”时你说不出“因为微任务需要保证在渲染前完成比如 Promise 回调”。原因背诵材料为了严谨写的全是抽象定义缺少“为什么这么设计”和“现实场景中它解决什么问题”的视角。解决在整理每道题答案时强制要求自己在回答末尾补一句“如果没有这个机制/特性会发生什么”。能补上这句答案就从“背书腔”变成了“业务腔”面试官更买账。4.5 只刷题不写 Demo讲不出“项目里哪里用过”现象面到项目经历你说“用过防抖”但说不上来用在哪里。你说“优化过首屏速度”但说不出具体指标。面试官怀疑你根本没有实操经验尽管你的八股文背得不错。原因题库里的题目是被人为拆出来的知识点但工作里的技术是连着场景的。只按题目复习脑子里没有项目记忆可调用自然讲不出案例。解决每背一类题顺手在自己的代码仓库里找一个小例子挂上。比如背到缓存就在本地 Demo 里加一个静态资源哈希方案背到防抖就在搜索框里写一个真实版本。这样到“讲项目”环节每道题都变成了一个可讲的故事这正是八股文真正值钱的地方。5. 自证“会了”的三种方法录音复盘、追问模拟与二十分钟重写准备前端面试题200道到最后一周我不再增加新题而是开始“自检”。我会把复习模式从“输入”切换成“输出”因为输出的质量才是面试当天的质量。这里推荐三个我验证过很好用的方法按天循环执行直到面试前一天。第一种是录音复盘。每天随机抽 10 道题每道题只用三分钟口头回答同时打开手机录音。回放时只找两件事卡壳超过五秒的地方以及用了“嗯、那个、就是”这类语气词过密的地方。卡壳位置就是知识断层语气词多的地方通常意味着思路不够清晰。这个方法很残酷但没有它你很难发现自己的答案到面试官耳朵里其实是一团浆糊。第二种是追问模拟。找一道题先完整回答一遍然后假设自己是面试官从答案里挑一个关键词继续追问两轮。比如题目是“解释 HTTPS 的握手过程”回答里提到“对称加密”就要追问“为什么握手阶段要用非对称加密之后却换成对称加密”答不上来就回到第 2 章的分类逻辑里重新查漏补缺。这个方法能逼你把每道题的答案从二十秒扩展成一份两分钟的知识树。第三种是“二十分钟重写”。把手写题当作限时测试我给自己定了一条规则计时二十分钟内写完只允许留下一次console.log的调试机会写完立刻跑测试用例。第一次跑这个规则时我连防抖都写超时了不得不承认“眼睛会了”和“手会了”之间隔着一道巨大的鸿沟。从那以后我把所有手写题都用这个强度练了一遍上考场时明显从容很多。复盘模板我用的是最简单的表格列是“日期、题号、卡壳点、遗漏边界、下次巩固日”。每天不超过十行睡前花五分钟填完。别小看这个动作它会在两三天后形成一种“刻意遗忘”机制已经稳定的题目不再占据注意力真正不会的题目被反复挑出来复习效率比重新过一遍两百道题高得多。我自己最懊悔的一次是曾把一本几百题的题库背得滚瓜烂熟结果面试时被一句话打回原形面试官问“你说你理解了事件循环那现在页面卡顿你怎么定位是不是某个长任务导致的”我脑子里的题库没有这道题当场沉默。那次之后我才明白八股文不是背给面试官听的是背给自己用来组织经验的。把每一道题当成一条线索把每一个追问当成一个场景这套题才真正值两百道题的价。希望这篇笔记对你也有帮助。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
