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

一、前端面试常考方向

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️⃣ 项目经验

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

三、前端面试题示例

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

四、面试技巧

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

五、一句话总结

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

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

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

一、HTML / CSS

1. HTML 语义化标签

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

标签	用途
`<header>`	页面头部
`<footer>`	页面底部
`<main>`	主内容区域
`<article>`	独立文章或模块
`<section>`	主题分区
`<nav>`	导航菜单

解析：语义化有助于 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 &lt;button onClick={() => setCount(count + 1)}>{count}&lt;/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 状态码

状态码	含义
200	请求成功
301	永久重定向
302	临时重定向
404	页面不存在
500	服务器错误

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&lt;this.length; i++){
    result.push(fn(this[i], i, this));
  }
  return result;
}

七、项目经验面试题

示例题目：

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

解析：

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

八、面试技巧总结

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

前端面试