岗位题目
前端相关面试题
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 快。
数组常用的 API,哪些能改变原数组?
这题考察数组 API 的可变性和返回值语义。回答时按会修改原数组、返回新数组、只读取查询三类整理,并强调 sort、reverse、splice 是高频坑。
闭包是什么,闭包会导致什么?
这题考察词法作用域、变量保留、封装能力和内存风险。回答要说明闭包不是天然泄漏,只有无必要长期持有引用才会形成问题。
this 绑定说说
这题考察 this 的调用点规则、绑定优先级和箭头函数词法 this。回答要强调看调用方式,不是看函数声明位置。
一个 HTTP 请求的全过程
这题考察从 URL 到响应处理的完整链路,回答要按缓存、DNS、连接、TLS、HTTP 报文、服务端处理和客户端渲染顺序展开。
同题还出现在 2 个面经场景