2026前端面试题汇总(持续更新2026-04-17)
·
📚 2026前端面试题汇总导读文(已整理)
本文汇总了专栏《前端八股文面经大全》中的精华面试题,涵盖了2026年前端面试的高频考点与解析。所有题目均来源于网络最新笔经面经,本导读文将持续更新,建议收藏。
- 文章总数:58篇(⬆️新增8篇)
- 平均质量分:95
- 关注数:20(⬆️+5)
- 总阅读量:41,599+(⬆️)
- 总收藏量:781+(⬆️)
- 作者:木斯佳(华为HDE认证专家、OpenTiny布道师)
🚀 配套龙虾Skills:前端笔面试通关神器
为了让大家的备考更高效,我基于这个专栏的内容体系,开发了一个前端笔面试通关Skill,现已开源!
这是一个提供出题→答题→评判→复盘完整训练闭环的AI技能,核心能力包括:
- 实时出题:优先从真题网站获取最新题目,覆盖字节、腾讯、快手等大厂2026年面经
- 智能评判:用户作答后给出量化评分,指出不足和改进方向
- 知识回顾:相关知识点拓展,帮助巩固记忆
- 历史追踪:记录答题历史,识别薄弱考点,针对性强化
支持三种模式:随机出题、定向出题(按考点/公司)、模拟面试
立即体验:https://skill.xfyun.cn/space/global/frontend-interview-master
🏢 大厂面试合集
字节跳动
- 字节跳动音视频前端一面·上(2026-03-03) - FCP优化🔴、ESM兼容、代码分割、不定高虚拟列表🔴
- 字节跳动音视频前端一面·下(2026-03-03) - AI问答页面抖动处理、Markdown选型、浏览器插件
- 字节跳动前端一面(2025-10-09) - Vue/React对比、双向绑定原理🔴、自定义Hooks
- 字节跳动前端一面(2026-02-01) - URL输入到展示全流程🔴、事件循环🔴、响应式原理🔴
- 字节跳动交易与广告前端一面(2026-02-10) - 图片懒加载、闭包🔴、防抖节流🔴
- 字节跳动前端二面部分(2026-01-13) - 事件循环🔴、缓存策略🔴、React状态管理
- 字节跳动AIDP前端实习一面(2026-01-29) - MCP协议、大模型工具调用、AI工程化
- 字节广告交易前端一面(2026-03-31) - 流式数据处理、Markdown容错、虚拟列表排查🔴、登录鉴权、nextTick🔴、BFC🔴、暂时性死区🔴、Generator/Iterator
- 字节跳动前端一面·深度解析(Plus Ultra版)(2026-03-30) - Reconciler遍历🔴、fiber树🔴、diff算法🔴、GPU光栅化、Webpack/Vite、ESM/CJS、Message Channel🔴、设计模式、异步调度器手写
- 字节AIDP前端一面(2026-04-13) - 断点续传、HTTP协议🔴、WebSocket🔴、WebRTC、心跳机制+指数退避重连、码率自适应、TCP/UDP、事件循环🔴、agent loop、RAG(新增)
腾讯
- 腾讯前端暑期提前批一、二、三面(上)(2026-03-04) - 跨端架构、React原理🔴、性能优化🔴
- 腾讯前端暑期提前批一、二、三面(下)(2026-03-04) - LRU缓存、大数相加、国际化开发
- 腾讯前端AI面试(2026-02-28) - 网络原理、浏览器缓存🔴、React事件机制
- 腾讯WXG技术架构前端面试(2025-11-19) - JS内存管理、WebSocket全双工通信🔴
- 腾讯云前端实习一面(2025-12-26) - SSE可靠性🔴、RAG检索优化、状态管理
- 腾讯前端暑期AI面(2026-03-26) - 事件循环🔴、HTTPS、TypeScript实践、React性能优化🔴、CSS优化🔴
- 腾讯PCG暑期前端一面(2026-04-01) - 闭包实现🔴、O(logN)乘法、TCP/HTTP协议栈🔴、HTTPS、TypeScript枚举、CSS布局🔴、公式编辑器
- 腾讯CSIG实习面(2026-04-10) - 流式输出原理、SSE vs Axios🔴、HTTP协议演进🔴(1/1.1/2/3/QUIC)、埋点意义、Vue计算属性、XSS、UDP可靠传输、事件循环🔴、虚拟列表🔴、闭包🔴、Top K算法(新增)
- 腾讯前端一面(2026-04-04) - Monorepo架构、AI模块拆分、双Token鉴权+无感刷新+请求队列问题、SSE/WebSocket🔴、性能指标🔴(FP/FCP/LCP/INP/CLS)、SPA白屏优化、React单标签原理、缓存机制🔴、HTTPS原理、HTTP版本演进(新增)
- 腾讯TEG前端实习一面(2026-04-03) - 原型链🔴(顶层Object.prototype/null)、闭包🔴、防抖节流🔴+手写、CSS盒模型、水平垂直居中🔴、Flex属性、EM/REM/VH/VW、两栏布局、Vue生命周期/指令/组件通信/watch原理、HTTP/HTTPS、Webpack loader/plugin、Vite快原因、零钱兑换(新增)
快手
- 快手春招前端一面(2026-02-09) - Git协作🔴、Vite/Webpack对比、框架选型
- 快手AI应用方向前端实习一面(2026-01-23) - 断点续传、响应式原理🔴、并发控制
- 快手前端一面(2026-03-29) - WebSocket心跳🔴、消息体设计、撤回功能、虚拟列表🔴、Vue/React响应式🔴、Proxy局限、闭包🔴、事件循环🔴、requestAnimationFrame、Flex布局🔴
- 快手前端一面(2026-04-07) - React Hooks🔴(useMemo/useCallback/useEffect/useLayoutEffect)、模拟生命周期、Git协作🔴、移动端适配、iOS/安卓适配差异、性能优化🔴、懒加载、用户认证、WebSocket断联重连、SSE、权限设计、表单状态管理、有效括号(新增)
小红书
- 小红书前端一二面OC(上)·(2026-03-17) - Agent开发、Web Worker、AI能力建设、组件设计原则🔴
- 小红书前端一二面OC(下)·(2026-03-17) - Vue3响应式原理🔴(Proxy缺陷、依赖收集、ref/reactive)、Git操作🔴、三栏布局
- 小红书前端一面(2026-02-03) - 双Token机制、Vue3响应式原理🔴
- 小红书前端日常实习(2026-01-05) - React Fiber架构、Promise.all实现🔴
Bilibili
- Bilibili 前端实习面(2026-03-20) - 项目架构、i18n国际化、SSR/ISR、SSE/WebSocket🔴、RAG流程优化、树形组件
- bilibili前端一面(2026-03-26) - HTML语义化、meta标签、闭包🔴、事件循环🔴、SSE数据格式、localStorage存满方案、Promise懒加载🔴、Promise红绿灯
- bilibili生态技术方向二面(2026-03-25) - RAG应用场景🔴、向量数据库、SSE连接机制、AI coding工具、AGENTS.md规范
阿里云
- 阿里云AI应用开发一面(2026-03-20) - SSE vs WebSocket🔴、流式数据解析、Promise并发控制🔴、TypeScript高级类型、滚动体验优化
- 阿里云AI应用开发二面(2026-03-21) - 虚拟滚动🔴、RAG前端链路🔴、Prompt Engineering、AI组件库设计、WebAssembly优化、Function Calling
得物
- 得物AI应用开发一面(2026-03-23)【加精】 - 流式渲染、RAG架构🔴、Prompt优化🔴、Prompt Injection防范、AI场景性能监控、重试机制设计、向量数据库前端应用
美团(新增)
- 美团财务科技前端一面(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原理(新增)
影刀
- 影刀AI前端一面(2026-04-01) - AI sandbox、SSE断线重连🔴、中止fetch、SWR请求缓存、国际化翻译缓存、tool调用
蓝色光标
- 蓝色光标前端一面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泛型、高阶组件、防抖节流🔴(新增)
其他大厂
- 百度前端实习一面(2026-03-11) - 工程化能力、事件循环🔴、虚拟列表🔴
- 京东零售前端实习一面(2026-01-20) - Vue2/Vue3差异、路由守卫、跨域方案🔴
- 滴滴校招前端一面 - 事件循环深度解析🔴
🤖 AI与新兴技术方向
- MiniMax前端AI开发实习一面(2026-02-26) - SSE vs WebSocket🔴、长文本渲染优化
- MiniMax前端实习二面(2026-01-13) - 大文件分片上传、Web Worker优化
- X transfer前端一面(2026-03-10) - MCP和Skills应用、场景排查题
🎓 实习与校招专场
- 拓竹科技前端一面(2026-03-15) - CSS主题实现、拖拽交互、防抖节流🔴
- 袋鼠云前端实习一面(2026-03-03) - 数组分组、防抖函数🔴、Vue组件通信
- 哈啰前端一面(2026-03-04) - this指向、Vue3 vs Vue2🔴、React Hooks、虚拟列表🔴、FCP优化🔴
- 深睿医疗前端一、二面(2026-03-04) - Pinia设计、Monorepo实践、LRU缓存、事件循环🔴
- MetaAPP前端一面(2026-03-03) - 组件封装、rem适配、CSS抛物线动画、Promise相关🔴、响应式原理🔴
- 安恒信息前端线上面(2026-02-27) - Vue响应式对比🔴、MCP/Skills概念
- 万兴科技前端一面(2026-02-25) - 盒模型、回流重绘🔴、缓存机制🔴、数据类型判断🔴
- 万兴科技前端实习一面(2026-02-03) - 虚拟DOM差异、WebAssembly
- 钛动科技前端(2026-01-20) - 模块联邦、首屏优化🔴、大文件上传
- 大麦社招5年经验电话面(2026-02-07) - this绑定、防抖节流🔴、多端组件、性能优化🔴、埋点实现
- 有赞前端一面二面HR面(2026-01-13) - 渲染优化、定时器vs rAF、数据类型判断🔴、虚拟列表🔴
- 莉莉丝前端一面(2026-02-05) - Promise缓存🔴、虚拟列表优化🔴、数据类型判断🔴、防抖节流🔴
🔍 专项深度解析
JavaScript核心
- 莉莉丝面试:JS数据类型与相等判断 🔴
- 滴滴面试:事件循环题深度解析 🔴
- 腾讯WXG面试:V8垃圾回收机制
- 字节Plus Ultra版:Generator/Iterator、暂时性死区、异步调度器手写 🔴
Vue/React框架
- 小红书二面:Vue3响应式原理深度解析 🔴
- 字节跳动面试:Vue/React对比与双向绑定 🔴
- 哈啰面试:React Hooks实现原理
- 字节Plus Ultra版:Reconciler遍历、fiber树、diff算法、Message Channel 🔴
性能优化
📊 高频考点分类汇总
🔴 高频考点(出现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 in和for of的区别 🔴- 普通对象如何支持
for...of遍历(需实现[Symbol.iterator]) - 生成器(Generator)与迭代器(Iterator)
- 暂时性死区(TDZ):为什么产生?
let/const存在,var不存在 - 可选链操作符
?.的作用 import与require的区别- 关于
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.all、Promise.allSettled、Promise.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-boxvs 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、
memo、useMemo、useCallback)
四、框架(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执行机制useEffect和useLayoutEffect区别useRef和useState区别- 受控组件和非受控组件
- 可复用表单组件设计(扩展性、维护性、受控/非受控)
- 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高级类型(
Record、Partial、Pick) - TypeScript枚举本质上是什么(编译后变成对象)
- 如何查枚举类有没有提供一个值(
hasOwnProperty或in运算符) - 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博客
本次更新亮点:
- ✅ 新增8篇面经文章,总数达58篇
- ✅ 新增美团、京东、小迈科技公司分类
- ✅ 新增30+考点:HTTP协议演进、QUIC、WebSocket重连策略、性能指标详解、SPA白屏优化、虚拟列表前缀高度表+二分查找、设计模式、排序算法、Top K算法、零钱兑换、重排链表、MCP/Skill原理、Transformer原理等
- ✅ 高频考点更新:事件循环16次、响应式原理13次、闭包12次、Promise相关10次、SSE/WebSocket10次
- ✅ 手写题新增:重排链表、零钱兑换、Top K频繁子串
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)