前端面试题
🧪 一、JavaScript 原理
1. 作用域与闭包
❓ 问：什么是闭包？它有什么实际应用？
📝 示例题：
function makeCounter() {
let count = 0;
return function () {
return ++count;
};
}
const counter = makeCounter();
console.log(counter()); // ?
console.log(counter()); // ?
2. 原型链与继承
❓ 问：解释 JS 的原型链机制？如何实现继承？
📝 编程题：
function Parent(name) {
this.name = name;
}
Parent.prototype.say = function () {
console.log('hello');
};
function Child(name, age) {
Parent.call(this, name);
this.age = age;
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
3. this 指向 & bind
❓ 问：this 的几种绑定规则？手写一个
bind函数。
🧠 思考：箭头函数中的 this 和普通函数有何不同？
🔄 二、事件循环 & 异步机制
4. 宏任务 & 微任务执行顺序
❓ 问：请说出以下代码的输出顺序，并说明原因：
console.log('start');
setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('micro'));
console.log('end');
🌐 三、浏览器机制
5. 浏览器渲染流程
❓ 问：浏览器从输入 URL 到页面渲染完成经历了哪些步骤？
🧠 追问：什么是回流与重绘？怎么优化？
🔐 四、安全相关
6. XSS 和 CSRF 防范
❓ 问：你在项目中遇到过哪些前端安全问题？如何防止 XSS？
🧰 五、框架原理（Vue / React）
7. Vue 的响应式原理
❓ 问：Vue 2.x 和 3.x 的响应式原理有何不同？
📝 代码题：
const data = reactive({ count: 0 });
watchEffect(() => {
console.log(data.count);
});
data.count++;
8. React Fiber 和虚拟 DOM
❓ 问：React 的调度机制是如何实现的？为什么需要虚拟 DOM？
🚀 六、工程化
9. Webpack 和 Vite
❓ 问：Webpack 的打包流程？Vite 为何快？
📝 编程题：写一个简单的 webpack.config.js 让它支持 Babel + CSS 加载
🌐 七、网络协议
10. HTTP 缓存机制
❓ 问：HTTP 强缓存和协商缓存的区别？各用到哪些 header？
🏗️ 八、设计模式 & 编程思想
11. 观察者模式 vs 发布订阅
❓ 问：请实现一个简单的事件总线（EventBus）
📝 示例题：
class EventBus {
// 实现 on / off / emit
}
🎯 九、综合加分题（可选）
12. 手写实现类题目
Promise.all实现- 手写
instanceof - 手写
call / apply / bind - 实现一个
deepClone
13. 算法题（简单版）
- 实现一个节流函数
throttle(fn, delay) - 实现一个柯里化函数
curry(fn)
✅ 附加 Bonus：Vue / React 高频问答（可以拓展）
| 框架 | 高频问题 |
|---|---|
| Vue | 生命周期、diff 算法、v-model 原理 |
| React | useEffect 原理、hook 闭包陷阱、memo 优化等 |
🎯 前端八股文系统面试题清单
| 模块 | 面试题 | 类型 | 难度 |
|---|
🧠 1. JavaScript 基础原理
Q1:说说闭包的原理？请写一个经典的闭包例子。 👉 编程 + 讲解（中等）Q2:JavaScript 中的原型链是怎样的？instanceof原理是什么？ 👉 讲解（中等）Q3:解释一下this的绑定规则（默认、隐式、显式、new） 👉 讲解 + 场景题（中等）
🔁 2. 事件循环 & 异步
-
Q4:下面代码的输出是什么？为什么？console.log('A'); setTimeout(() => console.log('B')); Promise.resolve().then(() => console.log('C')); console.log('D');👉 编程题（入门）
-
Q5:微任务和宏任务的执行顺序？你了解queueMicrotask吗？ 👉 讲解题（中等）
🖼️ 3. 浏览器渲染机制 & 性能优化
-
Q6:浏览器从输入 URL 到页面展示，发生了什么？ 👉 流程题（较难） -
Q7:如何优化首屏加载？如何减少回流重绘？ 👉 场景题（中等）
🌐 4. 网络协议 & HTTP
-
Q8:说说 HTTP1.1 和 HTTP2 的区别？HTTP 缓存机制有哪些？ 👉 讲解题（中等） -
Q9:什么是三次握手？为什么需要三次？ 👉 基础原理题（入门-中等）
🔐 5. 安全
-
Q10:什么是 XSS 与 CSRF？请分别写出一个防范手段 👉 安全原理 + 场景题（中等） -
Q11:如何通过 CSP 防止 XSS？ 👉 讲解题（较难）
🔧 6. 框架原理（Vue / React）
-
Q12:Vue 2 和 Vue 3 的响应式原理有什么不同？ 👉 源码理解题（中等-偏难） -
Q13:React 中 setState 是同步还是异步？为什么？ 👉 框架机制题（中等） -
Q14:虚拟 DOM 的作用是什么？diff 算法怎么优化性能？ 👉 框架基础题（中等）
🏗️ 7. 工程化
-
Q15:Webpack 和 Vite 的主要区别是什么？为什么 Vite 更快？ 👉 工具原理题（中等） -
Q16:Babel 是做什么的？如何配置一个最小可用 Webpack 项目？ 👉 工程搭建题（中等-偏难）
🎯 8. 编程思想 & 设计模式
-
Q17:请你实现一个 EventBus（发布-订阅模式） 👉 手写题（中等） -
Q18:什么是单例模式？请实现一个 JS 单例工厂 👉 手写 + 原理（中等） -
Q19:说说你在实际项目中用过哪些设计模式？举例说明 👉 项目落地题（开放题）
🔥 Bonus 进阶题
-
Q20:写一个通用的 curry 函数（函数柯里化）并说明原理 👉 手写题（较难） -
Q21:如何手写一个简单版的Promise类？ 👉 深入题（较难）
