📚 2026前端面试题汇总导读文（已整理）

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

  • 文章总数：86篇（⬆️新增28篇）
  • 平均质量分：94
  • 关注数：31（⬆️+11）
  • 总阅读量：65,780+（⬆️）
  • 总收藏量：1,103+（⬆️）
  • 作者：木斯佳（华为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、技术选型、重排链表
  • 美团前端暑期实习一面（2026-06-08） - useEffect/useLayoutEffect🔴、React组件通信、useState同步异步、this指向🔴、缓存机制🔴、URL加载全流程🔴、性能指标🔴（FCP）、Promise方法🔴、CSS position/rem/em/vw、字符串第一个不重复字符（新增）

京东

  • 京东零售JDY前端一面（2026-04-14） - 虚拟列表🔴、上下文压缩、本地持久化（LRU）、流式响应vs非流式、大模型中断处理、Vue3 vs Vue2、大文件分片上传、秒传、设计模式、排序算法、Transformer原理、MCP/Skill原理
  • 京东前端实习一面（2026-04-16） - JS基本数据类型🔴、Vue2/Vue3区别🔴、响应式原理🔴、网络层封装、登录流程、token机制、高内聚低耦合、TS元组、useState数组解构、localStorage/IndexedDB、Pinia、JS class私有属性、箭头函数🔴（新增）

携程

  • 携程前端一面（2026-04-17） - BFC🔴、flex布局🔴、数组遍历+乱序、重排重绘🔴、闭包🔴、事件循环🔴、React合成事件、agent/MCP/Skills、上下文膨胀（新增）
  • 携程前端暑期实习一面（2026-05-14） - 原型链🔴、ES6/ES7特性、TypeScript使用、Vue2/Vue3🔴、components/utils/hooks划分、Webpack/Vite、Tree Shaking🔴、ESM/CJS、sass/less、Node中间件、洋葱模型、性能优化🔴、chunk命名、AI coding（新增）

百度

TME QQ音乐

  • TME QQ音乐前端二面（2026-04-22） - 虚拟列表🔴、大文件分片上传🔴、MD5计算优化、Web Worker🔴、秒传设计、跨页面通信🔴（LocalStorage轮询/postMessage/Service Worker）、图片加载状态、Vite vs Webpack🔴、Vite HMR、SSE/WebSocket🔴（新增）
  • TME QQ音乐前端暑期三面（2026-04-24） - 虚拟列表🔴、大文件分片上传🔴、WebAssembly🔴、快速排序、Web持久化机制、TCP/UDP🔴、HTTP/1.1/2/3🔴、动画实现方式、Canvas、Web性能指标🔴（新增）

海底捞（新增）

  • 海底捞前端二面（2026-06-15） - AI Agent开发、LangChain、RabbitMQ任务队列、任务优化（30min→5min）、状态机设计、JSON Schema约束、LLM上下文窗口、指数退避重试、降级兜底、Celery分布式、消息积压排查、P95/P99监控、RAG技术、架构扩容、埋点系统结合（新增）

其他新增公司

  • 正泰电气前端实习一面（2026-04-19） - HTML5语义化🔴、SEO优化、TS防御性编程、interface/type区别、事件委托🔴、useEffect/useLayoutEffect🔴、React任务调度、瀑布流布局、长列表优化🔴、Web Worker🔴、WebAssembly、Zustand/Redux、全局异常捕获SDK（新增）
  • 来未来前端实习一面（2026-04-17） - 闭包🔴、JS基础类型、垃圾回收机制、事件循环🔴、Promise/setup执行顺序、Vue2/Vue3区别🔴、v-if/v-for优先级、watch/computed、ref/reactive、Promise原理、async/await、跨域🔴、POST/GET、HTTP缓存🔴（新增）
  • 秦丝科技前端（2026-04-24）·笔试深度解析 - box-sizing、空对象判断、类型转换、小数精度、字符串反转、闭包作用域🔴、文字截断样式、响应式布局、防抖函数🔴（新增）
  • 中科星图前端日常实习（2026-04-29） - Vue3组件通信🔴、前后端联调、CSS布局实战、AI协作能力、Flex/Grid基础（新增）
  • 上海威派格前端实习（2026-05-07） - Vue2/Vue3区别、Webpack/Vite、JS/TS差异、权限管理、防抖节流🔴、Git命令、路由守卫、包管理工具（新增）
  • 磐松私募-27届前端实习一面（2026-05-27） - rem/vh/vw、数组去重、闭包🔴、Webpack/Vite、Keepalive、npm/pnpm、async/await🔴、事件循环🔴、SSE/WebSocket🔴、SSE断线重连、JWT登录、token存储、大文件上传、路由懒加载、内存泄漏（新增）
  • 质谱华章前端一面（2026-05-14） - React理解🔴（虚拟DOM/Fiber/diff）、性能优化🔴、视频加载优化、LocalStorage/IndexDB、Tailwind、多端适配、aspect-ratio（新增）

影刀

蓝色光标

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

小迈科技

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

其他大厂

🤖 AI与新兴技术方向

🎓 实习与校招专场

🔍 专项深度解析

JavaScript核心

Vue/React框架

性能优化

📊 高频考点分类汇总

🔴 高频考点（出现3次以上，更新版）

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

一、HTML基础

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

二、JavaScript核心

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

三、CSS/浏览器

3.1 CSS基础
  • 盒子模型 🔴
  • 块元素、行内块、行内元素
  • image标签的display类型
  • CSS单位：EM/REM区别、VH/VW含义 🔴
  • CSS垂直居中实现方式 🔴
  • 0.5px边框实现（transform: scale(0.5)）
  • position属性值及用法 🔴
  • 绝对定位和浮动的区别
  • flex布局及flex:1含义 🔴
  • flex三个属性（flex-grow/flex-shrink/flex-basis）
  • flex布局完成从左到右的效果（新增）
  • grid布局
  • 三栏布局多种实现（含BFC）🔴
  • BFC能解决什么问题？🔴
  • 怎样可以产生一个BFC？
  • CSS布局问题：左边根据文字无限扩大，右边不扩大只缩小（flex:1 + flex:0）（新增）
  • 瀑布流布局实现（新增）
  • 伪元素的作用
  • CSS自定义变量的作用
  • margin重叠问题 🔴
  • transform是否触发重排？（不触发，走合成层）
  • position:absolute是否触发重排？
  • 设计响应式页面：左侧固定宽度，右侧铺满屏幕
  • 多端适配方案（媒体查询、flex/grid、vw/vh、aspect-ratio）（新增）
  • rem值应该设置为多少（除以10，阿里flexible方案）（新增）
  • Tailwind CSS使用（新增）
3.2 浏览器原理
  • 从输入URL到页面展示全过程 🔴
  • DNS解析缓存（最少四个层级）（新增）
  • 浏览器事件循环 🔴
  • 浏览器线程进程
  • 浏览器不同tab通信方式（LocalStorage轮询、postMessage、Service Worker）🔴
  • 回流重绘原理及优化 🔴
  • 如何确定卡顿是重排重绘引起？怎么定位优化？（新增）
  • 浏览器从渲染树到显示的完整阶段
  • 为什么光栅化要由GPU去做
  • 强缓存与协商缓存 🔴
  • 304状态码含义（新增）
  • display/visibility对重排重绘的影响
  • localStorage存满解决方案（LRU、IndexedDB）
  • sessionStorage刷新后是否存在
  • XSS攻击是什么？如何防御？（新增）
  • CSRF攻击是什么？（新增）
  • 埋点的意义、前端埋点SDK实现、Web性能指标（FP/FCP/LCP/INP/CLS）🔴
  • 同源策略（新增）
3.3 性能优化
  • FCP优化方法 🔴
  • 电商项目中FCP从3.3s优化到1.8s的具体方案（新增）
  • 列举优化CSS减少首屏加载时间的方法
  • 图片懒加载实现及兼容方案 🔴
  • 长列表图片延迟加载+防抖优化（新增）
  • 虚拟列表实现原理 🔴
  • 虚拟列表性能问题如何发现和排查？
  • 前缀高度表+二分查找在虚拟列表中的作用
  • 虚拟列表+动态高度计算（新增）
  • 如何评判网页性能是否合格？（LCP、FID、CLS等Web Vitals）🔴
  • FCP如何计算、如何采集统计（新增）
  • 首屏优化策略 🔴
  • SPA应用白屏优化
  • CDN详细说明（新增）
  • 大文件上传优化
  • 大图加载优化（新增）
  • 内存泄漏排查
  • JS长任务优化
  • 代码分割、请求合并、数据缓存
  • React组件性能分析与优化

四、框架（Vue/React）

4.1 Vue
  • Vue2和Vue3响应式原理深度对比 🔴
  • Vue2/Vue3各自优缺点（新增）
  • 什么时候用Vue2，什么时候用Vue3（新增）
  • 为什么Vue3还要进行重写？
  • 为什么 ref 需要 .value，而 reactive 不需要？
  • 如何处理 reactive 复杂对象重新赋值？
  • Vue3 中 Proxy 的核心缺陷？
  • Proxy相对Object.defineProperty的优点、Proxy的局限性
  • Vue2和Vue3虚拟DOM区别
  • Vue组件通信方式 🔴
  • 兄弟组件通信的前提
  • Vue Router路由守卫
  • Vuex和Pinia区别
  • 为什么选择Pinia进行状态管理（新增）
  • Vue3组合式API vs Vue2 options API
  • Vue生命周期有哪些？为什么要设计这些生命周期？（新增）
  • Vue有哪些指令（v-if/v-show/v-for/v-bind/v-on/v-model等）
  • v-if和v-for优先级区别及调整原因（Vue2中v-for更高，Vue3中v-if更高）（新增）
  • Vue计算属性的原理（新增）
  • watch怎么实现的（新增）
  • watch和computed的区别（新增）
  • Promise和setup哪个先执行（setup先执行）（新增）
  • Vue diff算法及key的作用 🔴
  • Vue中key的作用详解
  • v-if vs v-show 选型场景
  • keep-alive的作用与原理
  • nextTick的作用
  • Vue白屏问题及解决
  • components、utils、hooks的区别与划分依据（新增）
4.2 React
  • React框架理解 🔴
  • React的优缺点（虚拟DOM、Fiber、diff、JSX、生态）（新增）
  • React vs Vue区别 🔴
  • Reconciler如何遍历fiber树
  • DOM树和fiber树的区别
  • React时间分片
  • React为什么用Message Channel调度
  • React Fiber架构及原理 🔴
  • React合成事件 🔴
  • React事件委托（16之后的变化）（新增）
  • React组件内onClick与document.addEventListener谁先触发？（新增）
  • React Hooks常用API 🔴
  • useEffect与useLayoutEffect区别 🔴（新增）
  • useEffect执行时机、依赖数组、清理函数、内存泄漏（新增）
  • useState是同步还是异步执行（新增）
  • React Hooks链表结构设计原因（新增）
  • 为什么Hook不能写到条件语句（新增）
  • React任务调度与优先级（新增）
  • React响应式理解
  • 高阶组件（HOC）
  • Redux有什么特别的地方
  • Zustand与Redux区别（新增）
  • React单标签原理（JSX要求单一根元素，或使用Fragment）
  • React性能优化策略 🔴
  • useState特性和优势
  • setState执行机制
  • useRef和useState区别
  • 受控组件和非受控组件
  • 可复用表单组件设计
  • JavaScript是不是单线程的语言

五、工程化与构建工具

  • Webpack 与 Vite 的核心区别 🔴
  • Vite为什么比Webpack快（开发环境ESM按需编译、HMR实现）（新增）
  • Webpack能否配置成使用ES Module（新增）
  • Vite打包用的什么（Rollup）
  • Vite HMR实现原理（新增）
  • ESM和CJS区别 🔴
  • ESM和CJS在Tree Shaking上的差异（新增）
  • Tree-shaking 的执行原理 🔴
  • Tree Shaking在CJS有什么限制（新增）
  • Tree Shaking在哪个阶段进行（新增）
  • Webpack构建流程
  • Webpack loader和plugin的区别
  • 代码分割思路
  • 按需加载（新增）
  • chunk命名含义（新增）
  • 模块联邦架构
  • 微前端隔离及通信
  • Monorepo架构实现（底层逻辑架构、大仓与单层单体对比）（新增）
  • Monorepo和微前端是不是同一个东西？区别是什么？（新增）
  • 业界主流大仓、模块化工程方案（新增）
  • 微前端解决什么痛点、适用场景与优缺点、常见框架（新增）
  • TypeScript泛型 🔴
  • TypeScript高级类型（Record、Partial、Pick）
  • TypeScript interface与type区别（新增）
  • TS元组特点（新增）
  • TS防御性编程（新增）
  • 如何获取函数入参类型（Parameters）（新增）
  • TypeScript枚举本质上是什么
  • WebWorker使用 🔴
  • WebAssembly了解 🔴
  • SDD、spec coding
  • AGENTS.md与README区别
  • 如何让AI遵守项目规范
  • SDD+TDD开发新组件的完整流程（新增）
  • Story文档覆盖度保障（新增）
  • 组件文档Skills、MCP、llm.txt三者的关系（新增）
  • MCP怎么解决组件库版本号问题（新增）
  • 项目中的静态资源处理方式
  • 项目中的图片压缩方法
  • ES6向ES5转换（Babel原理）
  • 技术选型
  • sass、less、tailwind css区别（新增）
  • npm、pnpm区别（新增）
  • Node中间件、洋葱模型（新增）

六、网络与通信

  • HTTP1.1和HTTP2.0区别 🔴
  • HTTP/1, HTTP/1.1, HTTP/2, HTTP/3的演进与优化目标🔴
  • HTTP2多路复用底层原理（如何在一条链路中区分不同请求的数据包）（新增）
  • HTTP2头部压缩（新增）
  • HTTP/3核心特性（QUIC协议，基于UDP）
  • QUIC协议优势
  • TCP和UDP区别 🔴
  • UDP如何保证可靠通讯
  • TCP可靠传输实现
  • TCP三次握手四次挥手
  • HTTP请求流程 🔴
  • ajax底层原理
  • HTTP请求报文Content-Type常见字段
  • 纯手写HTTP服务器
  • HTTPS优势 🔴
  • HTTPS实现原理（非对称加密+对称加密结合）
  • TLS证书能劫持HTTPS通信吗
  • 跨域原因及解决方案 🔴
  • 强缓存 vs 协商缓存 🔴
  • 强缓存与协商缓存配置的HTTP字段（新增）
  • 如何在浏览器查看资源是否命中缓存（新增）
  • 缓存过期机制
  • SSE vs WebSocket深度对比 🔴
  • SSE vs Axios在HTTP上的区别
  • SSE vs 长短轮询（新增）
  • SSE数据格式
  • SSE连接机制与断线重连
  • SSE中断和取消怎么做的（新增）
  • SSE断掉后如何保证继续
  • SSE渲染性能优化（新增）
  • WebSocket心跳包字段设计 🔴
  • WebSocket重连逻辑会执行几次
  • WebSocket连接不稳定问题处理
  • 撤回功能：HTTP还是WebSocket？
  • WebSocket全双工通信实现
  • 码率自适应调整实现
  • 中止fetch请求的设计（AbortController）
  • 请求缓存（SWR）的应用场景
  • RAG（检索增强生成）🔴
  • 向量数据库
  • 前端AI实时补全实现
  • AI sandbox的作用
  • 上下文摘要压缩机制的实现思路（新增）
  • 本地持久化机制实现（LRU存储结构、删除逻辑）
  • 流式响应与非流式响应的区别
  • 大模型返回中断处理（断点续传/重连）
  • 批量请求与缓存策略（新增）
  • Cookie属性（SameSite、HttpOnly等）（新增）
  • JS可以获取Cookie吗（新增）
  • Cookie有效期后端如何使其无效（新增）
  • 跨页面通信方案（LocalStorage轮询、postMessage、Service Worker）🔴（新增）
  • LocalStorage实现页面间心跳检测（新增）

七、AI工程化与Prompt工程

  • Prompt Engineering理解 🔴
  • Prompt设计原则与结构化方法（新增）
  • 如何优化Prompt Engineering以减少Token消耗
  • 向量数据库切片策略（切片大小设计、语义切分vs token切分）（新增）
  • 大模型上下文长度与压缩技术（新增）
  • Prompt Injection攻击防范
  • Function Calling原理
  • AI组件库设计（AIUIKit）
  • AI内容持久化与多端同步
  • 向量数据库在前端的应用
  • AI场景性能监控指标
  • AI接口重试机制设计
  • AI取代程序员观点
  • llm运行过程了解
  • 国际化翻译缓存优化
  • MCP和Skill的原理 🔴
  • Skills、MCP、CLI三者区别与优缺点（新增）
  • ReAct模式（AI代理推理-行动循环）（新增）
  • 状态机在AI场景的应用（语音输入等）（新增）
  • Transformer原理了解
  • agent范式有哪些、差别、应用场景（新增）
  • 驱动工程（Agent工程）（新增）
  • 上下文工程（新增）
  • 多agent/team模式（新增）
  • 限速工程（新增）
  • Harness Engineering理解（新增）
  • LangChain在AI Agent中的核心作用（新增）
  • RabbitMQ等消息队列选型考量（新增）
  • 任务幂等性设计与实现（新增）
  • 指数退避重试机制（新增）
  • 大模型超时/宕机/响应异常的降级兜底逻辑（新增）
  • 消息积压、丢失的排查与解决（新增）
  • P95/P99分位值监控（新增）
  • AI Agent项目落地全流程（开发→测试→上线→运维）（新增）
  • RAG技术理解与融入AI Agent（新增）

八、项目实战与场景题

  • SDD+TDD开发新组件的完整流程（新增）
  • 组件文档Skills、MCP、llm.txt三者的关系（新增）
  • 逻辑层与UI层分离的具体实现（新增）
  • 工厂函数运行时性能损耗（新增）
  • 核心Hook入参在PC/移动端类型不同（MouseEvent vs TouchEvent）（新增）
  • 图片预览缩放拖拽手势实现（新增）
  • 预览50M大图片第一次加载慢优化（新增）
  • 财务系统高保密场景ImageViewer安全功能扩展（新增）
  • 页面模板系统SSO完整鉴权流程（新增）
  • 多个接口同时触发401，避免重复刷新token（新增）
  • iframe静默刷新token解决什么问题（新增）
  • Context失效的常见场景（新增）
  • 实习项目的架构是怎样的？
  • 项目的构建流程
  • 登录页面实现
  • 双Token实现+自动续期+无感刷新
  • 无感刷新下请求队列问题（分页错乱bug解决）
  • 用户认证实现
  • 权限设计
  • 复杂表单状态管理与校验
  • 实时文本编辑同步策略
  • i18n（国际化）怎么设计的？
  • 国际化+后端翻译缓存优化
  • SSR 和 ISR 的区别
  • 设计组件时如何考虑通用性和扩展性
  • 项目中树形目录编辑组件拖拉拽效果
  • 无限层级文件夹管理的懒加载
  • 抽奖圆盘实现
  • 文本收起展开效果
  • 可复用表单组件设计步骤
  • AI coding工具使用情况
  • 项目中的登录鉴权怎么做？
  • 项目完整的构建流程
  • 项目中的静态资源处理方式
  • 项目中的图片压缩方法
  • 公式编辑器测量和布局工作
  • 集中式错误处理
  • 秒传、断点续传的实现原理 🔴
  • 大文件分片上传（Blob.slice API）🔴
  • 大文件分片上传完整流程（新增）
  • 计算文件MD5耗时与优化方案（新增）
  • 服务端分片管理设计（避免空间浪费）（新增）
  • 秒传基于完整文件hash还是分片hash（新增）
  • 设计模式：单例模式、工厂模式、观察者模式 🔴
  • 排序算法：归并排序、快速排序、Top K
  • 数组与链表底层存储和缓存差异（新增）
  • 100人1个病毒、2张试纸最少检测次数（新增）
  • 项目难点亮点介绍
  • 实习收获与成长
  • 埋点实现（曝光埋点）
  • 语音转文字应用场景
  • 团队协作问题解决
  • 技术学习路径和方法
  • Git协作流程与冲突解决

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

  • 线程和进程的区别
  • 浏览器的线程进程有哪些
  • CPU和GPU区别
  • 从代码到程序运行过程
  • 静态链接
  • 内核态和用户态
  • 进程通信方式
  • 内存寻址
  • JS内存管理（新生代/老年代）
  • C++如何实现闭包
  • C函数调用栈处理
  • 汇编语言了解（RISC-V）

十、Next.js与服务端渲染

  • Next.js渲染模式
  • SSR/ISR/SSG对比
  • Next.js图片优化组件
  • WebP兼容及降级处理
  • WebP与PNG、JPG图片格式区别（新增）

十一、存储与缓存

  • localStorage、sessionStorage、cookie的区别 🔴
  • SessionStorage和LocalStorage的区别（新增）
  • localStorage存储上限4MB，存满解决方案（LRU、IndexedDB）
  • 什么时候用localStorage，什么时候用IndexedDB（新增）
  • IndexedDB特点（新增）
  • cookie过期时间设置
  • sessionStorage刷新后数据是否存在（存在）

📌 更新日志

  • 2026-03-16：创建导读文，收录全部34篇文章
  • 2026-03-20：新增Bilibili、小红书面经3篇，总数37篇
  • 2026-03-28：新增8篇文章，总数45篇；新增HTML基础、AI工程化两大板块
  • 2026-04-07：新增5篇文章，总数50篇
  • 2026-04-17：新增8篇文章，总数58篇；新增HTTP协议演进、WebSocket重连策略、性能指标详解等30+考点
  • 2026-06-18：新增28篇文章，总数86篇；新增TikTok、京东、携程、来未来、正泰电气、TME QQ音乐、腾讯PCG视频、腾讯企业微信、腾讯WXG、腾讯云智、百度Agent、美团、海底捞等20+公司面经；新增AI Agent全链路、ReAct模式、状态机、Monorepo/微前端、SDD+TDD、跨页面通信、数组vs链表底层、XSS/CSRF防御等50+考点；更新高频统计表

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

本次更新亮点：

  1. ✅ 新增28篇面经文章，总数达86篇
  2. ✅ 新增20+公司分类（TikTok、TME QQ音乐、腾讯PCG视频、腾讯企业微信、腾讯WXG、腾讯云智、百度Agent、美团、海底捞、携程、京东、正泰电气、来未来、中科星图、上海威派格、磐松私募、质谱华章等）
  3. ✅ 新增50+考点：AI Agent全链路（LangChain/RabbitMQ/状态机/指数退避/降级兜底）、ReAct模式、Monorepo/微前端、SDD+TDD、跨页面通信（LocalStorage轮询/postMessage/Service Worker）、数组vs链表底层存储、XSS/CSRF防御、HTTP2多路复用底层、FCP优化实战等
  4. ✅ 高频考点更新：事件循环22次、响应式原理17次、闭包16次、Promise相关14次、SSE/WebSocket13次
  5. ✅ 手写题新增：快速排序、最长递增子序列、版本号对比、第一个不重复字符、自定义Hook usePrev、addEventListener
# 前端 # 面试 # css # 算法
Logo
AtomGit开源社区

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

更多推荐

我们如何利用「混沌工程」工具Chaos Blade进行故障演练？

而Chaos Blade作为阿里巴巴开源的混沌工程实验工具，凭借其轻量级、易用性和丰富的故障场景支持，成为故障演练的利器。这种与K8s深度集成的能力，使得在微服务架构下进行服务熔断、节点宕机等演练变得异常简单，有效验证服务网格的容错机制。Chaos Blade支持创建复杂的演练场景。建议将演练结果与监控系统、日志平台的数据进行关联分析，找出系统的薄弱环节，持续优化架构设计。通过定期使用Chaos

avatar AtomGit开源社区

AI 辅助学术写作（五）：模块化论文撰写与开源交付——从草稿到可复现研究包

这两个部分放在最后写，因为它们是对全文的精炼，而不是提前预设的框架。请基于以下信息，撰写一个150-200字的学术摘要。【摘要必须包含的五个要素】1. 研究问题（一句话）：[你的核心研究问题]2. 研究方法（一句话）：[数据来源 + 识别策略]3. 核心发现（两句话）：[主要系数 + 经济含义]4. 异质性/机制（一句话）：[最重要的一个扩展发现]5. 政策含义（一句话）：[对政策制定的启示]【格

avatar AtomGit开源社区

DALI / UMAP / H5

这几个词通常出现在深度学习框架、数据处理库、AI训练平台或代码仓库的功能说明中，表示该系统支持相应的数据处理技术或文件格式。DALI 指的是 NVIDIA DALI（Data Loading Library）。它是 NVIDIA 开发的高性能数据加载与预处理框架，主要用于加速训练过程。例如 ImageNet 训练时，DALI 可以减少 CPU 成为瓶颈的问题。对于大规模视觉训练（ImageNet、

avatar AtomGit开源社区