前端面试

万丈高楼平地起，前端基础是面试的基石。尽管高级框架层出不穷，但HTML、CSS和JavaScript的原生能力始终是评判一个前端工程师专业度的标尺。

1. JavaScript 核心机制

JavaScript是前端面试的重中之重。面试官通常会从事件循环（Event Loop）、闭包、原型链、异步编程等角度进行深入追问。

console.log('1');
setTimeout(function() {
    console.log('2');
}, 0);
new Promise(function(resolve) {
    console.log('3');
    resolve();
}).then(function() {
    console.log('4');
});
console.log('5');
// 输出顺序: 1 -> 3 -> 5 -> 4 -> 2

2. CSS 布局与性能

CSS不仅仅是样式，更是布局的艺术。Flexbox和Grid是两大主流布局方案，面试中常结合具体场景考察。

此外，CSS性能优化也是热点。例如，避免使用会触发重排（Reflow）的属性（如width, height），多用transform和opacity进行动画；使用will-change提示浏览器优化；减少CSS选择器的层级等。

现代前端开发离不开框架。Vue和React占据了大部分市场份额。面试不仅考察API使用，更考察对框架设计思想的理解。

Vue.js 深度解析

Vue 3 引入了Composition API和Proxy响应式系统，相比Vue 2的Object.defineProperty有显著优势。

• 响应式原理：Vue 3使用Proxy拦截对象操作，支持新增属性监听和数组索引监听，性能更高。
• 虚拟DOM与Diff算法：Vue 3采用了静态提升（Static Hoisting）、补丁标志（PatchFlags）等优化手段，减少了Diff时的比较次数。
• 组件通信：除了props/emit，还需掌握provide/inject、EventBus（mitt）、Pinia状态管理等。

React 核心机制

React 18引入了并发特性（Concurrent Features）和Hooks，改变了开发范式。

• Hooks原理：依赖链表实现，需注意依赖项数组的正确填写，避免无限循环或 stale closure。
• Fiber架构
  ：将渲染过程拆分成一个个小任务，支持中断和恢复，实现了时间切片（Time Slicing）。
• 并发渲染：Suspense和useTransition允许React在不阻塞UI的情况下更新状态，提升用户体验。

当页面变得复杂时，性能优化和工程化能力成为区分初级和高级前端工程师的关键。

性能优化实战

性能优化是一个系统工程，涉及网络、渲染、代码等多个层面。

工程化体系

前端工程化旨在提高开发效率、保证代码质量、简化部署流程。

• 构建工具：Webpack（配置复杂但生态丰富）、Vite（基于ESM，启动极快）、Rollup（适合库开发）。
• 代码规范：ESLint（代码检查）、Prettier（代码格式化）、Husky（Git钩子）。
• CI/CD：Jenkins、GitLab CI、GitHub Actions，实现自动化测试、构建和部署。

面试中，“项目经验”环节往往决定最终薪资。推荐使用STAR法则（Situation, Task, Action, Result）来组织回答。

除了硬技术，沟通能力、学习能力、团队协作也是面试官考察的重点。

• 学习能力：前端技术迭代快，展示你如何快速掌握新技术（如最近学习的AI前端工具）。
• 沟通协作：如何与UI、后端、产品沟通？如何解决需求变更带来的技术问题？
• 问题解决：遇到无法解决的Bug时，你的排查思路是什么？（抓包、控制台、断点、二分法等）。