本文汇总了专栏《前端八股文面经大全》中的精华面试题,涵盖了2026年前端面试的高频考点与解析。所有题目均来源于网络最新笔经面经,本导读文将持续更新,建议收藏。

  • 文章总数58篇(⬆️新增8篇)
  • 平均质量分:95
  • 关注数20(⬆️+5)
  • 总阅读量41,599+(⬆️)
  • 总收藏量781+(⬆️)
  • 作者:木斯佳(华为HDE认证专家、OpenTiny布道师)

🚀 配套龙虾Skills:前端笔面试通关神器

为了让大家的备考更高效,我基于这个专栏的内容体系,开发了一个前端笔面试通关Skill,现已开源!

这是一个提供出题→答题→评判→复盘完整训练闭环的AI技能,核心能力包括:

  • 实时出题:优先从真题网站获取最新题目,覆盖字节、腾讯、快手等大厂2026年面经
  • 智能评判:用户作答后给出量化评分,指出不足和改进方向
  • 知识回顾:相关知识点拓展,帮助巩固记忆
  • 历史追踪:记录答题历史,识别薄弱考点,针对性强化

支持三种模式:随机出题、定向出题(按考点/公司)、模拟面试

立即体验https://skill.xfyun.cn/space/global/frontend-interview-master

🏢 大厂面试合集

字节跳动

腾讯

快手

小红书

Bilibili

阿里云

得物

美团(新增)

  • 美团财务科技前端一面(2026-04-09) - JS数据类型🔴(基础/引用区别)、let/const/var区别、Promise🔴、箭头函数、ES6转ES5(Babel)、Webpack/Vite配置、Vue父子组件通信、Vuex/Pinia、技术选型、重排链表(新增)

京东(新增)

  • 京东零售JDY前端一面(2026-04-14) - 虚拟列表🔴(前缀高度表+二分查找)、上下文压缩、本地持久化(LRU)、流式响应vs非流式、大模型中断处理(断点续传/重连)、Vue3 vs Vue2、大文件分片上传、秒传、设计模式(观察者模式)、排序算法、归并排序、Transformer原理、MCP/Skill原理(新增)

影刀

蓝色光标

  • 蓝色光标前端一面OC(2026-03-23) - margin重叠🔴、水平垂直居中🔴、transform重排追问、判断空对象、数组方法、存储区别🔴、v-if/v-show、keep-alive、Vue key、组件传值、数组转树手写

小迈科技(新增)

  • 小迈科技前端一面(2026-04-13) - 闭包🔴、Promise方法🔴、事件循环🔴、CSS布局+居中、绝对定位vs浮动、ES6特性(const引用类型)、箭头函数this🔴、登录页面实现、状态码、React响应式(state/effect/context)、Redux、TypeScript泛型、高阶组件、防抖节流🔴(新增)

其他大厂


🤖 AI与新兴技术方向


🎓 实习与校招专场


🔍 专项深度解析

JavaScript核心

Vue/React框架

性能优化


📊 高频考点分类汇总

🔴 高频考点(出现3次以上,更新版)

考点 出现次数 趋势
事件循环/异步 16 ⬆️
Vue/React响应式原理 13 ⬆️
闭包 12 ⬆️
Promise相关 10 ⬆️
SSE/WebSocket 10 ⬆️
虚拟列表 9 ⬆️
性能优化 9 ⬆️
缓存策略 8 ⬆️
TypeScript 7 ⬆️
防抖节流 7 ⬆️
HTTP/HTTPS协议 6 ⬆️(新增)
跨域/CORS 4
Web Worker 4
数据类型判断 4 ⬆️
Git操作 3
设计模式 2 ⬆️(新增)
排序算法 2 ⬆️(新增)

一、HTML基础

  • HTML5语义化标签
  • meta标签的作用与SEO优化
  • 为什么选择前端?学习前端的技术平台与渠道

二、JavaScript核心

2.1 基础语法与概念
  • ===== 的区别 🔴
  • JS数据类型有哪些?基础数据类型和引用数据类型的本质区别(栈堆存储)🔴(新增)
  • js定义变量的方式有几种(var/let/const/function/class)(新增)
  • let/const与var的区别(块级作用域、变量提升、暂时性死区、重复声明)(新增)
  • const引用类型修改会出错吗(不会,不能重新赋值但可修改属性)(新增)
  • 如何判断对象为空?(Object.keys()JSON.stringify()for...in
  • 闭包是什么?怎么用?怎么销毁?使用场景有哪些?(数据私有化、函数工厂、防抖节流)🔴
  • 如何实现闭包(C++捕获列表、C函数栈)
  • 原型链是什么?原型链的顶层是什么Object.prototype,再往上null)🔴(新增)
  • this指向和箭头函数的this指向 🔴
  • 箭头函数与普通函数的区别(无自身this、无arguments、不能作为构造函数)(新增)
  • for infor of 的区别 🔴
  • 普通对象如何支持for...of遍历(需实现[Symbol.iterator]
  • 生成器(Generator)与迭代器(Iterator)
  • 暂时性死区(TDZ):为什么产生?let/const存在,var不存在
  • 可选链操作符?.的作用
  • importrequire的区别
  • 关于Map你了解多少?
  • setInterval和setTimeout的区别
  • JS数组方法中改变原数组的方法(push/pop/shift/unshift/splice/sort/reverse
  • 什么是异步?获取LocalStorage/URL参数算异步吗?(同步API,不算异步)
2.2 异步编程
  • JS事件循环机制 🔴
  • 宏任务和微任务有哪些?执行顺序?🔴
  • 任务循环在浏览器和Node的区别
  • Message Channel是什么(宏任务,React调度器选型原因)
  • requestAnimationFrame属于微任务还是宏任务?(宏任务)
  • async/await原理及异常捕获 🔴
  • Promise异常处理 🔴
  • Promise的方法列举then/catch/finally/all/allSettled/race/reject/resolve)(新增)
  • Promise.allPromise.allSettledPromise.race区别 🔴
  • 缓存Promise的实现及应用场景
  • 流式数据解析器(ReadableStream)
  • agent loop(AI代理循环)(新增)
2.3 手写代码题
  • 手写防抖函数(含immediate参数)🔴
  • 手写节流函数 🔴
  • 手写深拷贝(处理对象、数组及其他类型)🔴
  • 手写Promise.all 🔴
  • 手写Promise实现图片懒加载
  • 手写Promise实现红绿灯(红灯3s,黄灯1s,绿灯3s)
  • 手写LRU缓存算法 🔴
  • 手写超时重试函数
  • 数组分组函数
  • 列表到树的数据变形 🔴
  • 三数之和(变形题)
  • URL参数解析
  • 数组转树(经典手写)
  • 多个数组的全组合(笛卡尔积)
  • 有效的括号(括号匹配)
  • 同时允许2个任务执行的异步调度器
  • 两个有序数组合并成一个有序数组
  • O(log N)乘法运算符实现
  • 无重复字符的最长子串
  • 重排链表(新增)
  • 零钱兑换(动态规划)(新增)
  • Top K频繁子串查询系统(新增)

三、CSS/浏览器

3.1 CSS基础
  • 盒子模型 🔴(标准content-box vs IEborder-box
  • 块元素、行内块、行内元素
  • image标签的display类型(可替换行内元素,可设宽高)
  • CSS单位:EM/REM区别、VH/VW含义(新增)
  • CSS垂直居中实现方式 🔴(flex、绝对定位等)
  • 0.5px边框实现(transform: scale(0.5)
  • position属性值及用法
  • 绝对定位和浮动的区别(绝对定位脱离文档流不影响其他元素,浮动会影响后续内容)(新增)
  • flex布局及flex:1含义 🔴
  • flex三个属性flex-grow/flex-shrink/flex-basis
  • grid布局
  • 三栏布局多种实现(含BFC)🔴
  • BFC能解决什么问题?(浮动、margin重叠)🔴
  • 怎样可以产生一个BFC?
  • 伪元素的作用(::before/::after,插入虚拟内容)
  • CSS自定义变量的作用(动态主题、复用样式)
  • margin重叠问题:原理 + 解决方案(BFC、边框、padding)🔴
  • transform是否触发重排?(不触发,走合成层)
  • position:absolute是否触发重排?(影响自身但不影响父级)
  • 设计响应式页面:左侧固定宽度,右侧铺满屏幕(flex方案)(新增)
3.2 浏览器原理
  • 从输入URL到页面展示全过程 🔴
  • 浏览器事件循环 🔴
  • 浏览器线程进程(主进程、渲染进程、线程分工)
  • 浏览器不同tab通信方式(localStorage、BroadcastChannel、SharedWorker、postMessage)
  • 回流重绘原理及优化 🔴
  • 浏览器从渲染树到显示的完整阶段:布局→分层→分块→光栅化→合成
  • 为什么光栅化要由GPU去做(并行处理、性能优势)
  • 强缓存与协商缓存 🔴
  • display/visibility对重排重绘的影响
  • localStorage存满解决方案(LRU策略、IndexedDB)
  • sessionStorage刷新后是否存在(存在,同标签页会话级)
  • XSS攻击是什么(跨站脚本攻击)(新增)
  • 埋点的意义、前端埋点SDK实现、Web性能指标(FP/FCP/LCP/INP/CLS)(新增)
3.3 性能优化
  • FCP优化方法 🔴
  • 列举优化CSS减少首屏加载时间的方法(关键CSS内联、压缩、按需加载、媒体查询)
  • 图片懒加载实现及兼容方案
  • 虚拟列表实现原理(定高/不定高)🔴
  • 虚拟列表性能问题如何发现和排查?(Performance面板、长任务监控)
  • 虚拟列表的替代方案(IntersectionObserver)(新增)
  • 前缀高度表+二分查找在虚拟列表中的作用(动态高度快速定位)(新增)
  • 如何评判网页性能是否合格?(LCP、FID、CLS等Web Vitals)
  • 首屏优化策略 🔴
  • SPA应用白屏优化(从资源加载、骨架屏、代码分割等方面)(新增)
  • 大文件上传优化
  • 性能指标了解(FCP、LCP、FID等)
  • 内存泄漏排查
  • JS长任务优化
  • 代码分割、请求合并、数据缓存
  • React组件性能分析与优化(React DevTools Profiler、memouseMemouseCallback

四、框架(Vue/React)

4.1 Vue
  • Vue2和Vue3响应式原理深度对比(Proxy缺陷、依赖收集、ref/reactive差异)🔴
  • 为什么Vue3还要进行重写?
  • 为什么 ref 需要 .value,而 reactive 不需要?
  • 如何处理 reactive 复杂对象重新赋值?
  • Vue3 中 Proxy 的核心缺陷?
  • Proxy相对Object.defineProperty的优点、Proxy的局限性
  • Vue2和Vue3虚拟DOM区别
  • Vue组件通信方式 🔴(props/$emit/vuex/provide-inject/eventBus)
  • 兄弟组件通信的前提(公共父组件)
  • Vue Router路由守卫
  • Vuex和Pinia区别
  • Vuex适用场景(状态管理、跨组件共享)(新增)
  • Vue3组合式API vs Vue2 options API
  • Vue生命周期有哪些?为什么要设计这些生命周期?(8阶段,分离职责)(新增)
  • Vue有哪些指令(v-if/v-show/v-for/v-bind/v-on/v-model等)(新增)
  • Vue计算属性的原理(基于响应式系统,缓存,惰性求值)(新增)
  • watch怎么实现的(每个属性创建Watcher实例,deep深度监听)(新增)
  • Vue diff算法及key的作用 🔴
  • Vue中key的作用详解(diff优化、状态保持)
  • v-if vs v-show 选型场景(tab切换推荐v-show)
  • keep-alive的作用与原理(缓存组件、生命周期变化)
  • nextTick的作用(DOM更新后执行回调)
  • Vue白屏问题及解决
4.2 React
  • React框架理解 🔴
  • React vs Vue区别 🔴
  • Reconciler如何遍历fiber树(先序遍历)
  • DOM树和fiber树的区别(可中断、带优先级、双缓冲)
  • React时间分片(将长任务拆分为多个小任务)
  • React为什么用Message Channel调度而没用setTimeout(避免嵌套调用、优先级控制)
  • React Fiber架构及原理 🔴
  • React合成事件 🔴
  • React Hooks常用API(useState/useEffect/useMemo/useCallback/useLayoutEffect/useContext)(新增)
  • React Hooks模拟生命周期(组件初始化用useEffect空依赖)(新增)
  • React响应式理解(state/effect/context)(新增)
  • 高阶组件(HOC)是什么,和普通组件的区别(代码复用、Props劫持、渲染劫持)(新增)
  • Redux有什么特别的地方(单一数据源、只读状态、纯函数修改)(新增)
  • React单标签原理(JSX要求单一根元素,或使用Fragment)(新增)
  • React性能优化策略 🔴
  • useState特性和优势
  • setState执行机制
  • useEffectuseLayoutEffect区别
  • useRefuseState区别
  • 受控组件和非受控组件
  • 可复用表单组件设计(扩展性、维护性、受控/非受控)
  • JavaScript是不是单线程的语言(主线程单线程+Web Worker多线程)

五、工程化与构建工具

  • Webpack 与 Vite 的核心区别
  • Webpack常用配置项(entry/output/loader/plugin/devServer等)(新增)
  • Vite打包用的什么(Rollup进行生产打包)
  • 为什么vite打包很快(开发环境ESM按需编译,生产环境Rollup预构建)(新增)
  • ESM和CJS区别(同步/异步导入、静态分析、Tree shaking支持)
  • Tree-shaking 的执行原理
  • Webpack构建流程
  • Webpack loader和plugin的区别(loader转换模块,plugin扩展构建功能)(新增)
  • 代码分割思路
  • 模块联邦架构
  • 微前端隔离及通信
  • TypeScript泛型 🔴
  • TypeScript高级类型(RecordPartialPick
  • TypeScript枚举本质上是什么(编译后变成对象)
  • 如何查枚举类有没有提供一个值(hasOwnPropertyin运算符)
  • WebWorker使用(技术调研、独立完成?)
  • WebAssembly了解
  • Monorepo架构实现(代码位置+配置)(新增)
  • AI模块如何拆分(放在哪里)(新增)
  • SDD、spec coding了解吗(规格驱动开发、AI编码规范)
  • AGENTS.md与README区别(AI项目规范文档的定位)
  • 如何让AI遵守项目规范(prompt工程、rules文件、上下文注入)
  • 项目中的静态资源处理方式(CDN、缓存策略、指纹化命名)
  • 项目中的图片压缩方法(工具压缩、WebP格式、响应式图片)
  • ES6向ES5转换(Babel原理)(新增)
  • 技术选型(Vue/React选择依据,Webpack/Vite选择依据,UI组件库选择)(新增)

六、网络与通信

  • HTTP1.1和HTTP2.0区别
  • HTTP/1, HTTP/1.1, HTTP/2, HTTP/3的演进与优化目标(新增)
  • HTTP/3核心特性(QUIC协议,基于UDP)(新增)
  • QUIC协议优势(0-RTT、连接迁移、内置加密)(新增)
  • TCP和UDP区别
  • UDP如何保证可靠通讯(应用层实现ACK、重传、排序)(新增)
  • TCP可靠传输实现
  • TCP三次握手四次挥手
  • HTTP请求流程(DNS解析→TCP连接→发送请求→服务端处理→返回响应→解析渲染)(新增)
  • ajax底层原理(XMLHttpRequest对象,open/send/onreadystatechange)(新增)
  • HTTP请求报文Content-Type常见字段(application/json、multipart/form-data、text/plain等)(新增)
  • 纯手写HTTP服务器(从TCP握手开始)(TCP三次握手→请求解析→响应构造)
  • HTTPS优势 🔴
  • HTTPS实现原理(非对称加密+对称加密结合)
  • TLS证书能劫持HTTPS通信吗(不能直接劫持,需私钥;中间人攻击需根证书)(新增)
  • 跨域原因及解决方案 🔴
  • 强缓存 vs 协商缓存 🔴
  • 缓存过期机制
  • SSE vs WebSocket深度对比(为什么不用WebSocket?)🔴
  • SSE vs Axios在HTTP上的区别(SSE基于EventSource,Axios基于XHR/fetch,SSE服务端推送)(新增)
  • SSE数据格式(data: xxx\n\n
  • SSE连接机制与断线重连(自动重连、心跳机制)
  • SSE断掉后如何保证继续(设计重连+断点续传机制)
  • WebSocket心跳包字段设计(维持连接、检测断线)
  • WebSocket重连逻辑会执行几次(需设计防抖/指数退避避免无限重连)(新增)
  • WebSocket连接不稳定问题处理(心跳+指数退避重连)(新增)
  • 撤回功能:HTTP还是WebSocket?(业务指令通常走HTTP)
  • WebSocket全双工通信实现
  • 码率自适应调整实现(根据网卡/带宽判断动态调整码率)(新增)
  • 中止fetch请求的设计(AbortController + 后端感知停止)
  • 请求缓存(SWR)的应用场景(缓存、重新验证、乐观更新)
  • RAG(检索增强生成):应用场景、RAG存什么、RAG前端链路 🔴
  • 向量数据库(Pinecone、Milvus、Qdrant等选型)
  • 前端AI实时补全实现(类似Copilot的补全方案)
  • AI sandbox的作用(安全执行AI生成代码的隔离环境)
  • RAG中怎么计算chunk相似度的?(余弦相似度、欧氏距离)
  • RAG效果不好怎么优化?AI胡言乱语怎么办?(分块策略、Prompt优化、防幻觉)
  • 上下文摘要压缩机制的实现思路(新增)
  • 本地持久化机制实现(LRU存储结构、删除逻辑)(新增)
  • 流式响应与非流式响应的区别(新增)
  • 大模型返回中断处理(断点续传/重连)(新增)

七、AI工程化与Prompt工程

  • Prompt Engineering理解:前端如何通过工程化手段提升Prompt质量和安全性 🔴
  • 如何优化Prompt Engineering以减少Token消耗
  • Prompt Injection攻击防范(AI安全防御)
  • Function Calling原理:前端如何配合模型完成工具调用
  • AI组件库设计(AIUIKit):通用AI组件架构
  • AI内容持久化与多端同步(存储方案设计)
  • 向量数据库在前端的应用(前端是否需要处理向量化)
  • AI场景性能监控指标(首字延迟、Token生成速度等)
  • AI接口重试机制设计(网络抖动处理)
  • AI取代程序员观点(面试官:短期不行,长期会)
  • llm运行过程了解、多模态消息与纯文本消息区别
  • 国际化翻译缓存优化(缓存翻译结果、实时性平衡)
  • MCP和Skill的原理(AI代理协议与技能系统)(新增)
  • Transformer原理了解(自注意力机制、编码器-解码器架构)(新增)

八、项目实战与场景题

  • 实习项目的架构是怎样的?(分层设计、技术选型)
  • 项目的构建流程(从0到1怎么做出来的)(新增)
  • 登录页面实现(认证流程、表单校验)(新增)
  • 双Token实现+自动续期+无感刷新(新增)
  • 无感刷新下请求队列问题(分页错乱bug解决)(新增)
  • 用户认证实现(JWT/Session)(新增)
  • 权限设计(发布者/接单员权限隔离)(新增)
  • 复杂表单状态管理与校验(动态表单输入项)(新增)
  • 实时文本编辑同步策略(断网时内容处理)(新增)
  • i18n(国际化)怎么设计的?(react-i18next/vue-i18n、懒加载)
  • 国际化+后端翻译缓存优化
  • SSR 和 ISR 的区别是什么?(渲染时机、数据实时性)
  • 设计组件时如何考虑通用性和扩展性?(组件设计原则)
  • 项目中树形目录编辑组件拖拉拽效果怎么实现的?(数据结构、react-dnd)
  • 无限层级文件夹管理的懒加载(纯前端渲染控制 vs 后端接口)(新增)
  • 赛码网如何拆分组件?用户信息数据如何处理?代码编辑器tab设计?
  • 抽奖圆盘实现(Canvas绘制 + 旋转动画 + 随机算法)
  • 文本收起展开效果(-webkit-line-clamp + 展开状态切换)
  • 可复用表单组件设计步骤(扩展性、可维护性策略)
  • AI coding工具使用情况(Cursor/Copilot,占比20%-30%)
  • 项目中的登录鉴权怎么做?
  • 项目完整的构建流程
  • 项目中的静态资源处理方式
  • 项目中的图片压缩方法
  • 公式编辑器测量和布局工作
  • 集中式错误处理(音视频通话项目中)(新增)
  • 秒传、断点续传的实现原理(新增)
  • 大文件分片上传(Blob.slice API)(新增)
  • 设计模式:观察者模式优点、了解哪些设计模式(新增)
  • 排序算法:归并排序时间复杂度O(n log n)、空间复杂度O(n)(新增)
  • 项目难点亮点介绍
  • 实习收获与成长
  • 埋点实现(曝光埋点)
  • 语音转文字应用场景
  • 团队协作问题解决
  • 技术学习路径和方法
  • Git协作流程与冲突解决(多人协作)(新增)

九、操作系统与计算机基础

  • 线程和进程的区别?(资源占用、通信、开销)
  • 浏览器的线程进程有哪些?(GUI渲染线程、JS引擎线程、事件触发线程等)
  • CPU和GPU区别
  • 从代码到程序运行过程
  • 静态链接
  • 内核态和用户态
  • 进程通信方式
  • 内存寻址
  • JS内存管理(新生代/老年代)
  • C++如何实现闭包(捕获列表)
  • C函数调用栈处理(入栈保存现场、弹栈恢复)
  • 汇编语言了解(RISC-V)

十、Next.js与服务端渲染

  • Next.js渲染模式
  • SSR/ISR/SSG对比
  • Next.js图片优化组件
  • WebP兼容及降级处理

十一、存储与缓存

  • localStorage、sessionStorage、cookie的区别🔴
  • cookie过期时间设置(Expires/Max-Age,不设置则会话级)
  • localStorage存满解决方案(LRU、IndexedDB)
  • sessionStorage刷新后数据是否存在(存在)

📌 更新日志

  • 2026-03-16:创建导读文,收录全部34篇文章,完成面试题分类汇总
  • 2026-03-20:新增Bilibili、小红书(上/下)面经3篇,文章总数更新至37篇
  • 2026-03-28:新增Bilibili(2篇)、腾讯AI面、阿里云(2篇)、得物、蓝色光标共8篇文章,文章总数更新至45篇;新增HTML基础、AI工程化两大板块
  • 2026-04-07:新增腾讯PCG、影刀AI、字节广告交易、字节Plus Ultra版、快手共5篇文章,文章总数更新至50篇;新增Generator/Iterator、暂时性死区、fiber树遍历、GPU光栅化、WebSocket心跳、O(logN)乘法等20+考点
  • 2026-04-17:新增小迈科技、京东零售JDY、字节AIDP、腾讯CSIG、美团财务科技、快手(二)、腾讯前端一面、腾讯TEG共8篇文章,文章总数更新至58篇;新增HTTP协议演进、WebSocket重连策略、性能指标详解、SPA白屏优化、虚拟列表前缀高度表、设计模式、排序算法、Top K算法、零钱兑换等30+考点;更新高频统计表

专栏地址前端八股文面经大全
作者主页木斯佳的CSDN博客
在这里插入图片描述


本次更新亮点:

  1. ✅ 新增8篇面经文章,总数达58篇
  2. ✅ 新增美团京东小迈科技公司分类
  3. 新增30+考点:HTTP协议演进、QUIC、WebSocket重连策略、性能指标详解、SPA白屏优化、虚拟列表前缀高度表+二分查找、设计模式、排序算法、Top K算法、零钱兑换、重排链表、MCP/Skill原理、Transformer原理等
  4. 高频考点更新:事件循环16次、响应式原理13次、闭包12次、Promise相关10次、SSE/WebSocket10次
  5. 手写题新增:重排链表、零钱兑换、Top K频繁子串
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐