前言
作为前端开发者，突破中高级面试瓶颈仅靠基础语法是不够的。大厂面试更看重底层原理、手写实现及跨领域综合能力。以下整理了 50 道核心面试题，涵盖原生开发、框架核心、网络协议、工程化、跨端开发及 TypeScript 六大方向，适合用于自测与复盘。
一、原生开发（HTML/CSS/JavaScript）
原生能力是前端的根基，这类题目聚焦底层原理与手写实现，是中高级面试的必考点：
- 说明原生 JS 操作 CSSOM 的性能瓶颈，对比 CSS StyleSheet API、内联样式、外部样式表的性能差异及适用场景。
- 实现完全符合 Promise/A + 规范的 Promise，包含 all、race、allSettled、any 方法，需处理非函数参数、循环引用等边界场景。
- 解析 V8 引擎的垃圾回收机制（标记清除 / 整理、引用计数），说明新生代 / 老生代内存管理策略及优化手段。
- 分析 CSS 层叠上下文（Stacking Context）的创建条件，结合嵌套场景分析元素渲染顺序，说明 z-index 失效的底层核心原因。
- 对比 CommonJS 与 ES Module 的加载机制、执行时机、循环依赖处理方式，分析浏览器与 Node.js 环境的差异。
- 说明 HTML form 表单 enctype 属性的所有取值及对应 HTTP 请求体格式，分析 multipart/form-data 的底层编码规则。
- 基于 Generator + Promise 实现简易版 async/await，需支持错误捕获、并发执行逻辑。
- 分析 [] == ![]、{} == !{} 等特殊表达式的执行过程及结果原因，梳理 JS 隐式类型转换的核心规则。
- 仅使用 CSS 实现无限循环的 3D 旋转立方体，要求兼容主流浏览器、无 JS 参与，需考虑透视、景深的底层渲染逻辑。
- 解释 0.1+0.2!==0.3 的底层原理，分析 BigInt 与 Number 的转换规则、精度问题及 BigInt 的适用场景。
- 从栈内存、堆内存、作用域链角度解释闭包的底层实现，梳理闭包导致内存泄漏的典型场景及解决方案。
- 详细说明 HTML5 自定义元素（Custom Elements）的全生命周期钩子，实现一个具备完整生命周期的可复用自定义元素，并分析其与 Vue/React 组件生命周期的核心异同。
- 分析 CSS contain 属性各取值（layout/paint/style/content）的渲染优化原理，举例说明在大型前端应用中的实际落地场景。
- 分析浏览器与 Node.js 环境下事件循环（Event Loop）的差异，明确 process.nextTick、Promise.then、setImmediate、setTimeout 的执行优先级逻辑。
- 实现高性能深拷贝函数，需处理循环引用、Symbol/BigInt/RegExp/Date/Map/Set 等特殊类型及不可枚举属性。
- 解释 CSS 中 BFC 的触发条件、布局规则，结合具体业务场景分析利用 BFC 解决 margin 重叠和浮动塌陷的底层原理。
- 解析 CSS Grid 中 fr 单位的计算逻辑，结合 auto-fill/auto-fit + minmax () 分析响应式布局底层实现，对比 Grid 与 Flex 布局的核心差异。
二、框架核心（Vue2/3、React16/18/19）
框架是前端开发的核心工具，这类题目聚焦源码级原理与版本差异，考察深度理解能力：
- 分析 React18 并发渲染（Concurrent Rendering）核心概念，解释 useTransition、useDeferredValue 的底层实现与适用场景。
- 解析 Vue3 响应式核心（Proxy + Reflect），对比 Reactive、Ref、Computed 的依赖收集逻辑与实现差异。
- 解析 React Context API 底层实现，分析其性能瓶颈及基于 memo/useMemo/ 拆分 Context 的优化手段。
- 分析 Vue2/Vue3 自定义指令生命周期钩子的差异，实现一个支持防抖 / 节流的通用自定义指令。
- 对比 Vuex 与 Pinia 的底层实现（响应式、模块化、持久化），说明 Pinia 适配 Vue3 的核心优势。
- 深度对比 Vue 组件通信方式（Props/Emit/Vuex/Pinia/Provide/Inject/EventBus/$attrs）的适用场景与性能影响。
- 解析 Vue2 响应式原理（Object.defineProperty、依赖收集、派发更新），说明数组变异方法重写逻辑及索引 / 长度修改无法触发更新的原因。
- 对比 React 状态管理方案（useState/useReducer/Redux/Zustand/Jotai）的底层实现与适用场景。
- 解析 React16 Fiber 架构的设计理念与底层实现，说明 Fiber 节点结构、调度优先级及时间切片（Time Slicing）原理。
- 映射 React 类组件与函数组件的生命周期，对比 useEffect、useLayoutEffect 与 componentDidMount/Update 的执行时机差异。
