前端圈这些年一直有个很有意思的现象：一边是社区里天天有人喊"八股文没用，面试造火箭、工作拧螺丝"，一边是招聘市场上，简历过了、项目聊得也不错，最后倒在基础题上的候选人一抓一大把。我最近帮团队做了好几轮前端面试，前后聊了二十多个人，感触最深的是，很多人不是不努力，而是把八股文复习成了"背题"，背得滚瓜烂熟，但我换个角度问一句"为什么"，就答不上来了。这篇总结，我想换个思路聊聊前端面试八股文这件事：哪些题是高频必考的，每道题背后到底在考什么，以及怎么把这些知识点组织成一套真正属于你自己的表达框架。
这个总结适合正在准备前端面试的人，不管是应届生、社招转岗，还是想跳槽但有段日子没看基础的老人，都适用。内容会覆盖JS核心机制、浏览器与网络、框架原理、工程化和手写题这几大块，每一块我都会结合我实际面试别人的经验，说说面试官欣赏什么样的回答，也说说候选人最容易在哪里翻车。读完你不需要再去翻几十篇零散的面经，直接把这一篇吃透，再配合项目经历做串联，面试表现绝对能提升一个档次。
1. 先说清楚：面试官到底想从八股文里挖什么
很多人一听到"八股文"就觉得是在考背诵能力，这个理解其实从一开始就跑偏了。我自己面试的时候，问闭包、问事件循环、问虚拟DOM，绝不是想听候选人把某篇博客上的定义一字不差地背出来，那样反而会让我警觉：这人是不是只会背题？我想验证的其实是三件事：第一，这个人有没有完整、可自洽的知识体系；第二，他能不能把这个知识点跟实际开发场景关联起来；第三，遇到一个不确定的问题时，他有没有分析推导的能力，而不是只会"答案是A"。
举个真实的例子。我问过很多候选人"什么是闭包"，常见的回答有两种。第一种："闭包就是函数里面返回另一个函数，内部函数可以访问外部函数的变量。"这个回答对不对？对，但太单薄了，只能算一句定义。第二种："闭包的本质是函数结合它定义时所处词法作用域的引用，这个引用让内部函数在外部函数执行完之后，仍然能访问外部函数内的变量。它的产生是因为JS采用词法作用域，变量的查找在定义时就决定了，同时JS的垃圾回收机制会判断一块内存是否还被引用，闭包中引用的变量不会被回收，所以能在函数执行完后继续存活。"这种回答一出来，我基本就能判断这个人对作用域、执行上下文、垃圾回收是有通盘理解的。
所以复习八股文的正确姿势，不是背答案，而是建立**"问题 -> 原理 -> 场景 -> 坑"**的四段式结构。拿到任何一个知识点，先问自己：它解决的是什么问题？它的核心机制是什么？我在项目里什么时候用到过它？大家最容易踩的坑是什么？四个维度都能说清楚，这个知识点才算真正拿下了。这比焦虑地刷一百道题有用得多。
另外还有一点，面试官会通过八股文考察你的表达逻辑。同一句话，先讲结论再展开，和讲了半天绕不到重点上，给人留下的印象是完全不同的。我在后面每个章节里给的回答框架，都是按"先给结论、再拆原因、最后举例"的顺序组织的，你可以直接套用。
2. 高频JS八股：从原型链到事件循环的底层逻辑
JS核心机制是前端面试的绝对主场，基本能占到一半以上的问题量。这一块没有捷径，但有一些高频中的高频，值得你投入最多时间。我按面试中出现频率排序，逐个说说怎么答才能让面试官眼前一亮。
2.1 原型链：别只背"proto、prototype"，要能画出链路
原型链是JS基础题里的常青树，几乎每一场面试都会碰到。但很多人回答的方式是背名词："每个函数都有prototype属性，每个对象都有__proto__属性，对象访问属性时先找自身，找不到就沿着__proto__往上找，直到Object.prototype和null。"这个回答没问题，但太"教科书"了。
我建议你在回答里加上一条完整的链路，会显得理解特别扎实。比如定义一个构造函数Foo，new Foo()得到的实例foo，链路是这样的：foo的__proto__指向Foo.prototype，Foo.prototype的__proto__指向Object.prototype，Object.prototype的__proto__是null。而Foo自身的__proto__指向Function.prototype，因为所有函数都是Function构造出来的实例。Function.prototype的__proto__又指向Object.prototype。这里最容易被绕晕的点是：Function也是一个对象，所以它也有__proto__，而Function.prototype是一个"函数对象"，它虽然看起来像函数，但它的__proto__指向的是Object.prototype，不是Function.prototype。这个细节我在面试中问过很多次，能答上来的人确实不多。
除了画链路，面试官还喜欢让你手写instanceof。这个手写题特别能检验你是否真懂原型链。核心思路是：取构造函数的prototype，然后不断取目标对象的__proto__，判断是否相等。我给你一个我整理过的简易版本：
function myInstanceof(left, right) { let proto = Object.getPrototypeOf(left); const prototype = right.prototype; while (true) { if (proto === null) return false; if (proto === prototype) return true; proto = Object.getPrototypeOf(proto); } }注意这里用的是Object.getPrototypeOf而不是直接访问__proto__，因为前者是标准方法，能在更严格的场景下工作。答完代码之后，最好补一句：instanceof的判断可能因为ES6的Symbol.hasInstance被自定义而改变，但平时的使用场景里默认行为就够了。这种"补充边界情况"的意识，很容易成为面试里的加分项。
2.2 闭包：用垃圾回收的视角讲，才算讲透了
闭包这个知识点，前面的章节里提过它的定义，这里我再补充一下更深入的答题思路。闭包题想要答出彩，关键是把话题引到作用域链和垃圾回收机制上。
先说作用域链：JS里的函数在定义的时候，它的内部属性[[Environment]]会保存当前词法环境的引用。函数执行时，会创建一个新的词法环境，并把它的外层词法环境指向[[Environment]]里存的引用，这样一个查找变量的链条就形成了。闭包之所以能"记住"外部变量，本质上就是这条链条没有被切断。
再说垃圾回收：现代JS引擎的垃圾回收以可达性为依据。一个对象只要还能从全局对象或者其他根节点访问到，就不会被回收。闭包中引用的外部变量，因为仍然存在于被内部函数引用的词法环境中，这个环境又是可达的，所以不会被回收。理解了这一点，你就能解释一个经典面试题：为什么下面的代码里，每次循环创建的i不会互相覆盖？
for (var i = 0; i < 5; i++) { setTimeout(function () { console.log(i); }, 1000); }因为var声明的i属于函数作用域，所有setTimeout回调共享同一个i，所以打印出来全是5。解决办法是用let让每次循环产生独立的块级作用域绑定，或者用闭包隔离变量。面试时能把"为什么用let就能解决"讲清楚——因为let在每次迭代时会创建一个新的词法环境绑定，闭包捕获到的是各自独立的绑定——就能体现出你对自己写下的代码有真正的理解。
闭包的实战场景也值得提前准备，防抖、节流、模块化（IIFE形成私有作用域）、React的useState实现原理里都涉及闭包。我见过不少候选人把防抖节流背得很熟，但问"这个函数为什么要返回一个闭包"就卡壳了，挺可惜的。
2.3 事件循环：宏任务微任务一出来，高低立判
事件循环题是前端面试的"分水岭"，一道async/await输出顺序的题就能分辨出谁是背题、谁是理解。核心机制其实不复杂，但需要特别仔细。
JS是单线程的，遇到异步任务不会干等着，而是交给浏览器或Node的相应模块处理，等条件满足后再把回调放进任务队列。事件循环就是不断从任务队列里取出任务放到调用栈执行的过程。关键在于任务队列分两种：宏任务（macrotask）和微任务（microtask）。微任务的优先级更高，每执行完一个宏任务，引擎都会把当前微任务队列清空，然后才继续取下一个宏任务。常见的宏任务有setTimeout、setInterval、I/O、UI渲染事件，微任务有Promise.then、MutationObserver、queueMicrotask、async函数中await之后的代码。
给你一个几乎必考的例子，你可以在现场分析一遍：
async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2'); } console.log('script start'); setTimeout(() => { console.log('setTimeout'); }, 0); async1(); Promise.resolve().then(() => { console.log('promise1'); }); console.log('script end');输出顺序是：script start、async1 start、async2、script end、async1 end、promise1、setTimeout。关键在于async1里的await async2()，它会让出执行权，后面的console.log('async1 end')相当于被放进了微任务队列。await后面跟的如果是个Promise，还要注意它会多一层微任务的延迟，这是另一个高频考点。我的建议是，这种题你在家多画几遍执行顺序图，画到条件反射，面试时就不用现场苦想了。
2.4 this指向：四类绑定规则聊透
this指向的题其实很简单，但因为它和箭头函数、bind/apply/call混在一起，容易让人记忆混乱。我把规则整理成一句话：函数在执行时，this指向取决于调用方式，而不是定义位置。具体分四类：默认绑定（非严格模式下指向window/globalThis，严格模式下是undefined）、隐式绑定（obj.fn()，this指向obj）、显式绑定（call/apply/bind指定this）、new绑定（this指向新创建的对象）。箭头函数比较特殊，它没有自己的this，外部函数的this是什么，它的this就是什么，而且箭头函数不能被new、不能被bind改变this。
面试官问this的时候，通常会让你判断下面这类代码结果：
const obj = { name: 'obj', fn: function () { console.log(this.name); }, }; const fn = obj.fn; fn(); // undefined，因为调用方式是默认绑定或者bind之后的二次bind：
function foo() { console.log(this.name); } const bar = foo.bind({ name: 'a' }); const baz = bar.bind({ name: 'b' }); baz(); // 输出a，bind只能生效一次第5个点也值得说：bind返回的函数如果被new了，this会指向新对象，而不是bind时绑定的对象，因为new绑定的优先级最高。这个考点比较冷门但确实出现过，我建议你了解一下。
3. 浏览器与网络：渲染、缓存、跨域这些题背后的考察点
这个板块是前端特有的"八股重灾区"，因为内容多、记忆点杂，特别容易让人变成人肉复读机。我梳理下来，最高频的其实是四块：页面渲染过程、HTTP缓存、跨域方案、浏览器存储。每块都有清晰的答题主线，掌握主线比记住零散细节更重要。
3.1 输入URL到页面展示：一条线串起全流程
这道题几乎是前端面试的"送分题"，但送分也意味着面试官期望值不低。完整的回答应该把网络和渲染两条线都覆盖到。网络线上：URL解析、DNS查询、TCP三次握手（HTTPS还有TLS握手）、发送HTTP请求、服务器响应、浏览器接收。渲染线上：解析HTML生成DOM树、解析CSS生成CSSOM树、两者合并成渲染树、计算布局、绘制、合成。这里容易漏掉的一个点是，浏览器会先发起HTML请求，拿到HTML后边解析边发起静态资源请求，CSS会阻塞渲染，而JavaScript的执行可能会阻塞DOM解析，所以会有defer和async这些优化手段。
面试官如果深挖，大概率会问"从输入URL到页面展示，中间的优化点有哪些"，这就把八股和工程实践挂上钩了。你可以说：DNS解析可以用预解析，TCP层面有连接复用，HTTP层面有缓存、CDN和HTTP/2多路复用，渲染层面可以减小首包体积、内联关键CSS/JS、懒加载非关键资源。这些优化点你能结合实际项目讲出两三个，这道题就算答圆满了。
3.2 HTTP缓存：强缓存与协商缓存的判断逻辑
HTTP缓存是面试题里最容易被背混的一个知识点。我建议你心中先固化一张判断表：浏览器发起请求时，先看是否存在缓存副本，如果有，再看缓存是否仍然有效。有效性判断分两种：强缓存和协商缓存。强缓存是浏览器本地直接判断，如果命中了，就根本不会发出请求，状态码是200 from memory cache或from disk cache，相关响应头是Expires和Cache-Control。协商缓存是缓存到期不确定或已过期，浏览器带着条件请求头回源站问"资源变没变"，服务器返回304表示可以继续用本地缓存，需要用到Last-Modified/If-Modified-Since和ETag/If-None-Match。
面试时你主动说出一个常见误区会很加分：很多人以为强缓存命中后就不会向服务器发起任何请求，这话对但不完整。强制刷新（Ctrl+F5）会在请求头带上Cache-Control: no-cache，跳过强缓存直接走协商缓存，如果资源变了就下载新版本。此外，静态资源（JS/CSS/图片）一般用Cache-Control: max-age=31536000 + 文件名带hash的方式实现"缓存尽量久，一变就换URL"，而HTML文件通常不缓存或者用no-cache。这套工程方案背后其实就是"远离缓存争议"的最好实践，你能说出来，面试官就不会只把你当成背题选手了。
3.3 跨域方案：CORS、JSONP、代理到底怎么选
同源策略和跨域几乎每场面试必问，而且容易问得很细。掌握三条主线基本就够了：第一，同源的定义是协议、域名、端口三者都相同，有一处不同就构成跨域；第二，浏览器默认阻止的是跨域请求的响应被页面读取，服务端可以用CORS头来明确允许哪些源可以读取；第三，日常开发中，为了避免跨域，我们会在前端代理层转发请求，这样浏览器看到的请求是同源的。
CORS机制里最容易被刁难的点是预检请求（preflight）。面试官经常会问：为什么有时候发送跨域POST请求，开发者工具里会多出一个OPTIONS请求？答案是：当请求不满足"简单请求"条件时（比如使用了自定义请求头、Content-Type不是简单的几种、或者方法不是GET/HEAD/POST），浏览器会先发一个OPTIONS预检请求，询问服务器允许的方法和头部，确认通过后才发送真实请求。能把这个机制讲清楚，顺便说出生产中怎么处理OPTIONS（在Nginx或网关层直接返回204并带上允许的头部），这道题就稳了。
JSONP也是一种方案，但你要说出它的局限：只能发GET请求，本质是借助script标签不受同源限制的特性动态加载脚本。现在实际项目里用得少了，但面试题还爱问，答的时候顺便补充"JSONP无法捕获错误状态码，安全性也需要额外防护"会更显深度。最后再提一句，如果你们用的是Vite或Webpack开发服务器，配置server.proxy或devServer.proxy其实就是把同源策略的边界往后移，这在开发提效上是常规操作。
3.4 浏览器存储：cookie、localStorage、sessionStorage、indexedDB
浏览器存储这块，面试官一般想听的是"安全边界"和"应用场景"。经典的对比是：cookie容量小（4KB左右）、每次请求会自动携带、有过期时间，因此适合做会话状态（如登录态）；localStorage容量约5MB、永久保存、不会自动携带，适合存一些需要跨会话保留的业务数据（比如用户偏好、草稿）；sessionStorage关闭标签页就清空，适合临时性的状态；indexedDB是无限制的NoSQL存储，适合大量结构化数据的离线场景。
更深入一层，面试官会追问道：cookie能不能存敏感信息？答案是不能，因为cookie在每次请求中都会被自动带上，而且HttpOnly的cookie虽然能防止脚本读取，但它仍然可能在网络中传输。第三方cookie还可以被广告商用于跨站追踪，所以现代浏览器都在逐步限制它。顺带一提，XSS攻击可以通过注入脚本窃取localStorage里的token，而CSRF攻击的一个诱因就是cookie自动携带这个特性，所以前端拿到token后存哪里、怎么防XSS，也是近年面试的热点。回答时提到"HttpOnly、SameSite、CSP、双重Cookie验证"这些关键词，能明显提升回答的含金量。
4. 框架八股：Vue和React必问原理的答题框架
框架题在面试中的占比逐年升高，具体问法从"用过哪些API"逐渐变成了"这个API的底层原理是什么"。Vue和React的高频考点其实相对集中，我把它们归纳成四个方向：响应式、虚拟DOM与diff、组件通信、生命周期。这四个方向答透了，框架八股就迈过了大半。
4.1 对Vue响应式原理的理解
Vue的响应式原理是Vue题里最核心的，考察频率极高。我建议你的回答分版本展开：Vue2用的是Object.defineProperty，Vue3用的是Proxy。Vue2的流程是：组件初始化时，把data对象的每个属性用Object.defineProperty改造成getter/setter，render函数执行时访问到某个属性，会触发getter，此时会把当前正在渲染的组件实例（确切地说是它的渲染Watcher）收集进该属性的依赖列表里；当属性被重新赋值时，会触发setter，通知依赖列表里的Watcher更新，从而触发组件重渲染。
Vue3的Proxy方案怎么讲？你可以说：Vue3通过new Proxy代理整个响应式对象，get时做track（依赖收集），set时做trigger（触发更新），并且支持动态新增属性、删除属性、数组索引变化等，这些在Vue2里是处理不了的。Vue2对数组的响应式是通过重写数组的7个方法（push、pop、shift、unshift、splice、sort、reverse）实现的，还要用Vue.set来处理新增属性，这些局限在Vue3里都被天然解决了。
这里我提醒一句，很多人会把"响应式"和"双向绑定"混为一谈。响应式是数据变化驱动视图更新，双向绑定是视图变化也会更新数据。Vue的双向绑定本质上是v-model这个语法糖，它在表单元素上绑定了事件监听和value属性。这个辨析题看似简单，但能准确说清楚的人不多。
4.2 虚拟DOM和diff算法：不要只背"key的作用"
虚拟DOM这题，最怕候选人背出一句"虚拟DOM比真实DOM快"，这其实是个误区。正确说法是：虚拟DOM是一种用JS对象描述真实DOM结构的方案，它让我们以声明式的方式描述UI，由框架负责把变更同步到真实DOM。它不一定比手动操作DOM快，真正的优势在于：一是带来了跨平台能力（同一套虚拟DOM可以渲染到浏览器、小程序、原生应用）；二是把操作DOM的复杂度收敛到框架层，配合diff算法找到最小更新范围，减少不必要的重排重绘。
diff算法的核心策略总结成三个要点：同层比较、双端指针、key优化。React和Vue2/Vue3的diff在具体实现上略有差异，但底层思路都是"尽量复用同层节点"。key的作用就是在移动、删除、新增节点时，帮助框架快速判断节点是否复用。面试官如果深挖，会让你举一个"为什么用index当key会有问题"的例子。
你可以这样答：如果列表项只是顺序变化，用index当key会导致框架复用错误的旧节点，产生状态错乱。比如一个可勾选的列表，每个项内部有选中状态，删除第一项后，原本第二项对应的状态会被错误地复用到第一项上，因为它们的key都是index。正确的做法是用能唯一标识业务数据的id。这个例子很朴素，但直接命中要点，还能顺带展示你有真实的业务经验。
4.3 组件通信与生命周期：框架题的"送分区间"
组件通信和生命周期属于框架题里相对"安全"的部分，主要考察你用过没有。Vue的组件通信方式包括：父传子用props，子传父用emit事件，跨层级用provide/inject，兄弟组件用事件总线或状态管理（Vuex/Pinia），还可以用ref直接访问子组件实例。React则是props自顶而下、通过回调函数让子组件通知父组件、Context做跨层级共享、Redux/Mobx做全局状态管理。
生命周期题，面试官现在的问法更多是"Vue3的setup和Vue2的生命周期有什么区别"以及"React的函数组件怎么模拟生命周期"。你需要说清楚：Vue3中beforeCreate和created被setup替代了，因为setup会在实例创建早期执行，原本这两兄弟里做的事情（声明响应式数据、注册生命周期钩子、依赖注入）在setup里都可以完成。React的函数组件本身没有生命周期概念，是用useEffect来模拟的，它的依赖数组决定副作用在什么时候执行：空数组只在挂载后执行一次，相当于componentDidMount；return一个清理函数，在卸载时执行，相当于componentWillUnmount。这几个对照点背熟基本就够了。
5. 工程化与手写题：性能优化和代码输出题的应对思路
前端面试到了中高阶段，一定会混入手写题和工程化问题。这一关是"背题选手"和"真做过项目的人"拉开差距的地方。因为手写题考的是动手能力，工程化问题考的则是你是否真的关注过生产环境的质量。
5.1 手写题清单：防抖节流、深拷贝、Promise.all
手写题的高频三件套，我强烈建议你练到闭着眼都能写出来：防抖节流、深拷贝、Promise.all。防抖的核心是"最后一次说话才算数"，节流的核心是"固定时间最多执行一次"。给你一份我习惯用的防抖实现：
function debounce(fn, delay) { let timer = null; return function (...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, delay); }; }注意这里用apply保留了原函数调用时的this，很多人的手写版本忽略了this指向，严格模式下会出错。节流实现则用锁的思想，或者记录上次执行时间，我建议用时间戳版本：
function throttle(fn, interval) { let last = 0; return function (...args) { const now = Date.now(); if (now - last >= interval) { last = now; fn.apply(this, args); } }; }深拷贝是重头戏，因为它考察的是"考虑边界问题"的意识。一个完整的深拷贝要考虑：基本类型直接返回，对象类型递归拷贝数组和普通对象，Date、RegExp、Map、Set要单独处理，还要用WeakMap解决循环引用。如果你能写出带WeakMap的版本，基本就过关了。Promise.all则是考察异步控制能力，核心是维护一个结果数组和一个计数器，全部resolve后返回结果数组，有一个reject就整体reject。这几个手写题在实际面试中出现概率极高，多练习没有坏处。
5.2 性能优化题：从加载和渲染两个维度答
性能优化题最怕答得散，我的建议是固定从两个大维度展开：加载性能和渲染性能。加载性能可以提到：代码分割和路由懒加载（按需加载）、静态资源CDN和HTTP/2、图片的响应式加载（webp、懒加载、sizes）、减少主包体积（tree-shaking、压缩）、利用缓存策略。渲染性能可以提到：减少不必要的重排重绘（批量操作DOM、使用transform替代left/top动画）、虚拟列表处理超大列表、requestAnimationFrame优化动画、Web Worker处理耗时任务。
面试官听到这里，一般会追问：你实际做过哪些优化，量化效果是什么样的？如果你能说出"首屏时间从3.2s降到了1.8s，主要做的是路由懒加载和图片压缩"，这个分量远超你背十个优化点。所以复习性能优化的时候，一定要回项目中找两个真实的优化案例，把改动点和效果量化出来。
5.3 工程化与构建：Webpack和Vite的核心认知
Webpack题虽然新一代项目很多已切换到Vite，但面试题仍然爱问Webpack基本原理。你需要掌握的核心链路是：Webpack通过入口文件开始，分析模块依赖关系，经过loader将非JS资源转换成模块，再经过plugin在构建生命周期里做额外的处理（如HTML生成、压缩、内容提取），最后打包成浏览器可运行的静态文件。loader和plugin的区别是个送分题：loader是转换器，处理文件内容；plugin是监听者/扩展者，可以介入整个构建流程的任意阶段。
Vite这道题，核心是回答"为什么快"。开发环境下Vite利用浏览器原生ESM模块，通过预构建依赖（esbuild）和按需编译，实现了秒级启动和快速热更新，省去了Webpack在开发环境里全量打包的耗时。生产构建用的Rollup，则能更好地处理代码分割。你把这个对比讲清楚，顺便说一句"Vite的生态目前已经比较成熟，团队新项目用Vite基本没有障碍"，就很充实地回答了。
6. 我的面试复盘：哪些八股值得深挖，哪些可以放下
每次面完试，我都会记一份简单的复盘笔记，哪些题是候选人普遍答得好的，哪些题是普遍翻车的。翻了这二十多份记录后，我发现最有价值的八股复习策略不是越全越好，而是分清主次，按目标岗位有侧重地投入。
6.1 不同级别的面试侧重点
应届生或1-2年初级岗位，面试官重点看基础是否扎实：原型链、闭包、事件循环、HTTP缓存、跨域、框架基础生命周期和响应式，这几项占了80%的分数。到了3-5年中级岗位，八股文的权重会下降，项目深挖和性能优化题的比例明显上升，面试官会追着你在项目里写的代码问"为什么不用XXX""这个方案有什么缺点"，这时候你需要在八股知识框架里加入"横向对比"和"方案取舍"的思考。5年以上的高级岗位，八股题往往以"设计"的形式出现，比如"让你设计一个前端监控系统""怎么做前端稳定性保障""虚拟列表的边界条件怎么处理"，这时候单纯背八股已经不够用了，需要你把知识串联成体系。
6.2 项目中的八股串联：让背过的知识"活"过来
我自己面试时特别喜欢的候选人类型，是把八股和项目经历捏在一起讲的人。比如聊到登录流程，他随口说"这里用HttpOnly的cookie存sessionId，前端拿不到，所以XSS攻击的窃取成本比较高；同时我在请求时加了SameSite属性，降低了CSRF的风险"——这一刻，HTTP相关的那一堆八股就全部"活"了。
所以我会建议你按项目里的功能点，去反向准备八股：做过上传功能，就准备好"大文件上传的分片、并发控制、断点续传"这些题；做过列表页，就准备好"虚拟列表的原理和实现"；做过权限系统，就准备好"路由守卫、动态路由、按钮级权限控制"这些题。这样准备出来的知识是有锚点的，面试现场你不需要回忆"我背过什么"，只需要回忆"我在项目里遇到过什么"，自然就能把对应的原理讲出来。
6.3 时间不够时的优先级排序
如果你的面试准备时间只剩一两周，我建议按这个优先级来投时间：第一梯队是事件循环、闭包/作用域、this指向、HTTP缓存、跨域、Vue/React响应式原理，这六块几乎场场必考，每块至少能答出"定义+核心机制+一个场景+一个坑"。第二梯队是模块化、Webpack/Vite核心概念、性能优化、手写防抖节流深拷贝，这些是出现率很高但答到"会用、能说清流程"就可以的。第三梯队才是泛前端知识点，比如浏览器渲染机制、前端安全、微前端、SSR、工程化配置细节，有时间就拓展，没时间就只记住核心概念和关键词。
最后再分享一个我个人的小技巧：每次面完试，不管结果如何，我都会把没答上来的问题记下来，然后去反推面试官为什么问这个问题。用这个习惯准备了三五场之后，你会慢慢发现八股文不再是零散的知识点，而是一张互相连接的大网。有了这张网，面试不再是"背题大赛"，而是一次很自然的交流。祝你在即将到来的面试里，每一道题都答得从容。
