岗位题目
前端相关面试题
闭包是什么，闭包会导致什么？
这题考察词法作用域、变量保留、封装能力和内存风险。回答要说明闭包不是天然泄漏，只有无必要长期持有引用才会形成问题。
同题还出现在 1 个公司岗位
前端从 Ajax、Node.js 到数据驱动之后，下一阶段趋势是什么？
这是一道开放型趋势判断题，重点不是猜中唯一答案，而是能把前端发展的主线讲清楚：Ajax 让页面具备局部数据交互能力，Node 把前端从浏览器内扩展到工程化、构建、SSR 和 BFF，数据驱动让 UI 开发进入组件化、声明式和状态管理阶段。下一个阶段更可能不是单点技术，而是智能化、全栈边缘化、跨端运行时、设计工程协同、性能与可观测性等方向的融合。
浏览器输入 URL 到页面渲染经历哪些步骤？
这道题考察的是浏览器导航生命周期的完整理解，不只是背诵 DNS、TCP、HTTP、渲染几个名词，而是要把输入 URL 后的导航调度、缓存命中、Service Worker、网络连接复用、服务端响应、HTML 增量解析、资源优先级、JS 阻塞、渲染流水线和性能指标串成一条因果链。优秀答案应体现浏览器、网络协议、前端性能和运行时机制之间的关系。
同公司岗位有 2 条面经记录
new 关键字的运行流程？实现一个自己的 new
这题考察 new 的四步语义、原型链绑定、this 绑定和构造函数返回值规则，手写实现要覆盖返回对象的特殊分支。
说一下 JS 的继承机制
这道题考察 JS 继承背后的原型链查找、实例属性初始化、方法复用和 ES6 class 语义。高质量回答要把对象怎么找属性、子类实例怎么拿到父类初始化结果、不同继承写法各自的坑讲清楚。
了解 JS 的异步嘛？从单线程、事件循环、宏任务和微任务讲一下
这题考察的不是背宏任务、微任务名词，而是能否从调用栈、宿主异步、任务队列、微任务检查点和渲染机会推导代码执行顺序，并解释页面为什么会被长任务或微任务链卡住。
了解模块化么？说说 CommonJS 和 ESModule
这题不是只考 CommonJS 和 ESModule 的语法名称，而是看你能不能从加载流程解释绑定语义、循环依赖、Tree Shaking 和工程互操作。
说说 Vue 的响应式原理吧
这题考察 Vue 响应式如何把数据读写、依赖收集和视图更新串起来，回答时要以 Vue2 的 defineProperty 为主，并能说明 Vue3 Proxy 解决了哪些边界。
小程序生命周期，生命周期内都做什么？
这题考察是否能按 App、Page、Component 三层说明生命周期职责，并把初始化、显示刷新、渲染完成和资源清理放在正确阶段。
为什么不用节流，说说防抖和节流的区别
这题考察防抖和节流的触发模型、场景选择和首尾触发配置，重点不是背定义，而是能解释为什么某个业务不用节流。
手写题：数组去重，用多种方式实现
这题考察数组去重的多种实现、相等判断和复杂度边界。高质量回答要覆盖基本类型、NaN、对象引用和对象数组按业务 key 去重。
手写：用 Vue 写一个登录组件，考验组件封装能力
这道题不是让你画一个账号密码框，而是考察登录表单组件的封装边界。高质量回答要说清 LoginForm 负责 UI、输入状态、校验、错误展示和提交契约，业务页面负责登录接口、token/session、路由跳转、风控和埋点。
设计一个组件需要考虑什么？
这题考察组件设计的工程判断：先定职责边界，再设计输入输出、状态归属、扩展点、可访问性、异常状态和维护成本。
手写快排及复杂度分析
这题不是只问快排定义，而是要求候选人能现场写出可运行的原地分区递归，并解释为什么平均 O(nlogn)、最坏 O(n²)、递归栈平均 O(logn)。高质量回答要把 partition 不变量、递归边界、重复元素处理和 pivot 优化一起讲清楚。
还有哪些 O(nlogn) 的排序算法，各自的原理和使用场景？
这题考察常见 O(nlogn) 比较排序的原理、复杂度、稳定性和场景选择，不能只列名字。
http 缓存，304 的返回体是什么？
这题考察 HTTP 缓存链路和 304 语义：304 表示协商缓存命中，服务端不返回新的实体内容，浏览器复用本地缓存体。
怎么考虑使用缓存的情况，怎么强制刷新？
这题考察缓存策略设计和强制刷新手段。核心是按资源类型制定策略，并通过改变 URL、改变缓存头或清理运行时缓存让客户端拿到新内容。
给你一个数组，其中元素是节点值以及父节点值，要求去重并还原树
这道题考察扁平数组转树的实现能力。关键不是只会 parentId 挂 children，而是先用 Map 按唯一 id 去重和建索引，再用第二遍挂载，明确重复 id、父节点后出现、多根、孤儿节点和循环引用的处理策略。
事件循环和渲染的关系是怎么样的？
这题考察浏览器主线程调度：宏任务执行后清空微任务，随后浏览器在合适时机进行渲染；长任务和微任务堆积都会推迟渲染。
为什么 useState 是数组结构的形式返回的，能不能以 Object 的形式返回？
这题考察 Hook API 设计和 React 状态匹配机制。useState 返回数组不是技术限制，而是固定二元返回值更方便调用方自由命名。
React.forwardRef 知道么？
这题考察 React ref 穿透和命令式能力封装。回答要说明 forwardRef 解决什么问题、如何转发、什么时候配合 useImperativeHandle 限制暴露面。
Promise.then 返回的是什么？
这题考察 Promise 链式调用的本质：then 总是返回新的 Promise，新 Promise 的状态由回调返回值、异常或 thenable 解析结果决定。
手撕发布订阅
这题考察发布订阅的核心数据结构和边界处理。高质量实现要包含 on、off、emit、once，并处理执行中增删监听器的问题。
React Hooks 能用在 for 循环中么？为什么？条件语句呢？为什么？
这题考察 React Hooks 的调用顺序规则。Hooks 不能放在循环、条件和嵌套函数里，因为 React 依赖稳定调用顺序匹配内部状态槽位。
用过微前端，实现原理是什么？
这题考察微前端的工程拆分能力。回答要从为什么拆、主子应用如何加载和卸载、隔离怎么做、通信和依赖如何治理讲到边界成本。
Vue2 和 Vue3 都用过，有什么区别？
这题考察 Vue 版本演进理解。高质量回答要从响应式原理、组合式 API、编译运行时优化、TypeScript 支持和迁移风险展开。
列表的优化
这题考察前端性能定位和大列表治理。回答要先判断瓶颈来源，再按数据、渲染、更新、资源和交互体验分层优化。
螺旋数组填充：给一个数组，返回一个 m*n 的矩阵，数从小到大顺时针螺旋填充矩阵，要求 |m-n| 尽可能小
这题考察矩阵尺寸选择和边界模拟。先根据数组长度找最接近的 m、n，再用四个边界按顺时针方向填充，重点处理单行单列和越界收缩。
手写：并发池
这题考察 Promise 调度能力。核心是限制同时运行的任务数，保持结果顺序，明确失败策略，并在任务完成后持续补位。
CSS 动画，JS 动画和 Three.js 动画有什么区别？
这题考察动画方案选型。回答要比较 CSS、JS 和 Three.js 的表达能力、渲染路径、控制能力、性能成本和适用场景。
了解重排和重绘吗？
这题考察浏览器渲染链路和性能优化。回答要区分重排、重绘、合成，并说明常见触发条件、强制同步布局和优化手段。
INP 和 TTFB 是什么？
这题考察性能指标理解。INP 衡量交互响应延迟，TTFB 衡量首字节到达时间，回答要说明定义、影响因素、定位方法和优化方向。
如何收集性能数据？
这题考察前端性能监控体系。回答要区分实验室数据和真实用户数据，说明 Performance API、PerformanceObserver、业务上下文和可靠上报策略。
TailwindCSS 和 CSS 有什么区别？
这题考察 CSS 工程化理解。回答要说明 CSS 是原生语言，Tailwind 是 utility-first 框架，并比较组织方式、约束、构建和维护成本。
memo, useMemo, useCallback 分别是干什么的？
这题考察 React 记忆化优化边界。回答要区分组件跳过渲染、值缓存和函数引用稳定，并说明命中条件和成本。
什么场景下需要缓存？
这题考察缓存取舍。回答要说明什么值得缓存、缓存放在哪一层、key 和失效策略怎么设计，以及脏数据风险。
我把所有的组件都用 memo 包起来有什么问题？
这题考察 React 过度优化判断。回答要说明 memo 的比较成本、命中条件、引用稳定性、依赖复杂度和 Profiler 驱动优化。
Vite 和 Next.js 都用过，你会做 SSR 吗？
这题考察 SSR 全链路理解。回答要说明服务端渲染、数据获取、HTML 注水、客户端 hydration、构建产物和 Next.js 与 Vite 的职责差异。
用过 TS 吗，跟 JS 有什么区别？
这题考察 TypeScript 的类型系统边界和工程价值。高质量回答要讲清它是编译期约束、最终运行仍是 JavaScript，并补充外部数据、any 和运行时校验的边界。
手撕：数组拉平（flatten）
这题考察递归遍历、depth 语义、顺序保持和边界处理。回答时要先约定函数契约，再写出不会丢类型的实现，并说明深层数组时的栈风险。
webpack 打包原理
这题考察 Webpack 从入口构建依赖图、转换模块、生成 chunk 和注入运行时代码的完整链路。回答要区分模块、chunk、bundle、loader、plugin 和 runtime。
webpack 的 loader 和 plugin 的区别
这题考察 Webpack 扩展机制的职责边界。高质量回答要说明 loader 处理单个模块内容，plugin 参与构建生命周期，并能说清执行时机和典型场景。
webpack 热启动原理
这题考察 HMR 的端到端链路：文件监听、增量编译、WebSocket 通知、客户端拉取更新、模块 accept 和无法处理时回退刷新。
CSS position 属性说说，分别都是相对于谁
这题考察 position 各取值的文档流影响和 containing block 规则。回答要特别纠正 absolute 不一定相对父元素、fixed 也可能受特殊祖先影响。
CSS 单位说说
这题考察 CSS 单位的参照对象和适用场景。高质量回答要按绝对单位、字体相对单位、百分比、视口单位、容器相关单位和 Grid 单位分类。
CSS 水平垂直居中方案
这题考察居中方案的适用前提，而不是背一个固定写法。回答要按现代布局、定位方案、文本场景和未知尺寸边界分类。
filter、map、reduce 的性能和区别是什么？
这题考察数组高阶函数的语义、返回值、遍历成本和可读性取舍。先讲用途差异，再谈性能，避免把所有问题都归结为 reduce 更强。
虚拟 DOM 和 diff 算法
这题考察虚拟 DOM 的抽象目的、diff 的启发式假设、key 的节点身份作用和最终 patch 到真实 DOM 的过程。不要把虚拟 DOM 说成一定比直接操作 DOM 快。