🎯 前端进阶面试题精选50题¶

适用岗位：前端开发工程师、全栈开发 难度分布：基础(20) + 进阶(20) + 综合(10)

一、基础题（20题）¶

Q1: 闭包是什么？使用场景？ - 函数引用其外部作用域的变量，即使外部函数已返回 - 场景：封装私有变量、函数柯里化、事件处理回调

JavaScript

function counter() {
  let count = 0;  // const不可重新赋值；let块级作用域变量
  return { inc: () => ++count, get: () => count };  // 箭头函数：简洁的函数语法
}

Q2: Event Loop(事件循环)机制？ - 调用栈 → 微任务队列(Promise.then/MutationObserver) → 宏任务队列(setTimeout/setInterval) - 每执行完一个宏任务，清空所有微任务 - Node.js: 有6个阶段(timers/pending/idle/poll/check/close)

Q3: var/let/const的区别？ | 特性 | var | let | const | |------|-----|-----|-------| | 作用域 | 函数 | 块级 | 块级 | | 提升 | 是 | 暂时性死区 | 暂时性死区 | | 重赋值 | 是 | 是 | 否 |

Q4: Promise的状态和常用方法？ - 状态：pending→fulfilled/rejected（不可逆） - 方法：.then()/.catch()/.finally() - 静态：Promise.all(全成功)/Promise.race(第一个)/Promise.allSettled(全部完成)/Promise.any(第一个成功)

Q5: async/await的原理？ - 语法糖，基于Generator+Promise - async函数返回Promise，await暂停执行等待Promise resolve - 错误处理：try/catch包裹await

Q6: 原型链和继承？ - 每个对象有__proto__指向构造函数的prototype - 查找属性：对象自身→原型→原型的原型→...→null - class是原型继承的语法糖

Q7: 虚拟DOM是什么？为什么需要？ - JS对象表示DOM树，状态变化时diff虚拟DOM树，最小化真实DOM操作 - 真实DOM操作昂贵（重排重绘），虚拟DOM批量更新减少开销 - React的Fiber架构：可中断的虚拟DOM reconciliation

Q8: React Hooks核心API？ - useState: 状态管理 - useEffect: 副作用(mount/update/unmount) - useContext: 上下文消费 - useMemo/useCallback: 性能优化(缓存值/函数) - useRef: 引用DOM/持久化值

Q9: useEffect的依赖数组？ - []: 仅mount执行一次 - [dep]: dep变化时执行 - 无数组: 每次渲染都执行 - 返回函数: cleanup(unmount或重新执行前)

Q10: CSS Flexbox vs Grid？ - Flex: 一维布局(行或列)，适合组件内部布局 - Grid: 二维布局(行+列)，适合页面整体布局 - 实践: 大多数用Flex足够，复杂网格用Grid

Q11: CSS选择器优先级？ - !important > 内联style > ID(#) > 类(.)/属性/伪类 > 标签/伪元素 - 权重: 0,1,0,0 > 0,0,1,0 > 0,0,0,1

Q12: 跨域问题及解决方案？ - 同源策略：协议+域名+端口必须相同 - CORS: 服务端设置Access-Control-Allow-Origin - 代理: 开发时webpack-dev-server proxy，生产Nginx反代

Q13: TypeScript的核心特性？ - 静态类型检查、接口(interface)、泛型(generics) - 联合类型(A|B)、交叉类型(A&B)、类型守卫 - 工具类型: Partial/Required/Pick/Omit/Record

Q14: 前端性能优化方法？ - 资源: 代码分割(lazy import)、Tree Shaking、压缩(gzip/brotli) - 渲染: 虚拟列表、防抖/节流、requestAnimationFrame - 缓存: Service Worker、HTTP缓存策略 - 指标: LCP/INP/CLS(Core Web Vitals)

Q15: Webpack vs Vite？ | 维度 | Webpack | Vite | |------|---------|------| | 开发 | 打包后启动(慢) | ESM按需编译(快) | | 生产 | 成熟稳定 | Rollup打包 | | 生态 | 最丰富 | 快速增长 | | 趋势 | 存量项目 | 新项目首选 |

Q16: React状态管理方案对比？ - Context: 简单跨组件状态(主题/语言) - Redux/Zustand: 全局状态(复杂业务) - TanStack Query: 服务端状态(API数据缓存) - Jotai/Recoil: 原子化状态

Q17: 什么是SSR/SSG/CSR？ - CSR: 客户端渲染(SPA)，SEO差但交互好 - SSR: 服务端渲染(Next.js)，SEO好但服务端压力大 - SSG: 静态生成(build时渲染)，最快但内容固定

Q18: HTTP缓存策略？ - 强缓存: Cache-Control: max-age=31536000 - 协商缓存: ETag/If-None-Match、Last-Modified/If-Modified-Since - 策略: HTML不缓存，静态资源hash命名+长期缓存

Q19: XSS和CSRF的区别和防御？ - XSS: 注入恶意脚本 → 转义输出、CSP(Content Security Policy) - CSRF: 伪造用户请求 → SameSite Cookie、CSRF Token

Q20: 前端工程化包含哪些方面？ - 包管理(npm/pnpm)、构建(Vite/Webpack)、代码规范(ESLint/Prettier) - 测试(Jest/Vitest/Cypress)、CI/CD、监控(Sentry)、文档(Storybook)

二、进阶题（20题）¶

Q21: React Fiber架构和Concurrent Mode Q22: React Server Components工作原理 Q23: Next.js App Router vs Pages Router Q24: 微前端架构方案(Module Federation/qiankun) Q25: Web Workers和Service Workers Q26: WebSocket实时通信实现 Q27: 大型前端项目的Monorepo管理(Turborepo/Nx) Q28: 设计模式在前端的应用(观察者/策略/组合) Q29: 浏览器渲染原理(解析→CSSOM→Layout→Paint→Composite) Q30: 前端安全最佳实践 Q31: GraphQL vs REST对比 Q32: PWA(Progressive Web App) Q33: 前端错误监控和上报 Q34: 组件库设计(原子设计/无障碍/主题) Q35: 状态机在前端的应用(XState) Q36: 前端测试策略(单元/集成/E2E金字塔) Q37: CSS-in-JS vs CSS Modules vs Tailwind Q38: 前端国际化方案(i18n) Q39: 移动端适配方案(rem/vw/响应式) Q40: AI辅助前端开发(v0/Bolt/Cursor)

三、综合题/系统设计题（10题）¶

Q41: 设计一个组件库的技术方案 Q42: 设计无限滚动虚拟列表 Q43: 设计前端埋点和数据采集SDK Q44: 设计一个低代码平台的前端架构 Q45: 设计协作编辑器(CRDT/OT) Q46: 设计一个AI Chat界面(流式SSE+Markdown渲染) Q47: 设计大型SPA的路由架构 Q48: 手写Promise.all/Promise.race Q49: 手写深拷贝/防抖/节流 Q50: 手写发布订阅模式

最后更新：2026年2月