小编将以下的面试合集做了一个整理，还有更多的JavaScript、CSS、ES6、Vue、Vue3、React、Node.js、小程序、HTTP、Typescript、Webpack、Git、Linux、算法面试、设计模式等面试题库也一并分享出来，供大家参考，
一、HTML & CSS 核心（必考！）
1. HTML5 新特性（高频考点⭐）
- 语义化标签（SEO优化关键）：
<header>,<footer>,<article>,<section>,<nav> - 多媒体支持（移动端适配重点）：
<audio>,<video> - 本地存储（前端性能优化关键）：
localStorage（持久存储）、sessionStorage（会话存储） - Canvas & SVG（数据可视化/游戏开发高频问）：
<canvas>（像素操作）、<svg>（矢量图）
2. CSS 盒模型（面试必问 ）
-
标准盒模型（
box-sizing: content-box）：
width = content -
IE盒模型（
box-sizing: border-box）：
width = content + padding + border -
实际开发建议：
css复制
下载
- { box-sizing: border-box; / 更符合开发直觉 / }
3. BFC（块级格式化上下文）（高频面试题❗）
-
触发条件（至少满足一个）：
-
-
float: left/right -
position: absolute/fixed -
display: inline-block/table-cell/flex -
overflow: hidden/auto/scroll（非visible）
-
-
核心作用（解决布局问题）：
-
-
防止 margin 重叠
-
清除浮动（避免父元素高度塌陷）
-
阻止元素被浮动覆盖
-
4. 垂直居中（100%会被问！ ）
css
复制
下载<br/>/ 1. Flex 方案（最推荐⭐） / .parent { display: flex; align-items: center; justify-content: center; } / 2. Grid 方案（现代布局趋势 ） / .parent { display: grid; place-items: center; } / 3. 绝对定位 + transform（兼容性好） / .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
二、JavaScript 核心（重中之重！ ） <br/>1. 原型与原型链（必考！ ）
-
核心概念：
-
-
每个对象都有
__proto__，指向构造函数的prototype -
Object.prototype.__proto__ === null（原型链终点）
-
-
instanceof原理：
检查右侧构造函数的prototype是否在左侧对象的原型链上 -
手写
new（高频手写题❗） ：
javascript复制
下载
function myNew(Constructor, ...args) { const obj = Object.create(Constructor.prototype); const result = Constructor.apply(obj, args); return typeof result === 'object' ? result : obj; }
2. 闭包（面试官最爱问！ ）
-
定义：函数 + 其词法作用域
-
经典问题：
javascript复制
下载
for (var i = 0; i < 5; i++) { setTimeout(() => console.log(i), 1000); // 输出 5 个 5 }
解决方案（3种）： -
-
let块级作用域（最佳） -
IIFE 立即执行函数
-
setTimeout传参
-
3. Event Loop（事件循环）（大厂必考！ ）
-
执行顺序：
同步代码 → 微任务（Promise.then）→ 宏任务（setTimeout） -
经典面试题：
javascript复制
下载
console.log(1); setTimeout(() => console.log(2), 0); Promise.resolve().then(() => console.log(3)); console.log(4); // 输出顺序：1 → 4 → 3 → 2
三、框架相关（React/Vue 高频考点 ） <br/>1. React Hooks（最新趋势 ）
-
useState（状态管理）：
javascript复制
下载
const [count, setCount] = useState(0); -
useEffect（副作用处理）：
javascript复制
下载
useEffect(() => { // 相当于 componentDidMount + componentDidUpdate return () => { / 相当于 componentWillUnmount / }; }, [deps]); -
useMemo&useCallback（性能优化）： -
-
useMemo缓存计算结果 -
useCallback缓存函数
-
2. Vue 响应式原理（核心！⚡）
-
Object.defineProperty（Vue2） ： -
- 缺点：无法监听数组变化，需重写数组方法
-
Proxy（Vue3） ： -
- 优势：直接监听对象/数组变化
四、性能优化（大厂必问！ ）
- 减少重绘与回流（CSS 优化）
- 代码分割（Code Splitting） （
React.lazy/import()） - 图片懒加载（
IntersectionObserver） - Webpack 优化（Tree Shaking、缓存
2025年的前端确实要求更高了，但机会总是留给有准备的人。建议大家结合自身情况，有针对性地提升。小编将以上的面试合集做了一个整理，还有更多的JavaScript、CSS、ES6、Vue、Vue3、React、Node.js、小程序、HTTP、Typescript、Webpack、Git、Linux、算法面试、设计模式等面试题库也一并分享出来，供大家参考
