简介面向前端求职者的系统性面试题集锦覆盖HTML、CSS、JavaScript、TypeScript、Node.js、前端工程化、MVVM框架、计算机网络、前端安全、跨端开发、数据结构与算法、操作系统与手写题等前端90%以上的技术模块适合校招、社招及复习巩固的中级前端工程师。整包仅1个PDF文件体积8.59MB内容按模块组织便于离线阅读与按模块刷题目前已有1373人浏览学习有一定参考热度。题目共200道经典八股文与高频追问从HTML/CSS基础、JavaScript闭包与事件循环、TypeScript类型体系到浏览器渲染、跨域CORS、重排重绘、HTTP/2与HTTPS握手、Vue/React双框架原理、webpack与Vite构建优化再到XSS/CSRF安全、小程序双线程、Nginx与Docker运维等每类都配有常见考点梳理也包含Promise、防抖节流、算法与手写题等实战型问题。适合笔试面试前集中背诵亦可作为技术面自查清单帮助快速覆盖前端核心知识体系。1. 前端面试题200道八股文背就完事了先搞清楚“背”的真正目标前端面试题200道八股文背就完事了——这个标题在开发者社区里流传得很广。我一开始觉得它是在调侃应试直到我在模拟面试里连续遇到好几个“题量很大却一开口就露馅”的候选人才意识到问题不在背不背而在怎么背。八股文是前端面试的题库底座它把闭包、原型链、事件循环这些反复被问的知识点压缩成一套高效复习索引。但200道题只是原料不是结果。你需要一套筛选、分类、输出和复盘的方法把题目内化成自己的表达。这篇笔记就是给准备走这条路的人准备的。2. 把200道题拆成五个模块筛选、打标与三轮复习节奏八股文题库最忌讳的就是从头到尾顺序刷完。翻开第一页是“CSS盒模型是什么”翻到中间是“说说事件循环”再翻几页变成“webpack的Tree Shaking原理”——知识点来回跳背到第五十道时前二十道已经忘得差不多了。我见过太多人的复习轨迹就是这样的热情高涨地刷了几天然后停在某个章节再也不翻开。真正有效的做法是先给题库做结构化处理让题目按照知识域归堆再按复习周期循环。2.1 按知识域把200道题重新分组常见的前端面试题无论出处是哪套题库内容分布其实都很有规律。我一般会把它们拆成五个模块JavaScript语言基础、CSS与页面布局、浏览器与网络、框架与工程化、手写代码题。这个分组不是按题目难度分的而是按“面试现场会怎么问”分的——面试官很少按题库顺序提问他们习惯按技术栈把问题串起来。我第一次做200道题分组时用了整整一个晚上把题目一条条复制到表格里给每道题打上标签。过程枯燥但收益在后面会显现出来。分组之后你会发现JavaScript这组往往占掉半壁江山闭包、this、原型链、事件循环、Promise这些关键词反复出现CSS组的核心集中在盒模型、BFC、居中方案、Flex与Grid浏览器与网络组则围绕“从输入URL到页面展示”、HTTP缓存、跨域、HTTPS握手展开。模块常见题目关键词占比预估JavaScript 语言基础闭包、this、原型链、事件循环、作用域、Promise约 40%CSS 与页面布局盒模型、BFC、层叠上下文、居中、Flex、Grid约 15%浏览器与网络渲染流程、HTTP 缓存、跨域、HTTPS、WebSocket约 15%框架与工程化生命周期、虚拟 DOM、diff、Hooks、构建优化约 15%手写代码题防抖节流、深拷贝、Promise.all、call/apply/bind约 15%这个比例是我从多份题库里统计出来的经验值不追求精确但足以指导复习资源的倾斜方向。分完组之后接下来要做的不是急着背而是把题目按“记忆优先级”再标一轮。2.2 给题目打标高频题、基础题、冷门题同一个模块里的题目考察频率完全不一样。我通常会再多打两个标签一个是“面试必问”一个是“追问变体”。比如闭包这一块“什么是闭包”“闭包有什么优缺点”属于必问题型而“闭包在循环里打印 i 的问题”“闭包如何实现私有变量”就属于追问变体——它们往往是在候选人答完第一问之后面试官顺水推舟抛出来的。打标完成后复习顺序就变得非常清晰先背必问高频题建立知识框架再背基础题补全细节最后扫一眼冷门题混个印象即可。冷门题不是完全不看而是不需要投入同等精力。比如“CSS 的 will-change 属性怎么用”这种题背住核心结论就够了不值得花一晚上去研究它的每一种取值在浏览器里的表现。用表格整理题目时我会额外加一列“我的答案”用自己的话写一遍。这个步骤很多人会跳过它恰恰是关键——后面第三轮复习时这一列会变成你最有价值的复盘材料。2.3 三轮复习节奏周循环与错题回炉题目整理好之后我给自己的节奏是三轮每轮一周左右。第一轮按模块顺序过一遍目标只是“看到题目能想起大概意思”不需要完美复述。第二轮改为随机抽题从所有模块里各抽几道目标是能脱稿讲出完整逻辑。第三轮只复习错题和自己感觉生疏的题把时间花在刀刃上。随机抽题这一步千万别省。按模块顺序背会产生一种典型错觉——你背熟了“JS基础”之后大脑会形成惯性看到题目关键词就知道后面跟什么答案。但面试官不会按你的惯性出牌你上一题在聊CSS下一题可能就跳到浏览器缓存。随机抽题就是在模拟这种“频道切换”的感觉让你在任何切换之下都能接住题目。三轮结束之后200道题基本能覆盖面试现场七成以上的直接提问。剩下的三成靠的是如何把背过的知识点串起来应对追问——这个能力在后面的章节会细说。如果你在分组和打标阶段就败下阵来后面的方法论都是空中楼阁。所以我才会把“整库”放在这章而不是直接进背诵。3. 背八股文的正路自问自答、录音比对与模拟追问很多人对“背八股文”的理解就是打开题库把参考答案读一遍、画重点、再读一遍直到能默写。这种做法在应试教育里有效但在前端面试场景里效果很差。面试官坐在你对面他要的不是默写而是听你讲。同一个知识点书面表达和口头表达之间的差距往往就是面试通过与否的差距。我自己在准备面试时吃过这个亏。有一道“浏览器缓存机制”的题我把强缓存、协商缓存的概念记得很熟在纸上写也没问题。但第一次模拟面试时面试官让我“说说”缓存机制我开口第一句就说成了“强缓存就是直接从内存读”被追问了一句“那 from disk cache 算什么”整个人就卡住了。后来我才明白背题的主体应该是“嘴”不是眼睛。3.1 用自问自答代替默读从“看到了”到“说得出”自问自答的操作方式很简单把题目列表放在左边把答案遮住看到题目后开口讲一遍讲完再对照答案看自己漏了什么。听起来像常识但大部分人的问题在于讲得太短——用三五句话就把一道题答完了其实远远不够。面试现场的一道八股题理想的回答时长在两到三分钟。不是让你长篇大论而是要把概念、原理、场景、坑点都覆盖到。以“事件循环”为例一条合格的口头回答应该包含宏观任务与微观任务的定义、浏览器端的执行流程、宏任务与微任务各自的典型例子、以及“Promise.resolve 和 setTimeout 谁先执行”的结论。如果只讲了“就是执行完一个任务再执行下一个”面试官大概率会追问细节追问几次答不上来这题的分数就丢了。我给自己设了一个硬性标准每道题闭眼讲两分钟中途不能出现三次以上的停顿。讲不出来的题目返回去看答案然后合上答案再讲一遍。这个过程不需要什么工具拿手机录音就行。但如果你手里的题目量大用脚本随机抽题会更接近真实面试状态。import random questions [] with open(frontend_questions.txt, r, encodingutf-8) as f: questions [line.strip() for line in f if line.strip()] # 每次随机抽 10 道模拟面试官乱序提问 sample random.sample(questions, 10) for idx, q in enumerate(sample, 1): input(f{idx}. {q}\n先自己讲一遍讲完按回车看下一条) print(本轮自测结束把卡壳的题记录到 review.txt 里)这段脚本的逻辑很直接从题目文件里按行读取随机抽取十条每条等你讲完再按回车进入下一条。关键在于“先讲再看答案”的顺序不能反一反过来就变成朗读了。我在文件里存的是完整的题目列表不带答案答案单独放在另一个文件里只有卡壳时才打开看。用这种方式每天过一轮随机抽题两周后你的口头表达流畅度会有明显变化。3.2 录音回放听自己的漏洞比看答案更扎心讲题的时候很少有人意识到自己有口头禅。我回放自己的录音时发现只要遇到稍微复杂的知识点就会不自觉地加“就是”“然后”“那个”这类填充词一分钟里能出现七八次。填充词会让面试官觉得你思路不清晰即使内容本身是对的说服力也会打折。录音回放的方法是这样用手机或电脑录下自己刚才的自问自答然后回放对照参考答案检查三点——知识点有没有遗漏、逻辑顺序对不对、口头禅多不多。前两点是做内容校准第三点是做表达校准。内容正确但表达涣散在一对一的面试场景里是很吃亏的。对录音中表现差的题目我会单独建一个“重讲清单”隔天再录一次对比前后的差异。这个过程持续两三轮之后大部分题目的答案都能做到“不假思索脱口而出”的程度。这个状态一旦达到你背题的主要矛盾就从“记不住”变成了“会不会被追问”——那正好是下一个要解决的问题。3.3 模拟追问给每个知识点准备三层深度背完一道题的答案只是起点面试官几乎不可能只问你到底为止。面试题里大量存在“面试官的一句话把候选人逼到墙角”的情况。举一个最有代表性的例子候选人背了“Vue 的响应式原理是 Object.defineProperty”面试官接一句“那它为什么不能侦听数组的变化”这就从记忆层直接跳到原理层了。八股文的高频题几乎每一道都需要准备三层深度的回答第一层是概念定义第二层是底层机制第三层是缺陷或边界。还是用响应式原理举例第一层说“通过 Object.defineProperty 劫持对象属性的 getter 和 setter在数据变化时通知视图更新”第二层能说出“递归遍历对象属性实现深层劫持、依赖收集发生在 getter 中、派发更新发生在 setter 中”第三层能说出“数组的 push 等方法不会触发 setter所以 Vue 2 重写了数组原型上的七个方法”。能说到第三层这道题才算真正背完了。我建议在整理题目的时候每条答案后面额外写两个小字段“追问一”“追问二”。不用每道题都写但核心高频题一定要写。这一步前期费时间后期收益极大——面试时你不会慌因为你早就知道面试官大概会往哪个方向追。即使追问没踩中你准备的点你也会因为准备过深度问题而更镇定答不上来也能用“这部分我了解有限但从我准备过的方向看……”来兜底。4. 高频手写题与答题范式从“背答案”到“讲推导”前端面试八股文里手写代码题是另一个让很多人头疼的板块。它的特殊性在于答案本身很固定但考察的不只是你能不能写出来还有你对自己代码的理解。两大常见误区一是只背代码不背思路——面试官让你逐行解释就卡壳二是只背实现不背优化——面试官问“如果入参是嵌套对象怎么办”就沉默。这一章拿三道最高频的手写题展开每一道都按“实现 参数说明 面试追问”的方式拆开。4.1 手写防抖与节流高频中的高频防抖和节流是手写题里出现概率最高的两道题没有之一。常见写法是直接背一份模板但面试官更希望看到你理解两者的核心差异。一句话概括防抖是“停下才执行”节流是“固定频率执行”。只记住这句话还不够还得能写出对应的代码并且解释每一行在干什么。// 防抖n 秒内多次触发重置计时器最后一次触发后才执行 function debounce(fn, delay 300) { let timer null; return function (...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; } // 节流n 秒内只执行一次用时间戳判断是否到达执行点 function throttle(fn, interval 300) { let last 0; return function (...args) { const now Date.now(); if (now - last interval) { last now; fn.apply(this, args); } }; }参数说明fn是要执行的函数delay和interval控制时间窗口。两个实现都用了apply(this, args)来修正执行上下文这是面试官很容易追问的点——如果直接写fn()在事件回调里 this 会丢失。防抖用clearTimeout重置计时器节流用Date.now()对比时间差这是两者的核心机制差异。面试追问通常从“如果节流要求第一次触发就立即执行第二次开始按固定频率怎么做”入手准备的时候可以把 leading 调用的场景一并练习。4.2 手写深拷贝从 JSON 方案到递归边界深拷贝是前端面试里另一道高频题。最直观的答案是用JSON.parse(JSON.stringify(obj))但面试官一定会追问“这个方法有什么缺陷”。典型的缺陷有三个函数和 undefined 会被丢弃Date 会被转成字符串循环引用会直接报错。只用 JSON 方案在很多面试官眼里是不够的。function deepClone(target, map new Map()) { if (target null || typeof target ! object) { return target; } // 解决循环引用已经拷贝过的对象直接返回副本 if (map.has(target)) { return map.get(target); } const clone Array.isArray(target) ? [] : {}; map.set(target, clone); for (const key of Object.keys(target)) { clone[key] deepClone(target[key], map); } return clone; }参数说明map参数用来记录“原对象到副本”的映射关系这是循环引用场景下的关键。递归遇到引用类型时先查map存在就直接返回避免无限递归。Object.keys只遍历自身可枚举属性不会带上原型链上的属性这是一个容易被追问的细节。这段代码没有处理特殊对象如 Date、RegExp、Symbol真面试时可以说“生产环境我会用结构化克隆或内置工具这段是核心思路”——不要嘴硬说它完美承认边界反而显得真实。4.3 答题范式先结论、再原理、后场景背书式回答手写题最容易犯的错误是上来就写代码。手里拿着笔一句话不说就开始操作还没写多久就发现忘了某个细节然后反复涂改给面试官的观感很差。我一般建议用“先结论、再原理、后场景”的范式来组织回答。先结论明确告诉面试官这道题是什么、核心思路是什么。比如防抖的核心思路是“用闭包保存计时器”。再原理边写代码边解释每一段的作用让面试官觉得你是真的理解而不是默写。后场景写完代码之后补一句“实际项目里防抖用在搜索框输入、节流用在滚动事件或 resize 事件”这句话能立刻拉高作答的完整度。这套范式不只适用于手写题也适用于概念题。回答“闭包是什么”时先给结论“函数内部引用了外部作用域的变量形成引用链”再讲原理“函数创建时会保存其词法环境”最后补一个使用场景“事件回调、防抖节流、模块化都离不开闭包”。一道八股题能被你拆成三层来讲面试官就很难再用追问把你问穿。5. 背题翻车的5个常见坑从记错版本到追问失语背题背得很认真的人翻车往往不是败在“没背”而是败在一些看似无关的细节上。这些坑我几乎每隔一阵就会在模拟面试里见到一次。总结成五条每一条都是“现象—原因—解决”的结构。能躲开这五个坑你的背诵效率至少能再上一个台阶。5.1 现象背了旧版本的框架原理被追问新特性就卡壳有位候选人把某框架的生命周期函数背得滚瓜烂熟从beforeCreate到beforeDestroy一字不差结果面试官问“这个生命周期被废弃后改用哪个钩子替代”他当场愣住。原因是他的题库停留在老版本没有跟着框架更新。解决的办法很简单在整理题目时顺手核对一下版本。看到框架相关的题先去官方文档确认当前版本的最新生命周期或对应 API 是什么然后把旧版本的答案标注为“历史版本了解即可”。八股文也会过期抱着过期的答案等于抱着过期的地图越背越偏。5.2 现象背题顺序变成了答题顺序跨模块提问时反应迟缓按模块复习的人容易出现这个现象背完 CSS 模块就只想着 CSS面试官突然问了一道 JS 题反应明显慢了半拍。原因是大脑习惯了顺序取用记忆随机切换时检索路径被拉长。解决的办法就是用上一章推荐的随机抽题脚本每周至少做三轮乱序自测。一开始乱序测试的得分会明显低于顺序测试这很正常多练几次之后大脑就会适应“随时切换频道”的节奏。面试现场没有模块顺序所以平时练习就不能给自己顺序的舒适区。5.3 现象口头禅和填充词太多回答显得犹豫不决录音回放是最容易发现这个坑的方式。很多人听自己的录音前觉得自己表达还行听到录音后才意识到“然后”“就是”“那个”出现了多少次。口头禅被面试官捕捉到之后哪怕内容扎实也会被定义为“基础不牢固”。解决的办法是先承认问题存在然后在每次自问自答时刻意放慢语速。停顿比填充词好你完全可以停顿两秒想一想再继续说这比说一堆“就是然后”显得更稳重。熟练之后再把语速逐渐恢复填充词就不会轻易回来了。5.4 现象默写没问题开口讲时逻辑混乱有些题你在纸上写答案条理清晰但是用嘴讲就前后颠倒、漏步骤。这是因为书写和口头表达调用的组织能力不同。书写的逻辑顺序是“概念—原理—场景”讲出来时容易因为紧张或惯性把最熟的“场景”先说出来反而把概念落在后面。解决的思路是给每道高频题写一个“口述提纲”只写三四个关键词。举例来说讲 HTTP 缓存时提纲可以是“强缓存—协商缓存—刷新操作—cache-control 字段”。用关键词串起全篇按照提纲顺序讲逻辑就不会散。5.5 现象只背答案不背推导面试官换一种问法就懵八股文最危险的翻车点就在这里。候选人背了“深拷贝的实现方式”面试官换成“循环引用为什么会导致栈溢出”他就答不上来了——因为他背的是答案不是原理。同理“防抖怎么实现”变成“防抖为什么需要闭包”也能筛掉一批只背模板的人。办法只有一个在背诵阶段主动给每道题的答案追加“为什么”。一是在看答案时多问自己一句“这个方案为什么这么设计”二是用“如果…会怎样”的方式给自己出变体题。不需要每道题都做但高频必问题一定要做这一层功课。把“答案是什么”升级成“答案为什么是这样”你背的东西就从孤立知识点变成了可迁移的能力。6. 考前3天用主题链路把200道题串成一张网考前冲刺阶段继续一道道背题性价比很低。这个阶段真正该做的是“连点成线”把分散在各模块的题目按主题串成若干条知识链路每条链路都能覆盖十几道题的考点。一次讲完整条链路比逼自己再刷两遍题库有效得多。最经典的一条链路是“从输入 URL 到页面展示”。这一条能串起来的题目数量非常可观HTTP 请求过程、DNS 解析、TCP 三次握手、HTTP 缓存、浏览器渲染流程、JavaScript 执行与阻塞、重排与重绘、性能优化里的白屏优化。你要是能把这条链路从头到尾讲清楚等于一口气回答了二十多道八股题而且这些答案因为相互关联会显得更有体系感。我的做法是找一张白纸从“用户输入 URL”开始写每经过一个环节就停下来回忆这个环节对应的题目和答案。写不出来的地方标记一下然后回到题库补看再合上笔记重新写一遍。用这种方式把几个核心链路全部过一遍考前那种“什么都看过又什么都记不牢”的焦虑感会缓解很多。另一个值得做的动作是把自己的错题清单从头到尾看一遍。错题就是你的知识短板考前没有时间补齐所有短板重点赌高频考点里的短板就够了。每道错题花五分钟重讲一遍实打实比泛泛复习强。我习惯把错题里最典型的十道录下来考前最后一天睡前听一遍不是为了记内容而是为了找“脱口而出”的感觉。八股文面试的底层逻辑其实是考察你在紧张状态下还能不能稳定输出专业知识。背题是积累随机抽题是模拟录音回放是校准主题链路是整合。这套流程跑下来之后你会发现面试题的价值不是让你死记硬背而是帮你把零散的前端知识织成一张网。网织好了面试官无论从哪个方向戳过来你都能接住。这是我经历过多轮面试准备后验证过的路子。希望帮到你。本文还有配套的精品资源点击获取
