前端面试，八股怎么准备？（附速通版）

🎯 写在前面

26届的秋招还在如火如荼地进行，27届的实习也已经拉开序幕。

属鼠作为 211非科班本 + 985硕 的一个小喽啰，组内唯一选择前端赛道的巨弱，从去年6月开始系统地学习前端，今年秋招侥幸拿到了三个中大厂的Offer。

一路走来，经历了许多迷茫，也踩过不少坑。这篇内容是我对过往面经和八股问题的梳理与总结，希望能帮到正在奋斗的前端小伙伴们

一、八股的出没时机与考察方式

我们都知道，前端面试主要考察三驾马车：项目、八股、手撕代码。那八股到底在什么环节出现呢？

核心结论：八股主要集中在 技术一、二面，越往后的轮次，对纯粹八股的考察越弱化，更侧重于结合场景和项目。

以常规的3-4轮技术面试为例：

• 一面（同事面）：八股重灾区。主要考察你的基础知识是否扎实。
• 二面（+1或Leader面）：项目拷打 + 八股延伸。会深入挖项目，并从项目中的技术点延伸考察相关的八股。
• 三面（交叉/主管面）：注重技术广度和综合素质，可能会有场景设计题，纯八股较少。

八股的两种出题方式：

1. 项目延伸型：在介绍项目时，面试官抓住某个技术点深入提问。
2. 集中考察型：项目聊完后，面试官会说：“我们来聊聊基础吧”，然后开始模块化提问。

这就要求我们，不仅要对项目涉及的技术栈了如指掌，更要对高频核心八股烂熟于心。

二、前端八股知识全景

如果系统性地准备，我建议将八股分为以下几个模块：

• 🎨 CSS
• 在中小厂及注重C端体验的业务中考察较多，面试越初级，考察得越多。
• 🟨 JS (JavaScript)
• 重中之重，压舱基石。无论什么面试，JS都是考察的绝对核心。
• 🌐 浏览器与网络安全
• 考察频次极高。高频八股相对好背，但面试官更喜欢结合场景和性能优化来考察你的理解深度。
• 🖼️ 框架 (Vue / React)
• 通常与你的项目强相关。此外，对比类问题是高频考点（如 Vue2 vs Vue3），涉及到技术选型的思考。
• 🛠️ 前端工程化
• 非常硬核的加分项。如果能结合场景和实战经验回答，往往能成为面试的胜负手。
• 🧬 简历强相关
• 这部分因人而异，比如你简历上写了“熟悉跨端开发”或“有丰富的性能优化经验”，就必须准备好被深挖。
• 🤖 AI 相关 (2026新趋势)
• 你也许会问：前端为什么要问AI？实际上，我秋招几乎每一轮都被问到了AI相关问题（应用、提效、原理等）。强烈建议花点时间准备，这会是你区别于其他候选人的亮点。

三、八股速通路线

八股浩如烟海，全部背诵不现实。我的经验是，先拿下最高频、最核心的20%问题，然后“以战养战”，通过实际面试来查漏补缺，反哺自己的知识库。

切记：背标准答案毫无意义。能够用费曼学习法，把一个知识点清晰地讲给别人听，才算初步掌握。

🎨 CSS

• 水平 / 垂直 / 水平垂直居中的N种方法
• CSS选择器及优先级
• Flex弹性布局的核心属性
• 盒子模型 (标准 vs IE)，BFC 的理解与应用
• position 定位的几种方式及其区别
• 响应式布局的实现方式（媒体查询, rem, vw/vh）
• em 和 rem 的区别

🟨 JS (JavaScript)

• 事件循环 (Event Loop)：能说清宏任务与微任务，并能解决相关场景题的执行顺序。
• 异步方案：Promise 和 async/await 的作用、区别、核心特性。
• 原型与继承：原型链的查找机制，new 一个对象时发生了什么。
• 作用域与闭包：this 的绑定规则，var/let/const 的区别，call/apply/bind 的应用，箭头函数。
• ES6+ 新特性：Set/Map 相对 Object 的优势，箭头函数，解构赋值等。
• TypeScript：TS带来的好处，interface 和 type 的区别，泛型的使用。
• 深浅拷贝：区别及常见的实现方式。
• 数组常用方法：map, filter, reduce 等的区别和应用。

🌐 浏览器和网络安全

• 综合大题：从输入URL到页面完整展示，发生了什么？（网络+渲染全链路）
• 跨域：同源策略是什么？常见的跨域解决方案有哪些？
• 浏览器缓存：强缓存和协商缓存的区别、触发时机和相关头部字段。
• 本地存储：cookie, localStorage, SessionStorage 的区别、特性和适用场景。
• HTTP：常用状态码，GET/POST 区别，常用请求/响应头。
• HTTPS：加密原理，如何保证安全（对称/非对称加密，数字证书）。
• 安全攻击：XSS 和 CSRF 的原理、区别及防御手段。
• HTTP版本：HTTP/1.0, 1.1, 2.0 的主要区别。
• 登录与鉴权：Token-based 认证的全流程。
• CDN 加速原理。
• SSR (服务端渲染) vs CSR (客户端渲染) 的区别和优缺点。

🖼️ 框架 (仅列Vue)

属鼠只对vue比较熟悉，就不误人子弟了

• 对比类：Vue vs React，Vue2 vs Vue3，Pinia vs Vuex，Webpack vs Vite。
• 响应式原理：Object.defineProperty vs Proxy 的区别和优劣。
• 组件通信：props/emit, v-model, provide/inject, EventBus, Pinia/Vuex。
• 虚拟DOM与Diff：虚拟DOM是什么？key 的作用？Diff算法的核心思想？
• Tree Shaking 原理。
• 生命周期：Vue2 和 Vue3 生命周期钩子的区别和使用。
• nextTick 和 keep-alive 的原理和使用场景。
• MVVM 模型是什么。

🛠️ 前端工程化

• 打包构建：Webpack 的核心概念（Entry, Output, Loader, Plugin），打包构建全流程。
• 打包优化：如何优化Webpack的打包速度和产物体积？（与性能优化强相关）
• 模块化：CommonJS 和 ESM 的区别，import 的原理。

🏃 性能优化

• 性能优化的方法论（从网络、构建、代码等层面回答）。
• 白屏问题的排查思路。
• 浏览器内存占用过大的排查思路。
• 性能监控指标（FP, FCP, LCP, TTI）和前端埋点方案。

🤖 AI 相关

• 你在平时如何使用AI提效？（结合具体场景）
• 对大模型（LLM）的理解，RAG (检索增强生成) 的基本原理。
• 如何写一个好的Prompt（提示词）？

简短总结

前端八股的准备，本质上是在构建一套应对面试的个人知识体系。它不应该是零散的死记硬背，而是一个由点到线、由线到面的结构化过程。

核心策略是：

1. 聚焦高频：首先攻克“速通路线”里最高频、最核心的知识点，确保基础盘不失分。
2. 实践驱动：将八股知识与你的项目经验相结合，用项目来印证你的理解。
3. 以战养战：勇敢地去面试，在实战中检验自己的掌握程度，并根据面试官的追问，有针对性地查漏补缺，这比闷头背书效率高得多。

属鼠经验有限，本篇只是个人的心得，并不全面，也难免有错误。全篇手打原创，仅借助AI进行了排版和美化。祝大家都能拿到心仪的offer