你说的 “前端面试” 可以分为几个方向：基础知识、实战技能、框架库、项目经验以及面试技巧。我帮你整理一份 最全面、最实用的前端面试全攻略，适合自测、复习和刷题。

一、前端面试常考方向

1️⃣ HTML / CSS / 浏览器原理
2️⃣ JavaScript 基础与高级
3️⃣ 框架与库（React / Vue / Angular）
4️⃣ 前端工程化（Webpack / Vite / Node / npm）
5️⃣ 网络与性能（HTTP / TCP /缓存 /性能优化）
6️⃣ 数据结构与算法
7️⃣ 项目经验 / 实战题

二、重点知识点

1️⃣ HTML / CSS

• HTML
  • 语义化标签（<header> <article> <main>）
  • 表单元素（<input>、<select>）
  • 元素属性（data-*、contenteditable）
  • DOM 结构与节点类型
• CSS
  • 盒模型（content-box vs border-box）
  • Flex / Grid 布局
  • CSS 优先级 / 层叠规则
  • 响应式设计 & 媒体查询
  • CSS 动画 / 过渡 / transform
• 常见面试题
  • position: absolute 与 relative 区别
  • z-index 如何生效
  • 水平垂直居中实现方法
  • CSS3 新特性（变量、calc、clamp）

2️⃣ JavaScript

• 基础
  • 数据类型 / 类型转换 / == vs ===
  • 作用域 / 闭包 / 变量提升 / this
  • 原型链 / 继承 / instanceof
  • 数组 / 对象方法（map/filter/reduce）
• 高级
  • 异步（Promise / async/await / 回调）
  • Event Loop / 微任务 & 宏任务
  • 深浅拷贝
  • 防抖 / 节流
• 浏览器相关
  • DOM 操作
  • BOM（location / history / navigator）
  • 事件委托 / 捕获 & 冒泡
• 常见面试题
  • Object.keys / Object.values / Object.entries
  • setTimeout 0 延时执行顺序
  • 闭包实现私有变量
  • 防抖和节流实现

3️⃣ 框架与库

• React
  • 虚拟 DOM、组件生命周期、Hooks
  • 状态管理（useState / Redux / Context）
  • 性能优化（memo / useCallback / lazy loading）
• Vue
  • 响应式原理（Proxy / defineProperty）
  • 组件通信（props / emit / provide/inject / Vuex）
  • 生命周期 / computed / watch
• 常见面试题
  • React vs Vue 优缺点
  • key 的作用
  • v-if vs v-show
  • React setState 异步问题

4️⃣ 前端工程化

• npm / yarn 包管理
• Webpack / Vite 构建
• Babel 转码
• ESLint / Prettier
• 模块化：ES6 Module / CommonJS / UMD
• 常见面试题
  • webpack loader vs plugin
  • tree shaking 原理
  • 热更新 HMR 工作原理

5️⃣ 网络与性能

• HTTP / HTTPS / TCP / UDP
• 请求方法：GET / POST / PUT / DELETE
• 状态码（200 / 301 / 302 / 404 / 500）
• Cookie / LocalStorage / SessionStorage / Token
• 浏览器缓存：强制缓存 / 协商缓存
• 前端性能优化：
  • 图片压缩 / CDN / lazy load
  • 资源合并 / 代码分割
  • 前端监控 & 性能分析（Lighthouse / Chrome DevTools）

6️⃣ 数据结构与算法（前端常考）

• 数组 / 链表 / 栈 / 队列 / 集合
• 字符串处理
• 排序 / 查找
• 栈实现括号匹配
• 面试题：
  • 实现 Array.prototype.map
  • 数组去重
  • 求数组最大子序列和

7️⃣ 项目经验

• 项目背景、职责
• 技术栈
• 遇到的困难和解决方案
• 性能优化案例
• 页面兼容性问题处理

三、前端面试题示例

1. JS 闭包应用场景？
2. 解释 event loop 工作原理
3. 写一个防抖函数
4. React 如何避免重复渲染？
5. CSS 水平垂直居中 3 种方法
6. HTTP 301 和 302 区别
7. Vue 响应式原理
8. Array 去重方法（Set / filter / reduce）

四、面试技巧

1. 说结构，不说语法：尽量用图/流程描述
2. 遇到不会的题：拆解问题，展示思路
3. 项目经验优先：把项目亮点讲清楚
4. 代码手写能力：白板 / 在线编辑器都可能手写
5. 沟通能力：面试官关注协作和思路，不只是写代码

五、一句话总结

前端面试 = HTML/CSS + JS + 框架 + 网络 + 工程化 + 项目经验 + 算法
重点是理解原理 + 实战经验 + 思路表达

好的，我帮你整理一份 前端面试全套题库 + 解析 + 代码示例，结构清晰，覆盖 基础知识、JavaScript、框架、工程化、网络、性能、算法、项目经验，方便你刷题和复习。

前端面试全套题库（含解析 + 代码示例）

一、HTML / CSS

1. HTML 语义化标签

题目：请列举常用的语义化标签，并说明用途。
答案示例：

解析：语义化有助于 SEO、屏幕阅读器辅助以及代码可维护性。

2. CSS 水平垂直居中

题目：实现一个 div 居中容器（水平 + 垂直）
解法一：Flex

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

解法二：Grid

.parent {
  display: grid;
  place-items: center;
}

3. 盒模型

题目：content-box 与 border-box 有何区别？
答案：

• content-box：width/height 只计算内容，不算 padding 和 border
• border-box：width/height 包含 padding + border，更直观

* { box-sizing: border-box; }

二、JavaScript

1. Object.keys 用法

const obj = { a: 1, b: 2 };
console.log(Object.keys(obj)); // ["a", "b"]

用途：获取对象自身可枚举属性名数组。

2. 防抖与节流

防抖（Debounce）：

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  }
}

节流（Throttle）：

function throttle(fn, interval) {
  let last = 0;
  return function(...args) {
    const now = Date.now();
    if (now - last > interval) {
      fn.apply(this, args);
      last = now;
    }
  }
}

3. 闭包

function counter() {
  let count = 0;
  return function() {
    count++;
    return count;
  }
}
const c = counter();
console.log(c()); // 1
console.log(c()); // 2

用途：实现私有变量、数据封装。

4. 异步机制

Event Loop / 宏任务与微任务：

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);

输出顺序：

1 4 3 2

解析：

• 同步执行 → 1, 4
• 微任务（Promise.then） → 3
• 宏任务（setTimeout） → 2

三、框架

1. React 基础

function App() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Hooks：

• useState：状态
• useEffect：副作用
• useMemo / useCallback：性能优化

2. Vue 响应式

const state = Vue.reactive({ count: 0 });
Vue.watch(() => state.count, (newVal) => {
  console.log(newVal);
});

解析：

• Vue3 使用 Proxy 实现响应式
• Vue2 使用 defineProperty

四、前端工程化

1. npm 常用命令

npm install express
npm install -g typescript
npm uninstall 包名

2. Webpack / Vite

• Loader：处理文件类型（babel-loader）
• Plugin：扩展功能（HtmlWebpackPlugin）
• Tree shaking：消除无用代码

五、网络与性能

1. HTTP 状态码

2. 浏览器缓存

• 强制缓存：Cache-Control: max-age=xxx
• 协商缓存：Last-Modified / ETag

3. 前端性能优化

• 图片压缩 / CDN
• 代码分割 / 懒加载
• 减少重排重绘

六、数据结构与算法

1. 数组去重

const arr = [1,1,2,2,3];
const unique = [...new Set(arr)];
console.log(unique); // [1,2,3]

2. 实现 map

Array.prototype.myMap = function(fn) {
  const result = [];
  for(let i=0; i<this.length; i++){
    result.push(fn(this[i], i, this));
  }
  return result;
}

七、项目经验面试题

示例题目：

1. 你在项目中如何处理跨域？
2. 页面性能优化做过哪些？
3. 你遇到过最难的 bug 是什么？如何解决？
4. 前端与后端如何协作？

解析：

• 项目经验最好用 STAR 方法（Situation, Task, Action, Result）
• 用量化数据说明优化效果更加分

八、面试技巧总结

1. 理解原理比背语法重要
2. 能手写代码和画流程图
3. 展示项目经验
4. 善于拆解问题
5. 沟通能力也很重要