前端面试核心八股文
高频考点全覆盖 + 代码实战 + 避坑指南，助你收割大厂Offer！
📌 HTML & CSS 篇
1. 高频考点
- HTML语义化
<!-- 反例：滥用div -->
<div onclick="jump()">点击跳转</div>
<!-- 正例：语义化标签 -->
<a href="/detail">查看详情</a>
面试点：SEO优化、无障碍访问、代码可维护性。
- CSS盒模型
.box {
box-sizing: border-box; /* 标准盒模型：width = content + padding + border */
}
- BFC（块级格式化上下文）
触发条件：overflow: hidden、float、position: absolute等。
作用：解决外边距重叠、清除浮动、阻止元素被浮动覆盖。 - Flex布局 vs Grid布局
/* Flex：一维布局，适合组件排列 */
.container { display: flex; justify-content: space-between; }
/* Grid：二维布局，适合复杂页面结构 */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
📌 JavaScript 篇
1. 手撕代码必考
- 闭包与模块化
// 模块化封装
const counter = (() => {
let count = 0;
return {
increment: () => count++,
getCount: () => count
};
})();
- Event Loop
经典面试题：
console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);
// 输出顺序：1 → 4 → 3 → 2
2. ES6+ 核心
- 箭头函数 vs 普通函数
区别：无arguments、无this绑定（继承外层）、不可作为构造函数。 - Proxy与响应式原理
const obj = { name: 'John' };
const proxy = new Proxy(obj, {
get(target, key) {
console.log(`读取 ${key}`);
return target[key];
},
set(target, key, value) {
console.log(`设置 ${key} 为 ${value}`);
target[key] = value;
return true;
}
});
📌 框架篇（Vue/React）
1. Vue3 核心
- Composition API vs Options API
// Composition API
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const double = computed(() => count.value * 2);
return { count, double };
}
}
- Diff算法优化
Vue3 引入静态标记（PatchFlag），跳过静态节点比对，性能提升30%+。
2. React Hooks
- useEffect 依赖项陷阱
// 错误：依赖项缺失导致闭包旧值
useEffect(() => {
console.log(count);
}, []);
// 正确：依赖项明确
useEffect(() => {
console.log(count);
}, [count]);
- 自定义Hook封装
function useWindowSize() {
const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });
useEffect(() => {
const handler = () => setSize({ width: window.innerWidth, height: window.innerHeight });
window.addEventListener('resize', handler);
return () => window.removeEventListener('resize', handler);
}, []);
return size;
}
📌 工程化 & 性能优化
1. Webpack 进阶
- Tree Shaking原理
基于ES Module静态分析，通过sideEffects: false标记无副作用模块。 - 代码分割实战
// 动态导入实现按需加载
const LazyComponent = React.lazy(() => import('./LazyComponent'));
2. 性能优化三板斧
-
关键指标：FCP（首次内容渲染） < 1.5s，LCP（最大内容渲染） < 2.5s
-
优化手段：
- 图片：WebP格式 + 懒加载
- 代码：代码分割 + 预加载（
<link rel="preload">） - 缓存：CDN + Service Worker
📌 网络 & 安全
1. HTTP/2 核心特性
- 多路复用（一个TCP连接并行处理多个请求）
- 头部压缩（HPACK算法）
- 服务器推送（Server Push）
2. 跨域解决方案
- CORS（后端设置
Access-Control-Allow-Origin） - JSONP（利用
<script>标签无跨域限制）
function jsonp(url, callback) {
const script = document.createElement('script');
script.src = `${url}?callback=${callback}`;
document.body.appendChild(script);
}
📌 手写代码专项
1. 高频手写题
- Promise.all
Promise.myAll = (promises) => {
return new Promise((resolve, reject) => {
let count = 0;
const result = [];
promises.forEach((p, i) => {
Promise.resolve(p).then(res => {
result[i] = res;
if (++count === promises.length) resolve(result);
}).catch(reject);
});
});
};
- 深拷贝
function deepClone(obj, map = new WeakMap()) {
if (typeof obj !== 'object' || obj === null) return obj;
if (map.has(obj)) return map.get(obj);
const clone = Array.isArray(obj) ? [] : {};
map.set(obj, clone);
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
clone[key] = deepClone(obj[key], map);
}
}
return clone;
}
📌 行为面试技巧
1. 项目经验描述公式
STAR法则：
- Situation（背景）：项目规模、技术栈、团队角色
- Task（任务）：你负责的核心模块
- Action（行动）：技术选型、难点攻克过程
- Result（结果）：性能提升数据、用户反馈
2. 致命问题避坑
- 离职原因：避免抱怨前公司，可答“寻求更大技术挑战”
- 职业规划：聚焦技术深度（如“深耕前端工程化方向”）
🔗 配套资源：
💡 下期预告：《前端架构设计：从微前端到低代码》
点赞收藏，面试不慌！⭐️
