前端面试内容前端面试通常涵盖广泛的技术领域，以下是一份常见的前端面试内容分类及典型题目示例，供参考： --- ### *

前端面试通常涵盖广泛的技术领域，以下是一份常见的前端面试内容分类及典型题目示例，供参考：

HTML
- 语义化标签（<header>, <article>, <section> 等）的作用。
- HTML5 新特性（Web Workers、WebSocket、本地存储等）。
- <meta> 标签的常见用途（SEO、移动端适配等）。
- 表单验证（required、pattern 属性等）。
CSS
- 盒模型（标准盒模型 vs IE盒模型）。
- 常见布局方式（Flex、Grid、浮动布局、BFC）。
- 垂直居中实现方案。
- CSS 选择器优先级（权重计算）。
- 响应式设计（媒体查询、REM/EM/VW 单位）。
- CSS 动画（transition、animation、关键帧）。
JavaScript
- 变量提升、闭包、作用域链。
- 原型链、继承、this 指向问题。
- ES6+ 特性（箭头函数、Promise、async/await、解构赋值、模块化）。
- 事件循环（Event Loop）、宏任务与微任务。
- 类型判断（typeof、instanceof、Object.prototype.toString）。
- 深拷贝与浅拷贝的实现。

React
- 生命周期（类组件 vs Hooks）。
- 虚拟DOM与Diff算法。
- 状态管理（Redux、MobX、Context API）。
- 性能优化（React.memo、useMemo、useCallback）。
- Fiber 架构原理。
Vue
- 响应式原理（Object.defineProperty vs Proxy）。
- 组件通信（Props、Event Bus、Vuex、Provide/Inject）。
- 生命周期与钩子函数。
- 模板编译过程（AST 抽象语法树）。
- Vue3 新特性（Composition API、Teleport 等）。
其他框架
- Angular 变更检测机制、依赖注入。
- Svelte 的编译时优化特点。

浏览器机制
- 渲染流程（DOM树、CSSOM、渲染树、重排与重绘）。
- 浏览器缓存策略（强缓存、协商缓存）。
- 跨域问题与解决方案（CORS、JSONP、代理）。
- Cookie、LocalStorage、SessionStorage 区别。
网络协议
- HTTP 方法（GET vs POST）、状态码（304、401、503）。
- HTTPS 握手过程（SSL/TLS）。
- HTTP/2 特性（多路复用、头部压缩）。
- WebSocket 与长轮询的区别。

加载优化
- 减少请求数（雪碧图、代码合并）。
- 资源压缩（Gzip、图片格式优化）。
- 懒加载与预加载（Intersection Observer API）。
- CDN 加速原理。
渲染优化
- 减少重排与重绘（批量DOM操作、requestAnimationFrame）。
- 防抖与节流（Debounce & Throttle）。
- 代码分割（Webpack 动态导入）。
其他优化
- 服务端渲染（SSR）的优势与实现。
- 使用 Web Workers 处理耗时任务。

构建工具
- Webpack 核心概念（Loader、Plugin、Tree Shaking）。
- Babel 的作用与配置（Polyfill 处理）。
- 打包优化策略（代码分割、缓存策略）。
代码规范
- ESLint、Prettier 配置。
- Git 工作流（分支管理、Commit 规范）。
测试
- 单元测试（Jest、Mocha）。
- E2E 测试（Cypress、Puppeteer）。

常见攻击
- XSS（跨站脚本攻击）的防御（转义、CSP）。
- CSRF（跨站请求伪造）的防御（Token、SameSite Cookie）。
- 点击劫持（X-Frame-Options）。