Web前端面试基础题：从入门到精通的全方位攻略与热点解析
一、 前端面试的现状与基础题的重要性
在2026年的互联网招聘市场中，Web前端面试基础题依然是衡量求职者技术底蕴的试金石。尽管Vue、React等现代框架层出不穷，但底层原理的掌握程度往往决定了候选人能走多远。许多求职者往往忽视了基础，导致在面试中面对“为什么”而非“怎么做”的问题时哑口无言。
本站致力于整理和深度解析各类Web前端面试基础题，不仅提供标准答案，更从面试官的视角剖析考点背后的逻辑。无论是HTML语义化、CSS盒模型，还是JavaScript的事件循环机制，都是我们必须跨越的门槛。
HTML5 核心考点
语义化标签、多媒体API、离线存储、SEO优化。面试官常问：HTML5新特性有哪些？Canvas与SVG的区别？
CSS3 布局与动画
Flexbox、Grid、BFC、定位层级、动画性能。面试官常问：如何实现垂直居中？BFC的应用场景？
JavaScript 进阶
原型链、闭包、异步编程、ES6+特性。面试官常问：请解释闭包的作用？Promise与Async/Await的区别？
二、 HTML与CSS高频面试题深度解析
1. 什么是BFC？如何触发？有什么用？
BFC（Block Formatting Context）即块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式。理解BFC是解决许多CSS布局Bug的关键。
触发BFC的条件：
- 根元素或其它包含它的元素
- 浮动元素（float 不为 none）
- 绝对定位元素（position 为 absolute 或 fixed）
- 行内块元素（display 为 inline-block）
- 表格单元格（display 为 table-cell）
- overflow 值不为 visible 的块级元素
BFC的主要作用：
① 清除内部浮动：父元素高度塌陷时，给父元素添加 overflow: hidden 即可触发BFC，从而撑开父元素高度。
② 防止Margin重叠：相邻的两个块级元素的垂直margin会发生重叠，将它们分别放入不同的BFC中可以避免此问题。
③ 阻止元素被浮动元素覆盖：设置 float 的元素会生成一个BFC，相邻的普通元素会与之重叠，给普通元素设置BFC即可避免。
2. Flexbox布局 vs Grid布局
| 特性 | Flexbox | Grid |
|---|---|---|
| 维度 | 一维布局（行或列） | 二维布局（行和列） |
| 适用场景 | 导航栏、卡片列表、对齐元素 | 页面整体布局、复杂网格系统 |
| 内容驱动 | 是，适合内容大小不确定的场景 | 否，适合预设尺寸的场景 |
| 兼容性 | 极好 | 良好（IE支持较差） |
三、 JavaScript核心原理与代码示例
1. 闭包（Closure）的深度理解
闭包是指有权访问另一个函数作用域中变量的函数。创建闭包的最常见方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数内部的变量。
闭包的经典面试题示例：
// 示例：循环中的闭包问题
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i); // 输出 5, 5, 5, 5, 5
}, 100);
}
// 解决方案：使用 IIFE 或 let
for (let i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i); // 输出 0, 1, 2, 3, 4
}, 100);
}
在上述代码中，var声明的变量i是全局作用域（或函数作用域），循环结束后i变为5。而let声明的变量具有块级作用域，每次循环都会创建一个新的i绑定。
2. 事件循环（Event Loop）机制
JavaScript是单线程语言，其执行机制依赖于事件循环。理解宏任务（MacroTask）和微任务（MicroTask）的执行顺序是面试必考题。
宏任务（MacroTask）
包括：整体代码script、setTimeout、setInterval、I/O、UI交互事件。
微任务（MicroTask）
包括：Promise.then、MutationObserver、process.nextTick（Node.js）。
执行规则：每次从任务队列中取出一个宏任务执行，执行完毕后，检查微任务队列，将微任务队列中的所有微任务依次执行完毕，然后再进行下一轮宏任务的选取。
console.log('1'); // 同步代码
setTimeout(function() {
console.log('2'); // 宏任务
}, 0);
Promise.resolve().then(function() {
console.log('3'); // 微任务
});
console.log('4'); // 同步代码
// 输出顺序：1 -> 4 -> 3 -> 2
面试官常问：请手写一个Promise？请解释Async/Await的本质？
Async/Await本质上是Generator函数的语法糖，它让异步代码看起来像同步代码，极大地提高了代码的可读性。其底层依然依赖于Promise和事件循环机制。
四、 现代前端框架（Vue/React）基础题
1. Vue.js 响应式原理
Vue 2.x 使用 Object.defineProperty 进行数据劫持，Vue 3.x 使用 Proxy。面试中常要求解释两者的区别。
- Object.defineProperty：只能劫持对象的属性，因此需要深度遍历对象和数组，且无法监听数组下标的变化，新增属性需要$set。
- Proxy：可以直接监听对象和数组的变化，有13种拦截方法，性能更优，且支持代理嵌套对象。
2. React Virtual DOM 与 Diff 算法
Virtual DOM 是对真实DOM的JavaScript对象映射。Diff算法用于比较新旧Virtual DOM树的差异，从而最小化DOM操作。
Diff算法的三个策略：
① Tree Diff：同级比较，不同层级节点只做一次遍历，忽略跨层级移动节点。
② Component Diff：不同类型组件产生不同树，类型相同则复用组件实例。
③ Element Diff：对同一层级的一组子节点，通过唯一key进行标识，提高更新效率。
五、 性能优化与工程化
1. 前端性能优化的常见手段
资源压缩与合并
使用Gzip压缩CSS/JS/HTML图片，减少传输体积。合并请求，减少HTTP请求次数。
减少重排与重绘
避免频繁操作DOM，使用DocumentFragment批量操作。CSS动画优先使用transform和opacity，因为它们不会触发重排。
浏览器缓存
合理利用HTTP缓存头（Cache-Control, ETag），静态资源使用Content Hash命名，实现长期缓存。
2. 安全基础：XSS与CSRF
XSS（跨站脚本攻击）：攻击者注入恶意脚本。防御：对用户输入进行转义，使用CSP（内容安全策略）。
CSRF（跨站请求伪造）：攻击者诱导用户点击链接发起非自愿请求。防御：使用Token验证，检查Referer，SameSite Cookie属性。