27届暑期前端高频面试题汇总（字节百度阿里快手等多家大厂）

前两天整理了Java后端的面试题汇总，感觉大家还挺有需要的，收藏挺多，有牛友私信我能不能整理其他岗位的，今天就先出一版前端的吧，其他岗位后面陆续更新，感谢大家捧场！

题目均来自其他牛友发的面经，真实可靠，每道题也都标注了来源

觉得有帮助的话，辛苦点赞收藏转发一键三连，需要其他岗位的，也可以评论留言

一、JS 基础

1. 闭包是什么？应用场景？

来源：百度一面、阿里一面、厦门中小厂、字节前端、百度暑期一面

• 厦门追问：闭包导致的内存泄漏怎么定位
• 字节番茄追问：使用了闭包页面变得很卡如何排查

2. this 指向 / 箭头函数 this

来源：哈啰一面、字节 TikTok 一面、字节番茄三面、海康威视、百度暑期一面、字节抖音二面、美团一面

• 字节抖音追问：严格模式下 this 的输出有什么变化
• 美团追问：call/apply/bind 三者区别

3. 事件循环 / 宏微任务 + 输出题

来源：百度 3.17、字节前端二面、字节前端一面、小红书一二面、字节抖音二面、快手前端实习、百度暑期一面

• 百度暑期追问：微任务执行完之后又有新的微任务会怎样
• 字节抖音追问：浏览器事件循环和 Node.js 事件循环有什么区别

4. JS 数据类型 / 基本类型 vs 引用类型 / null vs undefined

来源：美团暑期前端、阿里一面、快手前端实习、百度暑期一面、字节前端一面、美团一面、美团日常实习

• 百度 3.17 追问：JS 变量和对象分别存储在栈内存还是堆内存
• 美团日常追问：set / map / weakMap 各自应用场景

5. 原型链 / JS 继承方式

来源：阿里一面、快手前端实习、厦门中小厂、字节 TikTok、美团一面

6. Promise & 异步

来源：阿里一面、海康威视、字节 TikTok、美团日常、厦门中小厂

• 字节抖音追问：实现带最大并发数限制的 Promise.all（见手撕榜）

7. 防抖 / 节流

来源：百度暑期一面、美团暑期前端、字节前端、腾讯前端实习、京东日常二面

• 美团追问：防抖应用场景

8. 其他常考基础

来源：字节前端一面

• 0.1 + 0.2 ≠ 0.3 的原因
• new 操作符做了什么
• CommonJS vs ES6 module

9. ES6 新特性 / 浅深拷贝

来源：小红书一面、美团财务、厦门中小厂、海康威视、美团一面

• 美团财务追问：开发用 ES6 但上线用 ES5，怎么配置自动转换

二、框架（React / Vue）

1. Vue2 vs Vue3 响应式原理（高频题，几乎每场必问）

来源：哈啰、小红书一二面、阿里、字节番茄、美团财务、京东暑期、字节前端、海康威视

• 小红书二面追问：为什么 Vue3 还要重写ref 和 reactive 差异为什么 ref 需要 .value 而 reactive 不需要Vue3 中 Proxy 的核心缺陷
• 字节番茄追问：vue diff 算法

2. React Hooks（useState/useEffect/useCallback/useMemo/useRef/useContext）

来源：美团前端、字节 TikTok、百度 3.17、腾讯提前批、字节前端、京东暑期、快手电商

• 美团追问：哪些变化会触发函数重新渲染如何避免函数组件的重新渲染受控和非受控组件
• 腾讯提前批追问：useLayoutEffect vs useEffectuseEffect 返回函数何时执行
• 快手电商追问：React.Memo 和 useMemo 分别代表什么

3. Virtual DOM / Diff 算法

来源：美团前端、字节前端、美团日常、京东暑期、字节番茄

4. React Fiber / 调度 / setState 流程

来源：百度 3.17、字节番茄一面、腾讯提前批、字节前端二面

• 百度追问：React Fiber 怎么终止和调和遍历
• 字节前端追问：调用 setState 之后 React 内部怎么处理改了 state 视图不更新怎么排查

5. Pinia vs Vuex（高频）

来源：小红书、京东暑期、美团财务、海康威视、厦门、腾讯前端实习、腾讯 ai 凉经

• 京东暑期追问：Pinia 如何减少组件重复渲染Pinia 如何实现时间旅行（撤销重做）

6. 组件通信 / 组件设计

来源：快手前端实习、海康威视、小红书二面、京东日常二面、美团日常、字节前端一面

• 小红书二面追问：Vue 兄弟组件通信前提是什么（公共父组件）
• 京东日常追问：broadcast channel、mitt 第三方库通信

7. Vue 生命周期 / 指令

来源：快手前端实习、京东暑期、海康威视、京东日常

• watch vs computed
• v-for key
• keep-alive

8. React 18 / React 19 新特性

来源：字节前端、京东暑期、腾讯提前批

9. vue 双向绑定原理 / Vuex 数据流动

来源：阿里一面、字节番茄、腾讯前端实习

三、浏览器

1. 浏览器输入 URL 到渲染（高频题，几乎每家必问）

来源：字节暑期一面、美团暑期、百度 3.17、字节前端二面、百度暑期一面、腾讯前端实习、字节前端一面、字节 TikTok

• 百度暑期追问：HTML 解析过程中遇到 JS 会怎样
• 腾讯前端实习追问：对页面进行操作（点击按钮）浏览器会发生什么

2. 强缓存 / 协商缓存

来源：百度 3.17、字节前端二面、字节抖音、字节前端一面、百度暑期

• 字节前端一面追问：协商缓存的相关字段和状态码

3. 重排（回流）/ 重绘

来源：字节前端、海康威视、百度暑期、腾讯前端实习

4. 浏览器存储（localStorage / sessionStorage / cookie / IndexedDB）

来源：快手前端实习、海康威视、字节前端、腾讯前端实习、美团一面、字节 TikTok

• 字节 TikTok 追问：token 为什么存在 localStorage 中 / 短 token / 长 token 设计

5. 浏览器安全策略 / 同源策略 / 跨域

来源：字节前端、百度暑期、阿里

• 阿里追问：CORS 和 JSONP 实现

6. script defer vs async

来源：百度暑期

7. 浏览器渲染机制 / 怎么避免重排重绘

来源：字节前端一面

四、网络

1. HTTP 各版本对比（1.0 / 1.1 / 2.0 / 3.0）

来源：百度 3.17、字节番茄一面、腾讯提前批、字节前端一面、百度暑期、字节前端

• 字节番茄追问：HTTP3 使用 UDP 怎么保证可靠性
• 腾讯提前批追问：HTTP2 二进制帧如果丢失，重传机制是怎样的

2. TCP vs UDP / TCP 怎么实现可靠传输

来源：小红书、腾讯提前批、字节前端一面、字节番茄

3. HTTPS 握手 / TLS 加密

来源：小红书、字节番茄二面、腾讯云

• 字节番茄二面追问：TLS 是对称加密还是非对称证书是干什么的证书怎么颁发

4. SSE vs WebSocket（2026 年新增高频★，AI 对话场景必问）

来源：bilibili、腾讯前端一面、字节前端一面、字节抖音二面、京东暑期、字节前端、哈啰、快手电商

• 腾讯前端追问：为什么 ChatGPT 用 SSE 不用 WebSocket？流式输出为什么不用其他方式？
• 字节前端一面追问：SSE 流式 Markdown 语法不全（比如加粗或画横线只吐出一部分）怎么处理？
• 哈啰追问：SSE 断线重连 / ping 心跳 / abortController 边界情况降级兜底

5. fetch vs XMLHttpRequest / Ajax 应用场景

来源：京东暑期、阿里

6. HTTP 状态码 / GET vs POST

来源：快手前端实习、百度暑期、阿里、美团一面

五、CSS 布局

1. Flex 布局 + 属性

来源：字节 TikTok、阿里、海康威视、百度暑期

• 字节 TikTok 追问：flex 布局完成左右两栏的效果（现场撕）

2. 盒模型 / position / 三栏布局 / BFC

来源：快手前端实习、小红书二面、字节抖音二面

• 小红书追问：BFC 应用场景 / 浮动 / margin 重叠
• 字节抖音二面追问：z-index 设置为无限大还是被覆盖了怎么办

3. 移动端适配（rem / em / vw / vh / rpx）

来源：字节 TikTok、阿里、快手前端实习、字节番茄三面、腾讯前端实习

• 字节 TikTok 追问：rem 的值应该设置为多少

4. CSS 选择器 / 优先级

来源：海康威视、百度暑期

5. 水平垂直居中实现方式

来源：海康威视

6. HTML 语义化标签

来源：百度 3.17、百度暑期

7. 预处理器（Sass/Less）

来源：腾讯前端实习、腾讯 ai 凉经

六、性能优化

1. 首屏 / 白屏优化 / SPA 优化方向

来源：腾讯前端一面、字节前端、京东日常二面、字节 TikTok、字节抖音二面、字节前端一面、美团一面

• 京东日常追问：页面加载时间长怎么排查（主线程阻塞 / 资源体积 / 第三方脚本）

2. 虚拟列表 / 虚拟滚动（高频）

来源：百度 3.17、小红书一二面、京东暑期、字节抖音二面、腾讯 ai 凉经、哈啰

• 百度 3.17 追问：怎么保证虚拟列表滚动不出现问题？怎么计算滚动多少 px 应该渲染哪些元素？
• 字节抖音二面追问：虚拟滚动上线后怎么监控按预期实现？
• 哈啰追问：不定高虚拟列表怎么实现？

3. 性能指标（FP/FCP/LCP/INP/CLS）

来源：腾讯前端一面、字节前端一面、哈啰

• 腾讯前端一面追问：以上性能指标中你认为哪一个最重要？为什么？
• 字节前端一面追问：LCP 是怎么算的？具体 LCP 数值是多少？

4. 图片懒加载 / IntersectionObserver

来源：京东日常二面、快手电商、腾讯前端实习

• 快手电商追问：用 IntersectionObserver 替代监听滚动，为什么？

5. SEO / GEO（AI 时代新增方向）

来源：字节番茄二面

• 追问：SEO 怎么做？怎么评估 SEO？AI 时代 GEO 是怎么做的？大模型投毒原理？

七、工程化

1. Webpack vs Vite（高频★）

来源：百度 3.17、小红书一二面、美团财务、美团日常、哈啰、字节抖音二面、字节前端一面、京东暑期、厦门

• 小红书追问：Tree-shaking 的执行原理是什么？
• 美团日常追问：Vite 插件执行时间过长如何优化？
• 京东暑期追问：Webpack 5 模块联邦是什么？

2. Monorepo / 微前端（CSS / JS 沙箱 + 通信）

来源：腾讯前端一面、阿里电话面、字节前端一面、哈啰

• 腾讯追问：AI 模块在 Monorepo 里放哪里？

3. pnpm vs npm（为什么 pnpm 快）

来源：百度 3.17

4. SSR / ISR / 离线包

来源：bilibili、腾讯提前批、字节前端

• 腾讯提前批追问：在 app 上打开一个 http 地址会有什么问题？离线包除了快还有什么优势？跨端架构里 webview 加载离线包的调用链？

5. Git rebase vs merge / 冲突解决

来源：字节前端二面、小红书二面

• 字节追问：为什么 rebase 危险？多次 commit 如何合并？
• 小红书追问：rebase --abort

6. WebAssembly

来源：京东暑期

7. Taro / 跨端 / 小程序与 H5 交互

来源：京东暑期、腾讯前端实习

8. AI Coding 工程化 / Rules / Skills

来源：京东暑期、字节前端一面、快手电商、腾讯提前批二/三面

• 字节追问：AI 生成代码和项目规范冲突时怎么约束？大项目 token 爆炸怎么处理？
• 腾讯提前批追问：团队会不会用 rules / skills 沉淀，为了解决什么问题？

八、TypeScript

1. type vs interface

来源：字节抖音二面

• 追问：项目中 type 和 interface 怎么选择

2. any vs unknown / 泛型

来源：京东暑期、京东日常二面、字节番茄二面、腾讯提前批

• 字节番茄二面追问：TS 怎么删除接口的某个属性？如何理解 TS 中的泛型？哪些使用场景？

3. TS 工具类型（Pick / Omit / Partial / Required / Readonly / Record）

来源：字节前端

九、手撕算法（按出现频次排）

单次但值得看：拼手气红包、抽奖权重随机、扁平数组↔嵌套数组、版本号排序、100层楼2玻璃球、累加数字符串判断、AI辅助搭建登录注册页面、自己实现 Markdown 实时渲染编辑器、数组合并去重排序

十、项目 & 场景题（决定能不能过）

1. 双 Token 无感刷新 + 请求队列分页错乱

来源：字节 TikTok、腾讯前端一面、字节番茄一面、字节抖音二面、字节前端一面

• 腾讯前端一面追问：双 token 无感刷新下分页请求出错，怎么解决（access_token 过期，分页错乱出现两页数据）
• 字节番茄追问：refresh_token 不也会泄漏吗

2. 大文件分片上传

来源：字节抖音二面、字节前端一面

3. AI 对话上下文 / 长上下文管理 / 上下文摘要压缩

来源：腾讯前端一面、字节抖音二面、AI 应用开发实习、腾讯前端实习

• 字节抖音二面追问：上下文过长导致语义偏移，工程上怎么优化？上下文摘要压缩策略？

4. Markdown 安全渲染 + 防 XSS

来源：字节抖音二面、字节前端一面、字节番茄一面

• 字节番茄追问：自己实现 Markdown 实时渲染编辑器

5. 拖拽 / 静态分析 / AST

来源：百度暑期一面、字节 TikTok、快手电商

• 字节 TikTok 追问：拖拽用了什么 API？第三方库选型？
• 快手电商追问：AST 静态分析生成文档让 AI 理解上下文

6. 埋点 SDK / 性能监控

来源：腾讯前端一面

7. 海报生成（Canvas）/ 截图

来源：腾讯前端实习

8. SDD（Spec-Driven Development）/ AI rules / skills

来源：腾讯 WXG、百度 3.17、腾讯提前批、快手电商

十一、AI / Agent（2026 年面经新增方向★）

几乎每场前端面试都会问到 AI 相关问题，不再只是后端/算法岗的事。

1. SSE / 流式输出 / 断线重连

来源：见第四章网络段，8+ 次出现，必问

2. RAG（检索增强生成）

来源：bilibili、滴滴 agent、AI 应用开发实习、每日八股、拓竹

• bilibili 追问：RAG 中怎么计算 chunk 相似度？RAG 效果不好怎么优化？AI 胡言乱语怎么办？
• AI 应用开发追问：HyDE 是什么？用户模糊意图重写？跟 RAG 不是反了吗？
• 每日八股追问：嵌入模型 / 切分策略 / 重叠步长 / 会话长记忆实现

3. Agent / ReAct / MCP / Skills / 工具调用

来源：字节暑期一面、滴滴 agent、腾讯 WXG

• 字节追问：ReAct vs workflow 核心差异？MCP 与 A2A 的区别？MCP 协议内部是什么样？
• 滴滴追问：MCP 是什么？MCP 和 skills 的区别？模型怎么知道有这个工具的？agent 编排范式？

4. AI 编码工具使用 + 项目里 AI 占比

来源：几乎每场必问

常见问题：用过什么 AI 工具？AI 生成代码占比多少？哪些代码用 AI 生成比较合适？

5. Vibe Coding / Spec Coding

来源：美团暑期二面、字节前端一面、快手电商

• 美团追问：vibe coding 一般流程？中途错了怎么改正？引到 spec coding

6. AI 对话设计 / 多轮对话 / 图片 vs 文字差异 / 意图偏移

来源：字节抖音二面、字节前端一面