简介一份面向前端求职者和初中级开发者的面试题汇总PDF聚焦HTML与CSS核心知识点覆盖从页面构建基础到浏览器兼容、性能优化、SEO策略等高频考点可帮助读者系统梳理知识体系、应对技术面试。整包共1个PDF文件大小2.16MB内容以文字解析为主题目按模块编号排列目录清晰方便按主题查阅。已有2441人学习下载。资料按模块汇总经典面试题并逐题展开涉及浏览器内核与测试、DOCTYPE与Quirks模式、divcss布局、alt与title、渐进增强和优雅降级、多域名存储资源、网页标准、cookies/sessionStorage/localStorage区别、src与href差异、图片格式与优化、微格式、缓存处理、HTML语义化、SEO、CSS选择器、隐藏DOM元素、hover问题、Css Hack、幻灯片效果等。各题不仅给出结论还补充浏览器差异与适用场景兼顾理论知识和实践经验适合求职冲刺阶段查漏补缺也可作为日常复习手册。1. 前端面试题汇总.pdf一份能当“面试作战手册”用的PDF前端面试的坑从来不是题不够多而是题太散。今天聊的这份《前端面试题汇总.pdf》不是简单往网盘里扔两百个问题就完事而是把“面试官会怎么问、怎么追问、怎么判分”这层逻辑也一并收进去的集合。适合两类人一是准备跳槽但心里没底的前端从业者二是刚学完基础、想用清单式自测来查漏补缺的初学者。它的价值不在于让你背答案而在于帮你建立“从题目到回答再到追问”的完整闭环。下面我按自己拆项目时的习惯把它当一份系统工程来解构。2. 面试题PDF里到底有什么从八股到实战的覆盖范围与筛选逻辑2.1 按模块拆解HTML/CSS/JS/框架/工程化/手写题拿到任何一份面试题PDF我做的第一件事不是从头开始看而是先翻目录看它把题目分成了几个模块。一份及格的前端面试题汇总至少会覆盖五个板块HTML/CSS、JavaScript、框架与生态、工程化与性能、手写代码题。有些还会额外加网络与安全、Node.js、设计模式但核心是前面五块。这里有个容易忽略的点模块之间的权重不是五等分的。我拆过模拟项目X里的类似PDF粗略统计下来JavaScript和框架通常占掉面试题量的50%以上HTML/CSS大概占20%工程化和手写题各占15%左右。如果你手里的PDF把大量篇幅放在冷门CSS属性上那它的参考价值就要打折扣。前端面试的底层逻辑是“基础要实、原理要透、场景要熟”所以JS的作用域、闭包、原型链、事件循环永远是高频中的高频框架题则集中在生命周期、响应式原理、虚拟DOM和组件通信。工程化题一般围绕webpack、构建性能、模块规范手写题则聚焦防抖节流、深拷贝、Promise.all、数组去重这些能一次性写完且结果可验证的题目。看PDF时不要只看题面要看每道题后面有没有“追问”。比如题目是“什么是闭包”好的PDF会接着写“闭包会内存泄漏吗怎么排查你写过的代码里有闭包滥用吗”这三个追问才是面试官真正想听的东西。如果只有孤立的问题没有追问链这份PDF就只是搜索引擎随手扒下来的题列表不是面试题“汇总”是面试题“堆积”。2.2 一份合格面试题集的筛选标准为什么不是所有题都值得背我知道很多人的习惯是把PDF里所有题挨个背一遍这是最蠢的做法也是最容易在真面试里翻车的。原因很简单面试官不是从PDF里出题他是从你的简历和你刚才的回答里出题。背题只能覆盖“题目-答案”的平面映射但面试是“概念-辨析-场景-手写”的立体连环追问平面覆盖根本不够。所以我判断一份PDF值不值得下会先看它的筛选逻辑。合格的汇总应该包含三类题第一类是必考题也就是不问都不正常的比如事件循环输出顺序、this指向、Vue或React的diff过程第二类是拉分题比如“如果让你从零实现一个前端路由你怎么做”这种题能区分出背题的人和真懂工程的人第三类是定位题比如“说一个你解决过的线上性能问题”这种题其实没有标准答案PDF里往往只会给思路框架比如“分析-定位-优化-收益”四段式而不是具体代码。如果再往细里看好的PDF还会在每道题后面标注“考点标签”。例如“数组去重”这道题考的不是你背的三种方法而是你知不知道 Set、Array.from、filter 的边界差异以及“对象数组去重怎么处理”。如果PDF里只有答案没有考点拆解那它练不出你的面试思维。我一般会这样筛选如果一道题的答案超过三屏且没有代码基本可以略过如果一道题需要你手写完再解释原理才是值得花时间重刷的题。2.3 文件结构与阅读顺序拿到PDF后第一天怎么用PDF不是小说别从第一页看到最后一页。我建议按下面这个顺序用第一天就能把资源盘活第一步先读目录和页数分配把五大模块画出来没目录的话就自己用书签简单拆一下。第二步每章只粗看前五道题判断它的“讲解深度”是结论型还是原理型。结论型题目通常是“X是什么”原理型题目通常是“X为什么是这样如果Y变了X会怎么样”。只挑原理型题目进入精读列表。第三步把PDF里的题按“已掌握、半生不熟、完全不会”三列整理成表。第四步定一个“每题最长思考时间”比如基础题不超过 30 秒手写题不超过 15 分钟超过就跳过再放进“待攻破”清单。下面是我常用的题量盘点表模板直接套用模块总题数已掌握半生不熟完全不会优先度HTML/CSS201262中JavaScript40101515高框架与生态3014106高工程化15555中手写题15348高这个表的作用不是让你做统计练习而是让复习时间分配有依据。高优先度模块每天至少 2 小时中优先度 1 小时低优先度就可以只翻错题。第一天跑完这一步你对这份PDF的判断就有了值不值得继续刷哪些章节可以只当字典查哪些章节需要逐行死磕。3. 把PDF变成可执行的复习计划三周冲刺与错题本方法3.1 先做“题量盘点”用表格统计高频考点分布上一章提到了盘点表这一章展开讲怎么把它变成复习计划。为什么要先盘点因为PDF里的题不是按真实面试频率排的很多汇总为了体量大会把 10 种 HTTP 状态码、20 个 CSS 选择器都塞进来但实际面试时间只有一个小时挖深度远比铺广度重要。你把所有题背完不如把高频题往死里挖透。我惯用的做法是第一步给PDF里的每道题标一个“面试出现频率”估计值。这个估计值不需要精确分高、中、低三档就行。判断依据是题目是否涉及原理、是否能追问、是否和实际开发强相关。比如“TCP 三次握手”算中频因为前端直接问得少但“从输入URL到页面展示发生了什么”是高频中的高频因为它能串起网络、渲染、JS执行、性能优化一整条链路。第二步把高频题单独列一页标记为“背完必须能脱稿直说”。第三步把中频题放进“每日见一面”清单不用背但看到问题要能在 10 秒内想到答题方向。第四步低频题直接删掉不看除非时间特别充裕。这里要提醒一句频率估计不要完全依赖PDF本身的分类。有些PDF把“盒模型”归为基础题但面试官完全可以延伸成“box-sizing 的 border-box 对百分比宽度有什么影响”这就变成了一道布局工程题。所以盘点时要自己做二次归类把题目从“知识点标签”升级成“追问链路标签”。3.2 按“掌握度-优先级”排复习顺序会的先过半生不熟的深挖很多人的复习顺序错了喜欢从最难的地方开始结果一天卡死在“原型链”上后面全乱。我现在的习惯是反着来先把已经掌握的题快速过一遍找回状态再把“半生不熟”的题作为主攻目标最后只剩“完全不会”的题每天集中攻破一两道不贪多。这样排有三个理由。一是保持正反馈会的题过一遍很爽能让你坐得住二是半生不熟的题最有可能在面试里翻车你以为知道但说不透比完全不会更伤因为面试官会认为你“基础不扎实而且不诚实”三是完全不会的题需要很长的消化时间塞在一天里除了挫败感什么都得不到。具体操作上我会给每道“半生不熟”的题写一句话“我的理解”不抄PDF答案。比如PDF里讲“Vue 的 computed 和 watch 的区别”我会写“computed 依赖响应式数据且缓存watch 是监听变化后执行回调computed 适合派生值watch 适合副作用操作”。写完后翻开PDF只看它有没有提到“computed 惰性求值”和“watch 的 deep 参数与 immediate 属性”提到了就说明我的理解接近面试要求没提到就补上去。这个过程是在做知识缝合不是背题。3.3 错题本落地从PDF题目到自问自答的笔记模板错题本不是把题目和答案抄一遍那是搬运工。错题本的价值在于记录“我为什么答错、面试官会怎么追问、下次怎么切入”。我用的模板很简单四段式现象原题是什么我是怎么答的。 卡点哪个环节卡住了是概念混淆、手写超时还是根本没听懂问题。 根因为什么卡比如“对事件循环的宏任务和微任务边界理解模糊”。 解法用一段 100 字左右的话把正解说清楚再补一个延伸问题。下面是一个适用于 Markdown 笔记的模板直接复制到你的笔记工具里用## 题目写出下面代码的输出 JS 代码题Promise.resolve().then(() console.log(1)); setTimeout(() console.log(2), 0); console.log(3); - 现象当时输出顺序写了 3 - 1 - 2以为微任务一定先于宏任务。 - 卡点没有考虑到 console.log(3) 是同步代码先于所有异步任务执行。 - 根因事件循环的“先同步、再微任务、再宏任务”是我背出来的但没有用这个顺序真正推演一遍。 - 解法同步代码立即执行微任务在同步代码结束后开始宏任务最后。延伸问题同一次宏任务里产生的新微任务会先于下一次宏任务执行吗注意模板里最后那个延伸问题这一步是错题本和普通笔记的分水岭。如果你能从每道错题里问出一个“反过来呢”“数量变了呢”“加个条件呢”之类的问题你就开始具备面试官视角了。错题本建议每周日晚上整体回看一次只看“卡点”和“解法”两栏能在 5 秒内反应出来就说明这道题真的过关了。4. 面试题的正确回答姿势面评官视角的答题框架与边界4.1 八股题别只背结论用“是什么-为什么-怎么用-坑在哪”组织回答网上很多人吐槽前端面试是“背八股”但同样背八股有人拿高分有人被挂差别在于是不是只背了“是什么”。我拿一道高频题举例“什么是闭包”。背题式回答是“闭包是指内部函数可以访问外部函数作用域中的变量”。这句话没毛病但面试官几乎不会就此打住他会继续问“那闭包是怎么形成的”“闭包一定会造成内存泄漏吗”“你在项目里用它做了什么”。所以我在用PDF刷题时会把每道原理题强行套进四段式里第一段是什么给出你自己的定义不要背教科书原文用“在我看来”开头。第二段为什么解释这种行为背后的机制比如闭包的产生是因为函数在定义时记住了外层作用域链。第三段怎么用必须说一个真实写过的场景比如用闭包封装防抖函数把 timer 变量藏在函数内部。第四段坑在哪比如闭包持有大对象导致内存无法释放或者循环里用 var 配合闭包引发变量共享问题。这套框架的好处是它逼着你把一道八股题变成一道项目描述题。面试官听到的不仅是“你懂闭包”而是“你用过闭包、知道边界、翻过车”。我见过很多面试者把PDF里的参考答案背得滚瓜烂熟但一问“你刚才说的这个特性在生产环境出过问题吗”就整个人卡住这就是典型的只有答案没有理解。4.2 手写题与场景题的边界能默写和能讲清楚是两回事手写题是PDF里最容易被低估的板块。很多人以为手写题就是拼手速默写代码只要看过的都能写出来但真实面试里你会发现面试官盯的不是你的代码而是你写代码时的思路和边界处理。拿“实现防抖函数”举例。第一层是基本功能在事件频繁触发时只执行最后一次。第二层是参数细节this 是否要正确绑定event 对象有没有穿透返回值怎么处理。第三层是扩展功能需要 immediate 参数时怎么保证第一次立即执行。第四层是面试官口头追问“如果用户在请求期间多次点击我要保留第一次请求怎么办”这就变成“节流和防抖组合”的问题。PDF里如果只给了三行核心代码而没有这四层边界的讨论那它对手写题的覆盖就是不合格的。我的做法是每写一道手写题都要在旁边标注“边界清单”。比如手写深拷贝边界清单至少要有循环引用怎么破、Date RegExp Map Set 怎么处理、symbol 和函数属性丢不丢、原型要不要保留、分支判断的顺序是什么。写完之后用清单逐条给自己提问答不上的就回PDF里找找不到就去查第三方资料补上。这样练出来的手写题不是“默写过的代码”而是“能应对追问的工程实现”。4.3 如何用PDF里的题目做模拟面试计时、追问与录音复盘一个人闭门刷题最大的问题是自欺欺人写错了也看不到自己皱眉的样子。所以我强烈建议至少把PDF里的高频题挑出 20 道做一次完整模拟面试。不需要真正的面试官有条件的拉一个同学互相问没条件的就用手机录音自己扮演提问者和回答者两个角色。模拟面试要卡三个参数单题时长、追问次数、输出方式。单题时长我一般设为 3 分钟超过就强制结束因为真实面试里不会让你无限制想。追问次数至少 2 次第一问是题面第二问是“为什么”第三问是“如果边界变了怎么办”。输出方式必须是口述不能用笔写因为写和说调动的是两套反应回路。录音复盘是这里最值钱的一步。回放时你会发现自己说了多少“然后”“那个”“就是”也会发现自己答到一半突然思路断掉。我会在复盘时把录音转成文字然后把回答里所有“好像”“可能”“我记得”这类模糊词标出来逐个重刷。这个方法很费时间20 道题可能要折腾一整天但效果比刷 200 道新题还大。因为模拟面试训练的是“在压力下组织回答”的能力PDF只是素材库你怎么调用素材才是真正的面试能力。5. 避坑手册刷题三个月才发现的高频坑与应对5.1 坑一只背答案不追问结果被“换个问法”直接击穿现象把PDF里的“ 和 的区别”“闭包是什么”“事件委托是什么”都背得滚瓜烂熟结果面试官问“if (a 1 a 2 a 3) 这个条件什么时候成立”就直接懵了。原因背答案时只记住了“结论句式”没有理解背后的“JS 类型转换机制”所以换一个变形问法就识别不出考点。解决每背完一道题强迫自己用“如果突然改变某个条件答案会变吗”来追问自己。闭包题就追问“如果返回值变成多个函数呢” 题就追问“如果是对象和原始类型比较呢”。能在PDF原题基础上自己变出三个变种这道题才算真掌握。5.2 坑二迷信“押题”忽略基础题比例现象把PDF里偏、难、怪的题刷得飞起比如“V8 引擎的隐藏类原理”“React 的 Lane 模型源码实现”结果到了面试现场面试官只问了一道“flex 布局实现两列等高”和“说下 get 和 post 的区别”。原因刷题时被“难题崇拜”绑架觉得简单题不刺激但实际面试里基础题通常占一半以上难深题只用来做区分度。解决用第二章的题量盘点表定期统计“已掌握”比例一旦高优先度模块的“已掌握”比例低于 70%就不允许开启新题。先把基础题做到闭眼能说再往里抠难的。我见过太多人倒在这明明基础题能拿分却在偏题上花光了时间。5.3 坑三手写题只在编辑器里写从不白板/纸上写现象在 VS Code 里写防抖、深拷贝、Promise.all 写得很顺有自动补全、有缩进、有报错提示自己觉得稳了结果面试用白板或共享文档写满脑子都是“分号要不要写”“这个缩进怎么不对”而且一写错就乱了节奏。原因编辑器的辅助功能掩盖了大脑对代码结构的真实记忆程度PDF里的手写题答案在编辑器里跑通不代表你能无辅助默写。解决从刷手写题第一天起就开一个空白记事本关掉代码提示甚至关掉语法高亮用纯文本写。写完再粘到编辑器里跑。我习惯把每道手写题至少在白板上默写两遍第一遍写不全很正常第二遍就能明显感觉到“肌肉记忆开始形成了”。5.4 坑四错题本只记录不回顾等于白做现象错题本整理得工工整整每道题都写了正解然后就没有然后了三周后翻开跟新的一样的。原因把“整理错题”这个动作当成了复习本身实际上整理只是开始回顾才是重点。解决给错题本设两个固定复习周期。第一天记录第三天重做一次不看答案第七天再重做一次满两周时只看“卡点”和“解法”两栏能秒答就标记为“已消化”不能秒答就再走一遍流程。我在模拟项目X里用这个“一三七十”节奏带过几个新人效果比盲目刷题好太多因为错题重做的次数决定了知识点从短期记忆转化为长期记忆的深度。5.5 坑五PDF更新滞后新技术题需要自行补充现象PDF里的题大多是两三年前收集的里面还在问“webpack 4 的 optimization 怎么配置”“Vue 2 的 filter 用法”但面试官已经开始问“Vite 的预构建原理”“React 19 的 use 这个 Hook”。原因面试题资料天然有滞后性前端框架每年都有变化面试官也会紧跟前沿靠一份静态PDF走天下不现实。解决把PDF当成“稳固基础底盘”再单独维护一个“热点补充清单”。我的做法是每季度整理一次把最近社区讨论多、招聘JD里出现的新技术名词拉一个列表再针对性地搜三到五道题人工补充进错题本。注意是补充不是替换基础底盘永远不能丢。6. 把PDF“用旧”从刷题到出题建立自己的面试题库6.1 用“反向出题法”消化每道题刷到后期你对PDF里的题已经太熟了熟到看到题面就知道答案这其实是个危险信号。这时候我会把身份从“被面试者”切换成“出题者”对每一道题做反向操作不看问题先看答案然后猜“什么题目需要用到这个知识点”。比如看到“浏览器渲染流程包括 DOM 树生成、样式计算、布局、绘制、合成”反向思考表诉我作为面试官会怎么问我会问“什么 CSS 属性会导致布局阶段被强制重跑”“为什么 transform 动画比 top 动画性能好”。这样猜出来的问题比PDF原本的问题高一个维度因为它们直指机制。6.2 给你的题目标注难度与追问链路等反向出题做顺手了就可以把整个PDF升级成自己的题库。具体做法是给每道题加三个字段难度星级1到5星、追问链路至少两个追问、一句话点评讲出这道题真正的考点。我给一个我的备注示例给你参考题目手写一个深拷贝 难度4 星 追问链路 1. 循环引用会导致什么怎么解决 2. 拷贝 Date 的时候 getTime 值会被正确复制吗 3. 如果你要求拷贝后保留原型继承关系代码要改哪 一句话点评考的不是手写而是边界意识。这样处理的库里只要有 30 道题你在面试时的表现就会非常稳。因为你已经不只是会做这 30 道题而是知道自己会怎么被追问、哪里容易卡、怎么把答案引向自己熟知的领域。这种掌控感是单纯刷题给不了的。6.3 把错题本转化为“面试前夜清单”面试前夜千万不要再从头刷PDF那会越刷越慌。我会在平时就把错题本里反复卡壳的题单独抽出来做成一张 A4 纸大小的“前夜清单”上面每道题只保留三列题面、我的回答第一句话、一个必须记住的数字或结论。比如“debounce 默认 delay 是多少”“Vue 3 的响应式用了 Proxy 但兼容性要怎么处理”。清单上的内容不超过 20 条每条都能在 1 分钟内过一遍。我最后一次跳槽就是用这份 PDF 先做盘点再刷错题本最后压缩成前夜清单。面试当天看到类似问题时脑子会自动跳出“第一句话怎么说”的路径整个过程顺畅得不像是在现场编答案。从那以后我每次整理新资源都强迫自己走一遍“盘点、分类、追问、出题”这套流程不再贪多求全。这份《前端面试题汇总.pdf》能否在你手里发挥价值其实只取决于你肯不肯把“看题”升级成“拆题”。希望帮到你。本文还有配套的精品资源点击获取