一、HTML5核心面试题与深度解析
在
1.1 语义化标签及其优势
许多面试官会问：“为什么需要使用语义化标签？” 这不仅是代码规范问题，更关乎SEO和可访问性。
使用正确的HTML标签（如<header>, <nav>, <article>, <footer>）来描述内容的含义，而非仅用于表现样式。
搜索引擎爬虫依赖标签结构理解页面内容。语义化标签有助于爬虫抓取关键词，提升页面排名。
屏幕阅读器能更好地识别语义化标签，帮助视障用户理解页面结构。
1.2 本地存储：LocalStorage vs SessionStorage vs Cookie
这是
| 特性 | LocalStorage | SessionStorage | Cookie |
|---|---|---|---|
| 生命周期 | 永久存储，除非手动删除 | 浏览器关闭后失效 | 可设置过期时间 |
| 容量限制 | 约 5MB | 约 5MB | 约 4KB |
| 网络请求 | 不参与HTTP请求 | 不参与HTTP请求 | 每次请求自动携带 |
| 作用域 | 同源窗口共享 | 仅当前浏览器窗口 | 同源窗口共享 |
1.3 Canvas与SVG的区别
在图形绘制方面，面试官常考察两者的适用场景。
- 〖Canvas〗：基于像素的绘制，性能高，适合游戏、大数据可视化；不可直接通过DOM操作修改；事件处理复杂。
- 〖SVG〗：基于XML的矢量图形，分辨率无关，文件小；可直接通过DOM操作修改样式；适合图表、图标。
二、CSS3布局与动画面试题
CSS3部分主要考察现代布局方案及动画性能优化。以下是针对
2.1 Flexbox vs Grid 布局
面试官通常会要求对比这两种布局模式，并给出实际应用场景。
Flexbox 适用于一维布局，如导航栏、卡片列表。它擅长在主轴方向上对齐和分布元素。
Grid 适用于二维布局，如整个页面框架、复杂的网格系统。它可以同时控制行和列。
Flexbox兼容性更好，Grid在现代浏览器中表现优异，但在IE11中支持有限。
2.2 常见的居中方案
水平垂直居中是CSS面试必考题，以下是四种主流实现方式：
/ 方法一：Flexbox /
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/ 方法二：Grid /
.parent {
display: grid;
place-items: center;
height: 100vh;
}
/ 方法三：绝对定位 + Transform /
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/ 方法四：绝对定位 + Margin Auto /
.child {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
width: 100px; height: 100px;
}
2.3 BFC（块级格式化上下文）
理解BFC是解决布局问题的关键。触发BFC的条件包括：overflow不为visible、display为flex/grid等。BFC的应用场景包括清除浮动、防止外边距合并。
三、JavaScript核心机制与异步编程
JavaScript是前端面试的重头戏。在
3.1 闭包（Closure）的原理与应用
闭包是指有权访问另一个函数作用域中变量的函数。其核心在于函数可以记住并访问它的词法作用域，即使该函数在其词法作用域之外执行。
数据私有化、函数防抖节流、模块模式。
闭包会持有外部函数的引用，若使用不当可能导致内存无法释放。
3.2 异步编程：Callback -> Promise -> Async/Await
异步处理是前端开发的核心难点。以下是演进过程及优缺点对比：
- 〖Callback〗：回调地狱，难以维护，错误处理复杂。
- 〖Promise〗：链式调用，状态管理明确，但仍需处理.then链。
- 〖Async/Await〗：同步写法，代码可读性最高，错误处理使用try/catch，是目前推荐的标准写法。
3.3 事件循环（Event Loop）
理解JS执行机制是高级前端开发的必备技能。宏任务（MacroTask）与微任务（MicroTask）的执行顺序：
- 执行全局同步代码。
- 清空微任务队列（Promise.then, MutationObserver等）。
- 选择一个宏任务（setTimeout, setInterval, I/O等）执行。
- 重新渲染页面（如果需要）。
- 重复上述步骤。
四、Vue/React框架与工程化面试
随着前端工程化的发展，框架原理和构建工具成为面试必问内容。针对
1. Vue响应式原理
Vue 2使用Object.defineProperty，Vue 3使用Proxy。Proxy能监听数组和对象新增属性，性能更优。
2. Virtual DOM与Diff算法
通过JS对象模拟DOM树，减少DOM操作。Diff算法采用同层比较策略，提高更新效率。
3. 组件通信
props/attrs/$listeners、Vuex/Pinia（状态管理）、EventBus（非父子）。
1. React Hooks原理
Hooks通过链表存储状态，依赖调用顺序。useState和useEffect是常用Hook。
2. 状态管理
Redux（全局状态）、Context API（轻量级共享状态）、MobX（响应式状态）。
3. 性能优化
React.memo、useMemo、useCallback、代码分割（Code Splitting）。
1. Webpack/Vite
Webpack基于Node.js，配置复杂；Vite基于ESM，开发环境启动极快，生产环境使用Rollup。
2. TypeScript
静态类型检查，提高代码可维护性，减少运行时错误。常用类型：interface, type, enum。
五、前端职业发展与软技能
除了技术硬实力，软技能在面试中同样重要。以下是针对
5.1 如何保持技术敏感度？
前端技术迭代迅速，建议：
- 关注官方博客（MDN, React Blog, Vue Blog）。
- 阅读优质技术博客（掘金, 知乎, Medium）。
- 参与开源项目，积累实战经验。
- 定期复盘，总结技术难点。
5.2 面试技巧与心态调整
面试不仅是考核，也是交流。建议：
- STAR法则回答行为面试题（情境、任务、行动、结果）。
- 诚实面对未知问题，展示学习能力和思考过程。
- 准备项目亮点，突出个人贡献和技术难点攻克。