一、HTML与CSS 核心考点
HTML和CSS是前端开发的基石。面试官不仅考察语义化标签的使用，更关注布局原理、渲染机制以及响应式设计的实现细节。
语义化与SEO
语义化HTML不仅有助于屏幕阅读器，还能提升搜索引擎对页面内容的理解。面试官常问如何选择合适的标签。
- <header>, <nav>, <main>, <article>, <section>, <footer> 的使用场景。
- 避免滥用 <div>，在适当场景使用 <figure> 和 <figcaption>。
- Meta标签对SEO的影响：keywords, description, viewport。
CSS 布局原理
布局能力是前端工程师的必备技能。重点考察Flexbox和Grid的应用场景及差异。
- Flexbox：一维布局，适合组件内部排列（如导航栏、卡片列表）。
- Grid：二维布局，适合页面整体架构（如栅格系统、复杂仪表盘）。
- 清除浮动的方法：BFC（Block Formatting Context）、clearfix伪元素、Flex/Grid替代。
盒模型与渲染
理解盒模型的不同模式及其对布局的影响，以及CSS渲染的关键路径。
- 标准盒模型 vs IE盒模型（box-sizing: border-box）。
- 层叠上下文（Stacking Context）的形成条件：z-index, position, opacity, transform等。
- CSS选择器优先级计算：!important > 内联 > ID > Class/属性 > 标签。
示例：Flexbox 居中方案
.container {
display: flex;
justify-content: center; / 水平居中 /
align-items: center; / 垂直居中 /
height: 100vh;
}
二、JavaScript 深度解析
JavaScript是前端的核心逻辑层。面试题往往从基础数据类型延伸到异步编程、原型链、闭包以及执行机制等深层原理。
数据类型检测
区分原始类型和引用类型是JS的基础。面试官常考察 typeof, instanceof, Object.prototype.toString 的区别。
- typeof: 适用于原始类型，对引用类型返回 "object" (函数除外)。
- instanceof: 检测原型链，适用于对象类型，但无法检测原始类型。
- Object.prototype.toString.call(): 最准确的检测方式，返回 "[object Type]"。
深拷贝与浅拷贝
在复杂数据流转中，拷贝策略至关重要。需掌握手动实现及 lodash 等库的使用。
- 浅拷贝：Object.assign, 展开运算符 {...}，仅复制一层引用。
- 深拷贝：JSON.parse(JSON.stringify()) 有局限（不支持函数、undefined、RegExp）。
- 递归实现深拷贝：需处理循环引用、Symbol、Map/Set 等复杂类型。
事件循环 (Event Loop)
理解JS单线程模型下的异步机制是进阶的关键。宏任务（MacroTask）与微任务（MicroTask）的执行顺序是高频考点。
console.log('1');
setTimeout(function() {
console.log('2');
}, 0);
Promise.resolve().then(function() {
console.log('3');
});
console.log('4');
// 输出顺序: 1 -> 4 -> 3 -> 2
// 解析: 同步代码先执行(1,4)，然后执行微任务(3)，最后执行宏任务(2)
闭包 (Closure)
闭包是指有权访问另一个函数作用域中变量的函数。它是实现数据私有化、函数柯里化等模式的基础。
- 应用场景： 防抖节流、模块化开发、函数柯里化、记忆化函数。
- 内存泄漏： 长期持有的闭包可能导致内存无法释放，需注意及时解绑。
- 经典面试题： 循环中setTimeout打印索引的问题及解决方案（IIFE, let块级作用域）。
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
三、主流框架原理与实战
Vue和React是目前前端市场的主流框架。面试不仅考察API的使用，更关注底层原理、虚拟DOM、Diff算法及状态管理。
Vue.js 核心机制
Vue 3 基于 Composition API 和 Proxy 响应式系统，相比 Vue 2 有了显著提升。
- 响应式原理： Vue 2 使用 Object.defineProperty，Vue 3 使用 Proxy，支持数组索引修改和对象新增属性。
- 生命周期： created vs mounted, setup 的执行时机。
- 组件通信： props/emit, provide/inject, pinia/vuex。
- Key的作用： 帮助Diff算法更高效地识别节点，复用DOM元素。
React.js 核心机制
React 强调函数式编程思想，Hooks 的引入彻底改变了组件编写方式。
- Hooks规则： 只能在函数组件顶层调用，不能在条件或循环中使用。
- useState & useEffect： 模拟生命周期，注意依赖数组的控制。
- 虚拟DOM与Diff： 通过算法最小化DOM操作，提升性能。
- 状态管理： Context API, Redux, Zustand, Jotai 等库的选择与对比。
四、网络协议与安全
前端工程师需要理解HTTP协议、浏览器缓存机制以及常见的Web安全威胁，以确保应用的安全性和效率。
| 考点 | 关键内容 | 备注 |
|---|---|---|
| HTTP状态码 | 200 (成功), 301/302 (重定向), 304 (缓存), 401 (未授权), 403 (禁止), 404 (未找到), 500 (服务器错误) | 需区分301和302的区别 |
| 缓存策略 | 强缓存 (Cache-Control, Expires) vs 协商缓存 (ETag, Last-Modified) | Cache-Control优先级高于Expires |
| CORS | 跨域资源共享，预检请求 (Preflight Request, OPTIONS) | 前后端配合解决跨域 |
| XSS攻击 | 反射型 vs 存储型，输入过滤，输出编码，CSP策略 | 框架通常自动转义 |
| CSRF攻击 | 跨站请求伪造，Token验证，SameSite Cookie属性 | 验证请求来源 |
五、性能优化策略
性能优化是衡量前端工程师水平的重要标准。从加载速度到渲染性能，再到用户体验，需要全方位的优化策略。
减少请求与压缩资源
使用CDN加速静态资源，合并CSS/JS文件，图片懒加载 (Lazy Load)，图片格式优化 (WebP, SVG)，Gzip/Brotli压缩。利用浏览器缓存策略，设置合理的Cache-Control。
减少重排与重绘
避免频繁操作DOM，使用DocumentFragment或虚拟DOM。利用CSS3硬件加速 (transform, opacity)。代码分割 (Code Splitting) 和懒加载组件，减少首屏加载体积。使用 Web Workers 处理复杂计算。
感知性能提升
骨架屏 (Skeleton Screen) 替代Loading动画，渐进式加载，预加载 (Preload/Prefetch) 关键资源。监控首屏时间 (FCP)、最大内容绘制 (LCP)、累计布局偏移 (CLS) 等 Web Vitals 指标。
六、软技能与架构思维
除了技术硬实力，面试官还关注候选人的学习能力、团队协作、问题解决思路以及对前端工程化的理解。
前端工程化
了解构建工具、包管理、代码规范、CI/CD流程是现代前端工程师的标配。
- Webpack/Vite 配置优化，Tree Shaking，Loader/Plugin 编写。
- Monorepo 管理，Git Flow 工作流，ESLint/Prettier 代码规范。
- 自动化测试：单元测试 (Jest)，E2E测试 (Cypress/Playwright)。
架构与设计模式
具备模块化、组件化设计思想，能根据业务需求选择合适的架构方案。
- 设计模式：单例模式、观察者模式、策略模式、工厂模式在前端的应用。
- 微前端架构：qiankun, micro-app 等方案对比与落地经验。
- 跨端开发：React Native, Flutter, Uni-app 等技术选型考量。