前端开发前端开发JavaScript高频面试题面试真题

前端开发面试高频题 Top 25：真实面试热度榜（2026 年 9 月版）

基于前端开发岗近 90 天的公开面经整理：被问得最多的 25 道高频题，标注热度等级和近期实际出题的知名公司，附答题框架解析。

收录题目

25 道

统计周期

2026年7月 - 2026年9月

近期出题公司腾讯在招字节跳动在招百度华为阿里巴巴飞书

面灵AI

2026年9月19日

24 分钟阅读

这是 /topics 岗位热度榜系列的第三期，也是前端方向的第一期。跑的是近 90 天窗口的公开面经，题目排序按实际出题情况来，不是把网上流传的老题单原样搬过来。

这个周期最明显的变化是：框架原理和工程实践类的题份量明显加重，不再是闭包、原型链这些老三样打天下——组件库架构、低代码平台扩展性、前端监控体系这类偏"你有没有真正做过大项目"的题，正在成为前端面试的新重灾区。

怎么用这份榜单：

热度标注（🔥/⭐/常规）只反映这道题在近 90 天、前端开发岗里的相对出题频率，跨岗位、跨周期不能直接比
公司名单是近期实际出过这道题、且能公开确认的知名公司，不代表完整名单，也不代表只有这几家在问
解析给的是答题框架和常见追问方向，不是标准答案——照着背，面试官换个问法就容易露馅

框架原理与工程实践

1. React Hooks 的设计动机是什么，跟类组件相比解决了什么问题？

Hooks 要解决的是类组件里逻辑复用困难、生命周期方法把不相关的逻辑硬凑在一起的问题——componentDidMount 里常常同时塞着数据请求、事件监听、埋点上报，读代码的人很难看出这几段逻辑其实互不相关。useEffect 把「按关注点组织代码」变成可能：一个副作用一个 useEffect，依赖数组决定什么时候重新执行。

面试官大概率会追问闭包陷阱——useEffect 里拿到的是创建那一刻的旧状态，还是每次渲染后最新的状态？为什么 Hooks 不能写在条件语句里（依赖调用顺序维护状态的对应关系）？能不能讲清楚 useCallback、useMemo 分别解决什么问题，比背 API 签名更有说服力。

2. 设计一个通用组件库，架构上要考虑哪些点？

这题考的是系统设计能力而不是某个 API 的用法。回答时至少覆盖几个维度：API 设计（受控 vs 非受控、Props 命名一致性、TypeScript 类型导出）、样式方案（CSS-in-JS、CSS Modules 还是原子化 CSS，怎么支持主题定制）、构建产物（ESM/CJS 双输出、按需引入、Tree Shaking 友好性）、版本与文档（语义化版本、变更日志、交互式文档站）。

追问通常落在具体取舍上：为什么选这个样式方案而不是另一个，按需引入是怎么实现的（babel 插件还是 ESM 天然支持），组件库内部状态管理怎么做才不会跟宿主项目的状态管理库冲突。

3. 复杂项目的技术选型标准是什么，框架和工具链要怎么对比评估？

标准答案式的回答容易显得空——"看团队熟悉度、看生态、看性能"谁都会说。真正能加分的是用一次具体选型的例子把维度串起来：比如在某个项目里为什么放弃了某个热门框架，是因为团队学习成本、还是构建工具链跟现有基建不兼容、还是长期维护成本算下来不划算。

面试官更想听到的是决策过程而不是结论——你怎么拿到这些信息（做了 POC 还是查了社区数据）、最后是怎么说服团队的、上线后有没有验证当初的判断。

4. Vue 的响应式原理具体是怎么实现的？

Vue 2 用 Object.defineProperty 递归劫持 data 对象的每个属性，转成 getter/setter；组件渲染时读取数据会触发 getter，把当前的 Watcher 收集为依赖，数据变化时 setter 通知所有依赖的 Watcher 重新渲染。这套机制的硬伤是没法检测新增/删除属性，也检测不到数组下标赋值和 length 变化，所以 Vue 2 才需要 Vue.set 和一组特殊处理的数组方法。

Vue 3 改用 Proxy 代理整个对象，天然能拦截属性的新增删除和数组变化，配合 WeakMap + effect 重新实现了依赖追踪。追问经常会问到为什么 Vue 3 要用 Proxy 替换 defineProperty——不是单纯为了修 bug，而是 Proxy 能拦截的操作类型（has、deleteProperty、数组方法）比 defineProperty 多得多，架构上更干净。

5. Webpack 和 Vite 有什么区别？

区别的核心在开发环境的构建方式：Webpack 需要先把整个依赖图打包完才能启动开发服务器，项目越大冷启动越慢；Vite 利用浏览器原生 ESM，开发时按需请求源码，配合 esbuild 预构建第三方依赖，冷启动和热更新基本不随项目体积增长。生产构建两者反而趋同——Vite 生产环境默认走 Rollup 打包，不是自己另起一套。

容易被追问到的点：Vite 的预构建具体做了什么（把 CommonJS 转成 ESM、把有很多内部模块的包合并成一个请求，减少浏览器发起的请求数）、HMR 的实现原理有什么不同、大型项目从 Webpack 迁移到 Vite 踩过哪些坑（比如某些 Webpack 特有的 loader 生态没有对应方案）。

6. 微前端的实现原理是什么，有哪些落地场景？

核心思路是把一个大应用拆成多个可以独立开发、独立部署的子应用，通过路由把请求分发到对应的子应用，再用沙箱机制隔离各个子应用的 JS 全局变量和 CSS 样式，避免互相污染。常见方案分两条路线：运行时集成（qiankun 这类基于 single-spa 的框架，靠 JS 沙箱和样式隔离）和构建时集成（Module Federation，靠 webpack 在构建阶段做模块联邦）。

适用场景通常是多团队并行开发同一个大型系统、或者老系统需要渐进式重构又不能停机重写。追问方向：两个子应用之间怎么通信（自定义事件、共享状态、还是靠 URL 传参）、样式隔离具体怎么做到（Shadow DOM 还是 CSS 作用域约定）、子应用之间的依赖重复加载怎么优化。

7. 低代码平台开发中的技术难点是什么，扩展性要怎么设计？

低代码平台的核心难点在于要把"页面搭建"这件事从写代码抽象成拖拽配置，同时又不能牺牲太多灵活性。技术上通常要解决几个问题：Schema 设计（用什么数据结构描述一个页面和组件树，怎么支持嵌套和条件渲染）、组件协议（第三方组件怎么接入平台、属性面板怎么自动生成）、逻辑编排（简单的联动配置化，复杂逻辑允许写自定义代码逃生）、渲染性能（大量动态组件的渲染优化）。

回答这题最容易犯的错是只讲"用了 JSON Schema"就结束——面试官通常想听你怎么处理"配置不够用、用户想写点自定义逻辑"这种边界情况，这才是低代码平台设计里最难的部分。

面灵AI 面试助手

面试官问「React Hooks 的设计动机是什么？跟类组件比解决了什么问题？」，看浮窗当场给你什么

面试官一开口，浮窗就出要点和能直接念的回答，被追问也接得住。共享屏幕时对面看不见。

腾讯会议文件编辑显示周一 14:32

腾讯会议 · 前端开发工程师 · 技术一面REC 00:10

面

面试官

我

面试官：

聆听中18:05

Ctrl+Alt+Shift+↑回看

Ctrl+Alt+Shift+↓看新

拖动分割线看面试官那一侧：共享屏幕、窗口录制、截图里都不会出现答案层

浮窗里这道题的回答

核心要点逻辑复用不再靠高阶组件和 render props、副作用按关注点组织、不用处理 this 绑定、代价是要理解闭包和依赖数组

参考回答主要解决三个问题。第一是逻辑复用：类组件只能靠高阶组件或 render props 复用状态逻辑，层层嵌套很难读，Hooks 可以直接抽成自定义 Hook。第二是副作用按关注点组织：以前 componentDidMount 里同时塞着请求、事件监听、埋点，现在一个 useEffect 只管一件事，依赖数组决定什么时候重跑。第三是不用再处理 this 绑定，函数组件写起来更轻、更好拆。代价是要理解闭包，依赖数组漏写就会读到旧值，这也是面试官常接着追问的地方。

JavaScript 核心机制

8. 手写 Promise 的核心逻辑，`resolve`/`reject` 分别怎么实现？

核心是一个三态状态机（pending/fulfilled/rejected），状态一旦从 pending 变化就不能再改。resolve 和 reject 负责把状态固化下来并触发已经注册的回调；then 方法要支持链式调用，返回一个新的 Promise，并且处理好"上一个 then 返回的是普通值还是另一个 Promise"这种值穿透逻辑。

手写到这题基本会往深了问：resolve 里传入的是另一个 Promise 该怎么处理（需要递归展开，等它 settle 之后再决定当前 Promise 的状态）、then 里的回调为什么要用微任务而不是同步执行（保证 Promise 的执行时序符合规范）、Promise.all/Promise.race 能不能顺手写出来。

9. 手写数组去重和高频字符统计，有哪些常见写法？

数组去重最简单的是 [...new Set(arr)]，但面试官通常想看你知不知道它对对象类型去重的局限（引用不同即视为不同值），进阶写法是用 Map 记录已出现的值、或者根据业务需要自定义比较逻辑。高频字符统计的标准写法是遍历字符串，用 Map 或对象记录每个字符出现的次数，再取最大值——重点是能不能顺手说清楚时间复杂度是 O(n)。

这类题的追问经常绕到工程场景：如果数组元素是对象、要按某个字段去重怎么写；如果字符串是超长文本，统计频率的内存开销怎么优化。

10. 手写一个队列数据结构，怎么保证并发场景下的安全性？

JS 主线程是单线程的，所以这里的"线程安全"通常问的是异步场景下的执行顺序保证——比如多个异步任务同时往队列里推数据、又要保证消费顺序不乱。基础的队列结构用数组或者链表实现入队出队，重点在于如果涉及 Web Worker 或者 Node.js 的 worker_threads，真正跨线程共享数据时要用 SharedArrayBuffer 加 Atomics 做原子操作，普通对象引用是没法跨线程安全共享的。

回答时先讲清楚"JS 单线程"和"并发安全"在这道题里到底指什么，再讲实现，比直接开始写代码更容易让面试官跟上你的思路。

11. 闭包的作用是什么，有哪些实际应用场景？

闭包是函数和它定义时所在的词法作用域的组合，使得函数在离开定义环境后依然能访问那个作用域里的变量。实际应用很多：防抖节流函数里用闭包保存定时器引用、模块模式用闭包实现私有变量、柯里化函数用闭包保存已经传入的参数、循环里用闭包各自保存独立的变量避免共享同一个引用。

面试官爱追问的坑是 var 在循环里的闭包陷阱——为什么用 var 声明的循环变量，异步回调里拿到的都是循环结束后的最终值，let 为什么能规避这个问题（块级作用域，每次循环都是新的绑定）。

12. 浏览器事件代理的原理是什么，有哪些实际应用？

事件代理利用的是事件冒泡机制：不给每个子元素单独绑定事件，而是把事件监听器绑定在父元素上，通过 event.target 判断实际触发事件的是哪个子元素。好处是减少事件监听器数量、动态新增的子元素不需要重新绑定事件。典型应用是长列表的点击处理、表格的行内操作按钮。

追问常见方向：event.target 和 event.currentTarget 的区别、哪些事件不会冒泡（比如 focus、blur，需要用捕获阶段或者 focusin/focusout 代替）、代理层级过深会不会有性能问题。

网络与安全

13. HTTP/1.1、HTTP/2、HTTP/3 的核心差异是什么？

HTTP/1.1 是纯文本协议，同一个域名下并发连接数有限，容易出现队头阻塞（一个请求卡住会堵住后面排队的请求）。HTTP/2 引入二进制分帧和多路复用，一个 TCP 连接上可以并行跑多个请求，还加了头部压缩（HPACK）和服务端推送，但因为多路复用建立在同一个 TCP 连接上，TCP 层面的丢包重传依然会阻塞这个连接上的所有请求。HTTP/3 干脆把传输层换成基于 UDP 的 QUIC，自己实现可靠传输和多路复用，从根上解决了 TCP 层队头阻塞，弱网环境下的表现明显更好。

容易被追问：为什么 HTTP/2 解决了应用层队头阻塞却没解决传输层的（协议分层的局限）、QUIC 的 0-RTT 建连是怎么做到的、这几个协议版本浏览器和服务器要怎么协商使用哪一个。

14. Web 常见的安全防护措施有哪些（XSS、CSRF）？

XSS 的防护核心是不相信任何用户输入：对输出到页面的内容做转义、避免直接用 innerHTML 插入用户输入、配置 CSP（内容安全策略）限制脚本来源、给敏感 Cookie 加上 HttpOnly 让脚本读不到。CSRF 的防护靠的是让攻击者伪造不出合法请求：CSRF Token 校验、SameSite Cookie 属性限制跨站请求携带 Cookie、关键操作加二次确认或者校验 Referer/Origin。

面试官通常会追问区别：XSS 是让恶意脚本在你的页面里跑起来，CSRF 是利用你已登录的身份去发起你不知道的请求——防护思路完全不同，混着答容易露馅。

15. 跨域问题有哪些解决方案，原理分别是什么？

同源策略限制的是浏览器发起的跨域请求，常见解决方案：CORS 由服务端设置 Access-Control-Allow-Origin 等响应头，浏览器根据这些头判断是否放行，复杂请求（自定义头、非简单方法）会先发一个 OPTIONS 预检请求；开发环境常用代理（webpack devServer proxy 或 Nginx 反向代理），让浏览器以为请求打的是同源地址，实际由代理服务器转发；JSONP 利用 <script> 标签不受同源限制的特性，但只能发 GET 请求，现在用得越来越少。

追问方向：预检请求什么情况下会触发、为什么简单请求不需要预检、生产环境一般用代理还是 CORS（大部分场景优先 CORS，代理更多用在开发联调阶段）。

16. WebSocket 断线重连之后，怎么保障数据一致性？

WebSocket 断线是网络场景下的常态（弱网、切换网络、服务端重启），要处理好几层问题：重连策略（指数退避重试，避免网络刚断就疯狂重连打满带宽）、消息补偿（重连成功后要能拿到断线期间错过的消息，通常靠客户端记录最后收到的消息序号，重连时告诉服务端从哪里续传）、幂等处理（重连过程中可能收到重复消息，客户端要能识别并丢弃）。

面试官经常会追问具体场景：如果服务端不支持消息补偿，只能靠重新拉一次全量数据兜底，这种降级方案怎么设计；心跳机制怎么和重连逻辑配合，判断"多久没收到心跳就认为断线"的阈值怎么定。

浏览器渲染与性能优化

17. 什么是重绘和回流？怎么做渲染优化？

回流（reflow）是元素的几何属性变化（尺寸、位置）导致浏览器重新计算布局，代价最高，因为可能牵连整棵渲染树；重绘（repaint）是样式变化但不影响布局（比如颜色）时的重新绘制，代价相对小。回流必然引起重绘，反过来不成立。

优化手段：把连续的样式读写操作分开、避免频繁读取 offsetTop 这类会触发强制同步布局的属性、批量 DOM 操作时用 DocumentFragment 先在内存里拼好再一次性插入、用 transform/opacity 做动画（能触发合成层，不参与常规的布局重排）。追问经常会问到"为什么 transform 不会触发回流"，答案是它只影响合成阶段，不参与布局计算。

18. 首屏加载性能怎么优化（SSR、CDN、缓存）？

首屏优化通常按加载链路拆解：网络层（CDN 就近分发静态资源、HTTP/2 多路复用、开启 gzip/brotli 压缩）、资源层（代码分割按路由懒加载、图片懒加载和响应式图片、字体子集化）、渲染层（SSR 或 SSG 把首屏 HTML 直接吐给浏览器，减少白屏时间；关键 CSS 内联，非关键资源延迟加载）、缓存层（强缓存配合文件名哈希，资源更新时文件名跟着变，避免缓存失效问题）。

面试官比较看重你有没有实际量化过优化效果——首屏时间从多少降到多少，用了哪些指标衡量（FCP、LCP、TTI），光罗列手段但说不出实际数据支撑说服力有限。

19. 如何实现响应式布局？

响应式布局的核心是让页面结构随视口变化自适应，常见组合：流式布局（用百分比宽度代替固定像素）、Flexbox 处理一维方向的弹性排列、Grid 处理二维网格布局、媒体查询在不同断点切换样式、相对单位（rem、vw/vh）代替 px。

容易被追问到移动端适配的细节：viewport 的 meta 标签怎么配置、rem 方案怎么配合 flexible.js 或者纯 CSS 的 clamp() 实现、断点应该按内容还是按设备尺寸来定（更推荐按内容——布局在哪个宽度开始显得挤了，就在哪里加断点）。

20. 浏览器缓存机制是怎样的？

浏览器缓存分强缓存和协商缓存两层：强缓存靠 Cache-Control（max-age）或者更老的 Expires 头，命中的话浏览器直接读本地缓存，完全不发请求；协商缓存靠 Last-Modified/If-Modified-Since 或者更精确的 ETag/If-None-Match，浏览器带着这些标识去问服务器"资源变了吗"，没变返回 304，浏览器继续用本地缓存。

追问通常会绕到工程实践：为什么 HTML 文件通常不做强缓存（要保证用户拿到的入口文件总是最新的，才能找到最新的带 hash 的 JS/CSS）、JS/CSS 文件名为什么要带内容哈希（配合强缓存长期缓存，内容变了文件名跟着变，天然解决缓存更新问题）。

21. 强缓存和协商缓存的区别是什么？

区别在于要不要发请求：强缓存命中时浏览器完全不跟服务器通信，直接用本地副本；协商缓存每次都会发一个请求问服务器"资源是否有更新"，服务器判断没变化就返回 304（不带响应体，省流量），有变化才返回新的完整响应。强缓存优先级更高，只有强缓存失效或者不存在时才会走协商缓存这一步。

这题经常和上一题一起问，区别在于面试官想看你能不能讲清楚"发不发请求"这个关键分界点，而不是泛泛地说"一个是本地一个是服务器"。

22. 浏览器有哪些存储方式？

常见的有 Cookie（容量小，大约 4KB，会自动随请求发送到服务器，适合存身份凭证）、localStorage（大约 5-10MB，永久存储除非手动清除，同源共享）、sessionStorage（容量类似，但只在当前标签页生命周期内有效）、IndexedDB（容量大得多，支持索引查询，适合存结构化的大量数据）、Cache Storage（配合 Service Worker 缓存网络请求，是 PWA 离线能力的基础）。

选型时要按几个维度权衡：容量大小、要不要自动带上服务器请求、生命周期长短、是否需要跨标签页共享、要不要支持复杂查询——面试官经常会给一个具体场景（比如"要缓存用户的草稿内容"）让你现场选。

系统设计与新技术

23. 前端监控系统怎么设计（埋点、异常捕获）？

一套前端监控系统通常分几个模块：异常采集（window.onerror 捕获运行时错误、unhandledrejection 捕获未处理的 Promise 异常、框架自带的错误边界捕获渲染异常）、性能采集（用 Performance API 拿 FCP/LCP 这类核心指标、接口请求耗时）、行为埋点（页面浏览、点击事件，用于还原用户操作路径辅助排查问题）、上报（用 sendBeacon 保证页面卸载时数据也能发出去，做好采样和批量上报避免影响性能）。

追问方向：如何做错误去重和聚合（同一个错误可能被成千上万用户触发，需要按堆栈指纹聚合）、Source Map 怎么在生产环境还原压缩代码的报错位置又不泄露源码、监控系统本身出问题时怎么兜底。

24. WebAssembly 能不能和原生模块交互？可行性怎么样？

WebAssembly 本身运行在沙箱里，不能直接访问 DOM 或者操作系统 API，需要通过 JS 胶水代码做桥接——JS 负责调用 Wasm 导出的函数，也可以把 JS 函数导入给 Wasm 调用，数据交换主要通过共享的线性内存（传递复杂数据结构通常需要手动处理内存布局和序列化）。跟"原生模块"交互一般是指跟 C/C++/Rust 编译出的 Wasm 模块对接，工具链上 Emscripten、wasm-bindgen 这类工具能自动生成大部分胶水代码，减少手写成本。

适合追问的场景是性能敏感的计算密集型任务——图片/视频处理、加密解密、复杂算法，把这部分用 Wasm 实现能绕开 JS 解释执行的性能瓶颈，但频繁的 JS 和 Wasm 之间数据搬运本身也有开销，不是所有场景都划算。

25. 超大字符串怎么存储和高效查询？

前端场景下的"超大字符串"通常出现在日志展示、大文本编辑器这类场景。存储上要考虑分片处理，不要一次性把整个字符串塞进内存和 DOM——用虚拟滚动只渲染可视区域内的内容，超出的部分保持字符串形式或者转成更紧凑的数据结构。查询上如果需要频繁的子串匹配，全量遍历字符串代价太高，可以考虑建立索引（比如按行号建立偏移量索引，定位到具体位置再做局部匹配），避免每次查询都是 O(n) 全文扫描。

这题更多考的是"遇到大数据量场景，你的第一反应是加载全部数据还是想办法分片处理"这种工程直觉，具体实现细节反而是次要的。

榜单之外：几条趋势观察

这一期前端榜单里，框架原理和工程实践类的题占比明显偏高，纯语法层面的题（比如原型链、this 指向）反而没有进入这次的高频榜——说明面试官默认这些是基本功，考察重心已经转移到"你有没有真正搭过复杂系统"。

低代码、微前端、前端监控这类偏基建方向的题第一次大量出现在前端高频榜。这些方向过去更多出现在高级/资深岗的面试里，现在初中级岗位也开始被问到，至少是要求能说清楚基本原理和适用场景。

手写题的方向在变——不再只考排序算法这类纯算法题，Promise 实现、数组去重这类"贴近日常业务代码"的手写题权重在上升，说明面试官更想验证你写业务代码的手感，而不是单纯的算法能力。

常见问题

这份榜单是怎么统计出来的？

我们持续收录公开面经，把同一道题的不同问法聚合到一起，按岗位、按最近 90 天的窗口比较每道题被提及的相对热度，取热度最高的一批收录进榜单。榜单只标注「高频/较高频/常规」这三档相对等级，不对外公开具体的提及次数和公司家数。

高频题背熟了是不是就能过面试？

不一定。这份榜单能帮你把有限的准备时间用在最可能被问到的方向上，但现在的面试官普遍会在第一问之后接着问项目细节和底层原理，照本宣科的回答很容易在追问环节露馅。建议每道题都配一个自己项目里的真实案例，解析里提到的追问方向提前在脑子里过一遍。

这份榜单多久更新一次？

按岗位滚动更新，统计窗口固定为最近 90 天，目的是让榜单反映当下的出题趋势，而不是几年前就流传的旧题。新一期发布后，旧版本会继续保留在站内存档，方便对比不同周期的热度变化。

有没有针对具体框架（React / Vue）的细分版本？

官方榜单按岗位大类整理，覆盖的是前端岗普遍会考的题，不区分具体框架栈。如果你的目标岗位明确要求某个框架方向，或者有具体的目标公司，可以用面灵AI的定制题库功能，输入目标公司、岗位和你的简历，生成更贴合这三者的专属题库。

想要一份属于你的题库？

按你的目标公司和岗位，定制专属高频题

这份合集是官方按岗位整理的通用版。告诉面灵AI 你要面的公司和岗位，结合你的简历，生成一份只属于你的近期高频题和参考回答。

C++面试题与八股文汇总：205 道内存管理、虚函数、智能指针、STL 高频真题分类整理（2026 面经）

面灵AI整理的 C++ 八股合集，覆盖内存管理与指针、智能指针与 RAII、虚函数与多态、C++11 新特性与移动语义、STL 容器、关键字、编译链接、多线程与手撕题，标注近期实际出题的大厂。

205 道题2026年10月12日

运维与基础架构截至 2026 年 10 月

运维面试题 / 运维八股 Top 25：运维与基础架构岗高频面经热度榜（2026 年 10 月版）

运维、SRE、基础架构岗位公开面经整理：25 道高频运维面试题与八股，标注热度等级和近期出题的知名大厂，附 Linux、网络、K8s、容器的答题框架。

25 道题2026年10月8日

深度学习截至 2026 年 10 月

深度学习面试题与八股文汇总：192 道 Transformer、CNN、RNN 高频真题分类整理（2026 面经）

面灵AI整理的深度学习八股合集，覆盖反向传播与归一化、Transformer 与自注意力、位置编码、BERT 与 GPT、FlashAttention 与 MoE、CNN 与目标检测、RNN 与 LSTM、生成模型，标注近期实际出题的大厂。

192 道题2026年10月5日