🧠 面试话题脑暴总览

面试官卡壳找不到话题时,从这里挑一个主动抛出
覆盖 前端 / 安全 / 后端 / 数据库 / 性能 / 部署 / 生产事故 / 三方库 / AI / 架构 全方向
12 个领域 · 120+ 话题 · 每个带"一句话钩子"
12
领域
120+
可聊话题
40+
真实踩坑
30+
高频原理题
怎么用 面试官问"聊聊你印象深刻的问题/你了解的XX"时,不要干等。从这里挑一个你有把握的话题,用「钩子话术」主动引出。
每个话题都标注了类型: 🔥高频(必问)、💎深问(能体现深度)、🐛踩坑(有真实故事)、⚡原理(八股但重要)。
策略: 先抛踩坑故事(有真实感),再带出原理(有深度),最后方案(有结论)。
⚡前端核心原理
八股但面试官爱问,答得深能体现功底。卡壳时主动说"我对事件循环/闭包有实践理解"。
事件循环 / 微任务宏任务 🔥高频
钩子:「我遇到过 Promise 链顺序不符合预期,排查发现是微任务穿插问题」
闭包与内存泄漏 🔥🐛
钩子:「大屏 7×24 跑内存涨,定位是闭包持有大对象,GC 回收不掉」
原型链 / this 指向 🔥
钩子:「箭头函数继承外层 this,我在回调里踩过坑」
Promise / async-await 原理 ⚡原理
钩子:「async 本质是 Promise 语法糖,错误处理用 try-catch」
浏览器渲染全链路 💎
钩子:「从输入 URL 到页面渲染,我讲得清每个环节对应的优化点」
重排重绘 / 合成层 🔥
钩子:「动画用 transform 不用 top,触发合成层不重排」
JS 数据类型 / 类型判断 ⚡
钩子:「typeof null === object 是历史 bug,判断类型用 Object.toString」
深浅拷贝 / 循环引用 ⚡
钩子:「structuredClone 解决循环引用,JSON.parse 有局限」
🛡️前端安全
安全是区分"会写"和"专业"的分水岭,面试官常用来深挖。
XSS 攻击与防御 🔥高频
钩子:「LLM 输出我用 DOMPurify 清洗才敢 v-html」
CSRF 与 SameSite 🔥
钩子:「cookie 自动带请求,所以有 CSRF,SameSite=Lax 防御」
CSP 内容安全策略 💎
钩子:「我们项目配了 CSP 白名单,只允许加载自家 CDN」
越权 / 越权漏洞(IDOR) 🐛
钩子:「改 URL 的 userId 能看别人数据,后端必须校验归属」
token 存哪(localStorage vs cookie) 🔥
钩子:「localStorage 易 XSS,HttpOnly cookie 防但易 CSRF」
点击劫持(clickjacking) ⚡
钩子:「X-Frame-Options DENY 防止被 iframe 嵌套钓鱼」
第三方依赖供应链安全 💎
钩子:「npm 包被投毒过,我配了 npm audit + 锁版本」
⚛️Vue / React 框架
你的强项,简历都是 Vue,但要能聊原理和对比。
Vue3 响应式原理(Proxy vs defineProperty) 🔥高频
钩子:「Vue3 Proxy 递归 vs Vue2 defineProperty 一层,这是 shallowRef 坑的根源」
shallowRef / shallowReactive / markRaw 🐛🔥
钩子:「ECharts 实例用 ref 直接卡死,改 shallowRef 秒切」
虚拟 DOM / diff 算法 / key 作用 🔥
钩子:「列表 key 用 index 导致状态错乱,改用 id」
Vue2 vs Vue3 迁移踩坑 🐛
钩子:「半导体官网 Vue2→3,响应式/filters/事件总线全变了」
Composition API vs Options API ⚡
钩子:「逻辑复用从 mixin 改 composable,命名冲突没了」
Pinia vs Vuex ⚡
钩子:「Pinia 去 mutation 更简单,TS 支持好」
React Hooks 原理(useState 闭包陷阱) 💎
钩子:「useState 闭包拿到旧值,要 useEffect 或 useRef」
Vue vs React 选型对比 🔥
钩子:「Vue 模板编译优化 vs React JSX 运行时,各有取舍」
keep-alive 缓存 / 组件缓存策略 ⚡
钩子:「表单页 keep-alive 缓存输入,返回不丢」
自定义指令 / 插件开发 ⚡
钩子:「权限指令 v-permission、埋点指令,项目里封装过」
📦工程化与构建
体现你"不止写页面"的工程能力,中高级岗位必问。
Webpack vs Vite 原理对比 🔥高频
钩子:「Vite dev 用原生 ESM 不打包,启动秒级」
Webpack 优化(拆包/HMR/Loader/Plugin) 💎
钩子:「SplitChunks 把 vendor 拆出来,首屏降 40%」
Tree Shaking 原理 ⚡
钩子:「基于 ESM 静态分析,sideEffects:false 配合」
Babel / SWC 编译原理 💎
钩子:「ES6+ 转 ES5,polyfill 按需引入」
Monorepo(pnpm workspace) ⚡
钩子:「多包共享依赖,pnpm workspace 比 lerna 轻」
ESLint / Prettier 配置 ⚡
钩子:「用 no-restricted-imports 强制插件不耦合」
CI/CD 前端流水线 ⚡
钩子:「GitLab CI 自动构建部署,Lighthouse 分数卡控」
微前端(qiankun / micro-app) 💎
钩子:「我们没用微前端,因为同团队用插件化更合适」
🚀性能优化
所有岗位必问,有量化数据最加分。
首屏优化方法论 🔥高频
钩子:「小程序 3.2s→1.1s,关键请求并行省 1s」
虚拟滚动 / 虚拟树 🐛
钩子:「3 万行表格白屏,虚拟滚动只渲染 20 行」
图片优化(WebP/懒加载/CDN) ⚡
钩子:「IntersectionObserver 懒加载,首屏图片省 80%」
Web Worker 大计算 💎
钩子:「文档 diff 算法放 Worker,不卡主线程」
Core Web Vitals(LCP/CLS/INP) 🔥
钩子:「LCP < 2.5s,CLS < 0.1,Google 排名指标」
防抖节流 / requestAnimationFrame ⚡
钩子:「搜索输入 debounce 300ms,滚动节流 rAF」
内存泄漏排查(Chrome Memory) 🐛
钩子:「Heap Snapshot 对比,Detached DOM 持续涨」
长列表 / 大数据渲染 ⚡
钩子:「Time Slicing 分片渲染,requestIdleCallback」
🧩复杂业务组件
简历最有料的板块,坑多能体现深度。
富文本编辑器(TipTap/ProseMirror) 🐛🔥
钩子:「表格嵌套 + ContentEditable 浏览器差异,排查一周」
流程图设计器(jsPlumb) 🐛
钩子:「画布缩放后坐标要除以 scale,这个坑踩了好久」
ECharts 大屏深度定制 🐛
钩子:「14 个图表 ref 劫持卡死,shallowRef 解决」
ag-grid / vxe-table 万行表 💎
钩子:「固定列+虚拟滚动错位,startIndex 不同步」
拖拽排序(跨层级/嵌套) 💎
钩子:「树形拖拽要防环 DFS,子孙 path 全更新」
表单引擎 / 动态表单 ⚡
钩子:「留资表单按地区配置驱动渲染,加字段零代码」
文档 diff 可视化 💎
钩子:「Myers diff 两层比对,效率提升 70%」
🌐网络与 HTTP
基础八股,但能聊出"为什么"和"坑"就不一样。
HTTP/1.1 vs HTTP/2 vs HTTP/3 🔥
钩子:「HTTP/2 多路复用解决队头阻塞,HTTP/3 用 QUIC」
HTTPS / TLS 握手 ⚡
钩子:「非对称加密协商对称密钥,后续用对称加密快」
跨域 / CORS / 代理 🔥高频
钩子:「开发用 Vite proxy,生产用 Nginx 反代」
缓存策略(强缓存 / 协商缓存) 🔥
钩子:「Cache-Control + ETag,二次访问秒开」
WebSocket / SSE / 轮询选型 ⚡
钩子:「LLM 用 SSE(EventSource 不带 token),大屏用 WS」
TCP 三次握手 / 四次挥手 ⚡
钩子:「为什么三次不是两次?防止历史连接复活」
CDN 原理 / DNS 解析 ⚡
钩子:「dns-prefetch + preconnect 提前建连接」
📚三方前端库(源码/原理)
能聊三方库原理,体现你"会读源码"。
axios 拦截器原理 ⚡
钩子:「拦截器是 Promise 链拼接,请求/响应各一个数组」
lodash 防抖节流实现 ⚡
钩子:「debounce clearTimeout,throttle 记上次时间戳」
day.js vs moment.js ⚡
钩子:「moment 体积大不可变,dayjs 轻量插件化」
Tailwind / UnoCSS 原理 💎
钩子:「原子化 CSS + purge 删未使用,体积小」
Vue Router 原理(hash/history) ⚡
钩子:「history 模式 404 要服务端 fallback 到 index」
ECharts 架构(ZRender) 💎
钩子:「ECharts 底层 ZRender 是 Canvas/SVG 抽象层」
Monaco Editor / CodeMirror ⚡
钩子:「VSCode 同款,大型编辑器要 worker 高亮」
☕Java 后端
你的全栈能力,能聊并发/JVM/Spring 体现深度。
线程池(7 参数/拒绝策略) 🔥高频
钩子:「核心/最大线程/队列/拒绝策略,生产别用 Executors」
synchronized vs ReentrantLock 🔥
钩子:「synchronized 锁升级,Lock 可中断可超时」
volatile / happens-before ⚡
钩子:「volatile 保证可见性 + 禁止重排序」
ThreadLocal 原理与内存泄漏 🐛
钩子:「线程池复用 ThreadLocal 不清理会串数据」
JVM 内存模型 / GC 🔥
钩子:「堆/栈/方法区,G1 分代+分区」
OOM 排查(jmap/jstack/MAT) 🐛
钩子:「堆 dump 用 MAT 分析支配树,找大对象」
Spring IOC / AOP 原理 🔥
钩子:「AOP 用动态代理,JDK 接口 / CGLIB 类」
Spring Bean 生命周期 💎
钩子:「实例化→属性→初始化→使用→销毁,循环依赖三级缓存」
Spring Boot 自动配置 ⚡
钩子:「@SpringBootApplication 注解扫 starter」
MyBatis 延迟加载 / 一二级缓存 ⚡
钩子:「一级缓存 Session 级,二级缓存跨 Session」
💾数据库(MySQL / Redis)
后端面试核心,全栈也要懂,索引/锁/缓存必问。
MySQL 索引(B+树/联合索引/最左前缀) 🔥高频
钩子:「B+树叶子链表,范围查询快;联合索引最左前缀」
EXPLAIN 看执行计划 🐛
钩子:「type=ALL 全表扫描,加索引变 ref」
事务隔离级别 / MVCC 🔥
钩子:「RR 防幻读用间隙锁,MVCC 快照读」
行锁 / 间隙锁 / 死锁 🐛
钩子:「死锁排查 SHOW ENGINE INNODB STATUS」
慢查询优化 🐛
钩子:「覆盖索引避免回表,大分页用游标」
Redis 5 大数据结构 🔥
钩子:「String/Hash/List/Set/ZSet,场景对应」
缓存穿透/击穿/雪崩 🔥高频
钩子:「穿透布隆过滤器,击穿互斥锁,雪崩过期时间加随机」
缓存一致性(双删/延迟双删) 💎
钩子:「先删缓存再更新库,延迟双删兜底」
Redis 持久化(RDB/AOF) ⚡
钩子:「RDB 快照快可能丢,AOF 日志全但大」
分布式锁(Redisson/Redlock) 💎
钩子:「SET NX + 过期,Redlock 跨节点」
🐳部署 / DevOps
全栈能力证明,简历有"独立部署"。
Docker / Dockerfile / compose 🔥高频
钩子:「多阶段构建减小镜像,compose 编排前后端+DB」
Nginx 反代/负载均衡/gzip 🔥
钩子:「try_files 解决 history 404,upstream 负载」
Linux 排查命令(top/netstat/grep) 🐛
钩子:「线上 CPU 高,top + jstack 找占用线程」
CI/CD(GitLab CI / Jenkins) ⚡
钩子:「push 自动构建推送镜像,滚动更新」
Kubernetes 基础(Pod/Service/Ingress) 💎
钩子:「Pod 最小单元,Service 服务发现,Ingress 入口」
前端部署方案(OSS/CDN/灰度) ⚡
钩子:「静态资源上 OSS,HTML 不缓存,灰度按 IP」
🚨生产排查 / 线上事故
最能体现真实经验,有故事的面试官最爱听。
CPU 飙高排查(top + jstack) 🐛🔥
钩子:「top 找进程,top -H 找线程,jstack 看在干嘛」
OOM 内存溢出排查 🐛
钩子:「jmap dump 堆,MAT 分析支配树找大对象」
接口慢 / 超时排查 🐛
钩子:「APM 看链路,定位是 DB 还是下游服务」
数据库死锁排查 🐛
钩子:「SHOW ENGINE INNODB STATUS 看死锁日志」
前端白屏排查 🐛
钩子:「Sentry 收 JS 错误,90% 是某依赖加载失败」
内存泄漏(大屏长跑) 🐛
钩子:「7×24 跑内存涨,定时器未清+图表未 dispose」
WebSocket 半开连接 🐛
钩子:「大屏半夜"死"了,NAT 静默断连,心跳检测」
发布回滚 / 灰度发布 ⚡
钩子:「蓝绿/金丝雀发布,出问题秒回滚」
限流 / 熔断 / 降级 💎
钩子:「秒杀用令牌桶限流,Sentinel 熔断保护」
🤖AI 应用开发
2025-2026 最热方向,你的简历亮点,讲深很出彩。
LLM 流式渲染(SSE/fetch stream) 🔥🐛
钩子:「EventSource 不带 token,用 fetch ReadableStream」
流式 Markdown 解析 🐛
钩子:「代码块 ``` 未闭合解析崩,buffer 补全」
Text2SQL 前端 💎
钩子:「SQL 要拦截 DROP/DELETE,意图确认防误删」
RAG 检索 + 引用展示 ⚡
钩子:「回答标注来源 [1],可点击溯源防幻觉」
Agent / Function Calling 💎
钩子:「LLM 决定调哪个函数,工具循环执行」
上下文管理 / Token 溢出 ⚡
钩子:「滑动窗口 + 摘要压缩,tiktoken 前端估算」
向量数据库(Milvus/Pinecone) ⚡
钩子:「向量相似度检索,KNN/ANN 算法」
Prompt 工程 ⚡
钩子:「Few-shot + CoT 思维链,结构化输出」
🏛️架构与设计模式
高级前端/负责人岗位必问,体现全局视野。
设计模式(单例/观察者/命令/策略) 🔥
钩子:「流程设计器撤销重做用命令模式,真实落地」
SOLID 原则 ⚡
钩子:「开闭原则,加功能不改老代码」
前端架构分层(core/shared/plugins) 💎
钩子:「三层架构 + ESLint 强制插件不耦合」
组件库设计 / 组件规范 ⚡
钩子:「目录约定 + 脚手架脚本 + Code Review」
状态管理设计 ⚡
钩子:「全局 vs 局部状态,何时该用 store」
系统设计题(短链/秒杀/Feed) 💎
钩子:「秒杀:限流+缓存+异步+削峰」
技术选型方法论 ⚡
钩子:「选型看:团队能力/规模/生态/成本」
面试话题脑暴总览 — 12 领域 120+ 话题
面试官卡壳时,从这里挑一个主动抛出 · 配合各专题深度文档使用

← 返回专题首页