前端面试题这块我前前后后整理了大半年从最早收藏的散碎链接到后来的 Markdown 笔记再到现在的分类题库算是趟出了一条自己的路子。这份“前端面试题附答案”目前还在持续完善中今天拿出来分享一下我的整理思路以及里面已经沉淀下来的一部分高频考题和答案解析希望能给正在准备求职的朋友一点参考也欢迎同行一起补充。一开始我也走过弯路见到题就存存完就忘面完试才发现真正能用上的没几道。后来我换了个思路不追求题量先把知识体系搭起来再往里面填题目。这样做的好处是面试官不管从哪个角度切入我都能快速定位到对应的知识点不至于被一个问题带跑偏。这份题库适合三类人正在准备校招或社招的前端开发、想系统查漏补缺的初中级工程师以及需要出题的面试官。如果你只是想背几道题应付面试那可能要失望了但如果你想借此把前端知识串成体系这篇文章应该能帮到你。1. 为什么我决定整理一份自己的前端面试题库网上现成的面试题一抓一大把为什么还要自己整理这是我被问得最多的问题。答案其实很简单看别人的答案和使用自己的语言组织答案完全是两码事。1.1 前端面试的考察逻辑早就变了前几年前端面试流行背“八股文”什么盒子模型、闭包、原型链背熟就能过关。但现在的面试明显更偏向工程能力和原理深度很多公司喜欢从一个场景切入层层追问比如“首屏加载慢怎么优化”然后一路问到HTTP缓存、CDN、打包分割、服务端渲染。这种发散性很强的追问靠死记硬背是接不住的。我整理题库的第一个原则就是不再按“题目”组织而是按“知识模块”组织。同一个知识点可以衍生出十几种问法但底层逻辑是通的。比如事件循环可以问“setTimeout延时准确吗”也可以问“宏任务和微任务的区别”还可以给一段代码让你猜输出顺序。本质上都在考察同一个东西对异步模型的理解程度。1.2 用“出题人视角”倒逼知识体系闭环我自己开始尝试出题之后发现一个很有意思的现象很多我以为自己掌握的知识点一旦想把它写成一个有标准答案的面试题立刻就会发现漏洞。就拿深拷贝来说很多人都能写出“JSON.parse(JSON.stringify(obj))”也能说出它不能处理函数和undefined。但你要是问自己一句“那用递归手写一个深拷贝循环引用怎么解决Symbol属性要不要拷贝Map和Set怎么办”就会发现自己其实只懂了皮毛。所以我现在的习惯是每学一个知识点就模拟自己是面试官围绕它设计至少三个梯度的问题。这个习惯帮我快速找出知识盲区然后再去查资料、补源码、整理成答案。这个过程走完知识才真正变成自己的。2. 题库的整体架构与考点权重设计这份题库目前分为六大模块分别对应前端面试中最常被考察的领域。各模块的题目数量并不平均而是按照实际面试中的出现频率来配比。2.1 六大核心模块怎么划分我把整个前端知识体系拆成了六个部分基础三剑客HTML、CSS、JavaScript核心语法浏览器与网络渲染原理、HTTP协议、跨域、缓存框架与生态Vue、React及周边库工程化与性能构建工具、代码质量、部署优化计算机基础数据结构、算法、设计模式前端相关部分项目与软技能项目难点、协作沟通、职业规划这种划分方式参考了主流招聘JD上的能力要求也结合了我和同行交流时总结的面试风向。框架和技术栈可以换但浏览器原理、JS语言特性和工程化思维在哪个团队都逃不掉所以这部分我给的权重最高。2.2 每个模块的高频考点清单与优先级我给每道题都打了一个“优先级”标签分高、中、低三档。整理题集最忌讳眉毛胡子一把抓优先级能帮我在有限时间内先把高频题吃透。模块高频考点出现频率建议投入时间浏览器与网络从URL输入到页面展示、跨域方案、HTTP缓存极高2-3天JavaScript事件循环、闭包、this指向、Promise极高3-4天框架响应式原理、组件通信、生命周期、diff高3-4天CSS布局方案、BFC、移动端适配中高1-2天工程化webpack流程、性能优化手段、Tree Shaking中高2-3天计基与算法数组去重、防抖节流、排序、原型链中2-3天这个表格不是一次性定死的我每隔两个月会根据自己的面试实战反馈调整一次。比如某个知识点最近总被问到我就把它的优先级调高并补充更多追问变体。2.3 题目分级L1/L2/L3三档难度除了优先级我还给题目分了三个难度等级。L1是基础概念题适合考察候选人“懂没懂”L2是场景应用题考察“会不会用”L3是原理探究题考察“有没有深入”。分级的好处在于我不会在准备不充分时直接冲击L3题目士气很容易受挫。面试答题也是同样的道理先把L1题答得干净利落给面试官留下好印象再顺着节奏往L2、L3深入比一上来就硬刚原理效果要好得多。3. 高频考点与答案解析题库精华节选这部分我从题库里挑了几道代表性题目连同我整理的解析和参考答案一起放出来。这些题的共同点是考察面广、区分度高、面试中出镜率极强。3.1 浏览器与网络从URL输入到页面展示全流程题目在浏览器地址栏输入一个网址并回车到页面完整展示中间发生了什么这是一道经典的综合性题目面试官可以只问这一题就聊掉20分钟。L1答法只需要背出几个关键步骤L2要能解释每一步的机制L3还要能延伸到优化手段。参考答案L2概览URL解析浏览器判断输入是关键词还是合法URL如果是搜索词会走默认搜索引擎。DNS解析查询域名对应的IP地址依次查找浏览器缓存、操作系统缓存、本地hosts、路由器缓存、DNS服务器。建立TCP连接三次握手确认双方收发能力正常。现在大部分场景会叠加HTTPS还需要TLS握手少了它容易被中间人攻击。发送HTTP请求浏览器构造请求行、请求头、请求体服务器处理后返回响应。浏览器解析响应开始渲染HTML经过解析生成DOM树CSS解析生成CSSOM树两者合并成渲染树计算布局Layout确定元素位置绘制Paint到屏幕上脚本执行遇到JavaScript会阻塞解析所以需要async或defer或者把script标签放在body底部。追问环节这里我最常被追问的是“为什么script标签放在body底部”答案是JS执行会阻塞DOM解析和渲染放在底部可以保证先看到页面结构。但现代Web引入defer之后也可以放在head里defer会让脚本在HTML解析完成后按顺序执行。追问环节还有一个高频追问是“DNS解析的完整过程”面试官真正想听的并不是“查缓存、向上递归”而是你对“缓存分级”背后性能考量逻辑的理解。这也是我在整理答案时最深的体会面试题永远在问“是什么”但真正拉分的往往是“为什么”。3.2 CSS布局与视觉还原两套高频手写题CSS的题目在面试中占比不算大但一旦出了手写题画风就特别朴素比如“写一个两栏布局左边固定200px右边自适应”。这道题L1答法是flex布局L2要能补上溢出问题L3要谈谈兼容性和新旧方案对比。我用过一个很经典的flex解法.container { display: flex; } .left { width: 200px; flex-shrink: 0; } .right { flex: 1; min-width: 0; }其中min-width: 0是一个很容易被忽略的细节。flex子项默认min-width: auto当右侧内容是一长串连续英文或超长链接时子项会被内容撑开导致右边实际宽度超出预期。加min-width: 0等于告诉浏览器“这个子项的收缩底线是零不用管内容多宽”。这个细节在项目里踩过坑的人都懂。还有一个高频布局题是“实现圣杯布局或双飞翼布局”核心是中间栏优先渲染两侧栏固定宽度。现在最优雅的方案是Grid.container { display: grid; grid-template-columns: 200px 1fr 200px; grid-template-areas: left main right; } .left { grid-area: left; } .main { grid-area: main; } .right { grid-area: right; }代码简单到不用解释但面试官通常会追问“Grid和Flex的适用场景区别”。我的理解是Flex适合一维布局按“行”或“列”排布Grid适合二维布局能同时控制行和列。如果是整体页面骨架优先Grid如果是局部排列几个按钮Flex更顺手。3.3 JavaScript核心手写实现与原理追问JavaScript是前端面试的绝对主力尤其手写题几乎没有哪场面试能躲过。我题库里收录最多的就是这部分。手写防抖和节流是出场率最高的两道。防抖的核心思路是“触发后重置等待时间”连续操作只会执行最后一次节流的核心思路是“固定时间间隔内只执行一次”哪怕触发再频繁也只按节奏走。function debounce(fn, delay 300) { let timer null; return function (...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; } 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); } }; }两道题要注意的点非常实际第一返回的函数内部的this必须透传否则在对象方法场景下会丢指向第二防抖还要考虑是否要“立即执行”的版本有时候用户点击提交按钮希望第一次点击立即生效而不是等交互停止后300毫秒才执行。**事件循环Event Loop**也是一道必问题。我见过最简单的考法是给一段代码让你猜输出顺序比如console.log(start); setTimeout(() { console.log(timeout); }, 0); Promise.resolve().then(() { console.log(promise); }); console.log(end);输出顺序是start、end、promise、timeout。原因在于同步代码先执行完然后清空微任务队列Promise的then最后才轮到宏任务setTimeout。如果面试官继续追问“为什么需要微任务”答案也很关键微任务可以在当前宏任务结束前把一些异步回调尽快执行避免不必要的渲染等待。3.4 Vue与React框架底层响应式原理与组件通信框架题是题库里更新频率最高的模块。这两年Vue3和React Hooks的使用比例明显上升面试官的问题也越来越刁钻。Vue3的响应式原理是高频中的高频。核心是从Vue2的Object.defineProperty切换到了Proxy。我在答案里写了一句很直白的总结Object.defineProperty只能劫持已有属性的getter和setter所以对象新增属性、删除属性、按下标修改数组都难以感知Proxy可以代理整个对象任何操作都会触发拦截配合Reflect还能保留默认行为同时天然支持数组的深层响应。const reactive (target) { return new Proxy(target, { get(obj, key, receiver) { track(obj, key); return Reflect.get(obj, key, receiver); }, set(obj, key, value, receiver) { const result Reflect.set(obj, key, value, receiver); trigger(obj, key); return result; } }); };面试时把这段简版代码写出来比背一万句“Proxy比defineProperty强大”都有说服力。然后可以再补一句Vue3里的ref本质上是把基本类型包装成{ value: xxx }再走同一套响应式逻辑这也是为什么模板里要写.value而模板编译器会自动解包。React这边经常围绕Hooks出题。比如“useEffect的依赖数组是干什么的”这个问题看似简单但能引出责任链。依赖数组决定了effect何时重新执行空数组表示“挂载时执行一次”不传数组表示“每次渲染都执行”传了具体值则在该值变化时执行。更深的坑是闭包陷阱useEffect(() { const timer setInterval(() { setCount(count 1); }, 1000); return () clearInterval(timer); }, []);这个写法里count永远是初始值0因为effect闭包只捕获了第一次渲染的count。解决方式是用函数式更新setCount(prev prev 1)或者把count加入依赖。很多候选人能写出问题现象却说不清原因是“闭包捕获了旧值”这就很吃亏。3.5 工程化与性能优化构建产物与线上指标工程化题越来越卷从打包工具到上线发布面试官什么都问。我在题库里把高频工程化题整理成了两个方向。方向一是构建流程的理解。比如卷尺问题“webpack的构建流程是什么”答案的核心是入口解析依赖图不同文件交给不同loader转换plugin在编译生命周期里干增强的活儿最后把模块打包成浏览器能识别的静态资源。关键在于区分loader和pluginloader是“文件转换器”把A文件转成B文件plugin是“钩子订阅者”在打包过程的某个节点执行一段代码。方向二是性能优化的落地。这里一定要有具体的量化指标否则听起来很空。我经常用的开场口径是“先看LCP最大内容绘制再看CLS累积布局偏移。”然后补充对应的优化手段图片压缩转WebP、路由懒加载、CDN加速、HTTP缓存、避免同步脚本阻塞渲染。面试官一旦追问“LCP怎么排查”我从Performance面板的火焰图入手先看是哪类资源拖慢了LCP再针对资源做处理。这条链路是最容易让面试官点头的。4. 这套题集的正确打开方式有了一堆题和答案怎么用才是关键。不少人把题库从头到尾背一遍结果面试时一紧张全忘了。我自己用过几轮比较有效的方法分享出来供参考。4.1 面试前如何高效刷题三轮复习法第一轮是“通读”把所有题目的题干和答案过一遍目标是混个眼熟不用强记。第二轮是“默写”遮住答案只看题目用自己的话把答案说一遍能说出来的就是真掌握的说不出来的就是盲区标记下来重点补。第三轮是“互考”找一个同样在准备面试的朋友互相出题模拟面试场景。第三轮最有用也最容易发现自己的表达问题。我很多次都是在互考时发现自己答案逻辑不通然后反复打磨措辞最后形成一套“口语化但结构完整”的答案。这个版本和书面答案完全不同更自然也更可信。4.2 答题时怎么组织语言结论先行策略面试答题最忌绕弯子。面试官一天面四五个人没有耐心听你铺垫两分钟。我的习惯是“先说结论再拆原因最后举例。”比如问“什么是闭包”我不会从历史背景讲起而是先说“闭包是函数与其词法作用域的组合使得函数可以访问定义时的作用域变量”再举一个计数器例子最后说一句“注意闭包可能造成内存占用需要合理释放”。这套节奏能保证面试官在前30秒就抓到重点之后就算我展开得稍微啰嗦一点也不会影响核心信息的传达。在整理题库的时候我也会刻意把每道题的参考答案都按这个结构重写一遍答不出来的题目就先查资料再按这套结构整理。4.3 面试官视角一份题集可以怎么用当作面试官的时候我也会用这套题库出题。我的习惯是初级候选人先问L1题只要能把概念讲清楚就给过中高级候选人直接问L2和L3题重点看他在“不知道标准答案时的思考过程”能自己推导出结论的候选人比背熟答案的强太多。比如问“Vue的computed和watch有什么区别”很多人会答“computed有缓存watch没有”。但我会继续追问“缓存是怎么实现的”能说出“依赖的响应式数据不变时直接返回上一次计算结果”的人才说明真的理解。这些追问层的题目我在题库里单独用“追问”字段标注因为这是面试时信息量最大的部分。5. 整理过程中踩过的坑与避坑建议这套题库整理到第一版时我踩了不少坑。这里挑几个印象最深的说说希望能帮你少走弯路。5.1 面试答案起点太高反而容易暴露短板整理初期我看到源码解析类答案就抄一度把答案写得深入到了Vue源码的createReactiveObject底层实现。结果我根本背不下来面试时说话支支吾吾遮遮掩掩的。后来我把参考答案都改成了“面向上班级”的版本先保证能用自己的话讲清楚80%的核心逻辑再补充一句“底层实现我还看过XX部分”引导面试官往自己熟悉的方向问。这个策略让我在面试中舒服了很多因为答案的深度由我自己掌控而不是硬碰硬。5.2 答案“带口音”跟版本更新脱节前端生态更新太快Vue2时代整理的响应式题放到Vue3环境里就得大改。React的类组件生命周期题现在也渐渐被函数式组件和Hooks的题替代。我之前吃过大亏拿着旧答案去面一个用Vue3的项目组人家问“computed能不能支持异步”我还在讲Vue2的Watcher一下就露怯了。现在我给自己立了个规矩每次面试前把题库里涉及框架部分的题目全部过一遍标记“此答案适用于Vue2/React18及以下Vue3已更新”。这个习惯虽然麻烦但避免了在面试现场说出过时答案的尴尬。5.3 代码题一定要亲手跑一遍手写防抖、节流、深拷贝这类题目光看答案是会骗人的。我整理题库时把代码示例从网上拷过来自己运行了一遍才发现好几处细节问题比如防抖的this透传写错了深拷贝没处理循环引用直接爆栈。这类问题如果不实测面试时照着写就会卡壳。因此我的建议是每收录一道代码题就在本地编辑器里把代码敲一遍跑一两组测试数据。即使你的环境里没有专业测试框架打开浏览器控制台验证输出结果也完全够用。5.4 别让“完善中”变成拖延借口这份题集之所以叫“完善中”是因为它确实是持续更新的状态。但这中间有一个很容易踩的坑总觉得“再学一个模块再发出来”结果大半年过去还是草稿。我的处理方式是每周固定更新一到两个模块哪怕只加三道新题也算进度。我还用Git管理整个题库每次修改提交一次看着commit记录越来越多内心会有一种“框架搭好了内容在稳步补充”的踏实感。有兴趣的朋友也可以用这种方式把题库当作一个小型开源项目来迭代既能复习知识也能锻炼文档组织能力。最后分享一点个人体会面试题只是敲门砖真正值钱的是你把一道题翻来覆去琢磨透之后脑子里那张越来越清晰的知识网络。我的题库还会继续更新下去但更希望看到这份整理思路后你能动手建一个属于自己的题库把“看别人的答案”变成“写自己的答案”。到那时候面试就不是背题而是聊天了。