21 · 以点带面 — 一个场景牵出一片技术

💡 怎么用「以点带面」

面试官问"你印象深刻的问题?"——别只讲一个孤立的坑。
挑一个场景,讲完根因后,顺势展开:"这个问题其实牵涉到 XXX、YYY、ZZZ...",把相关的知识点一个个带出来。

比如讲「大屏 ref 存图表卡死」,根因是响应式劫持 → 顺势聊 Vue2 defineProperty vs Vue3 Proxy → 响应式原理 → 性能优化 → 内存泄漏 → 7×24 监控……一个点,牵出整片前端体系。

下面 20 个场景,每个都画了知识辐射图,标出这个点能聊到的所有技术。面试前过一遍,你就有了"讲一个故事带一片技术"的能力。

1 大屏用 ref 存 ECharts 实例,切屏卡死 3 秒

前端性能

🎬 场景: 大屏 14 个图表,const chart = ref(echarts.init(dom)) 存实例,切换 Tab 页面卡 3 秒。改 shallowRef 后秒切。

🌊 能牵出的知识点(15+)

原理Vue3 Proxy 响应式

深度递归劫持每个属性,大对象性能差

原理Vue2 defineProperty

只遍历一层,Vue3 Proxy 递归,差异点

APIshallowRef / shallowReactive

只对 .value 响应式,不递归

APImarkRaw

标记对象永不响应式(对象层治本)

ECharts实例管理 Map

统一管理,避免重复 init,dispose 防 leak

EChartssetOption 增量更新

notMerge:false 只改数据不重绘

EChartslarge 模式 / Canvas

万级数据点批量绘制

性能IntersectionObserver 懒初始化

图表进可视区才 init

性能大数据降采样

超 500 点前端降采样,减少渲染

大屏scale 适配 4K

transform:scale 等比缩放,字体模糊处理

大屏大屏 7×24 内存泄漏

定时器/WebSocket/事件未清,凌晨 reload

排查Chrome Memory Heap Snapshot

对比快照找 Retained Size 大的对象

设计模式单例 / 工厂模式

ChartManager 统一创建销毁

架构响应式 vs 命令式

何时用响应式,何时脱离响应式手动管

延伸其他必须 shallowRef 的对象

地图实例/编辑器/WebSocket/大第三方对象

话术:「这个坑让我重新理解了 Vue 响应式 —— Proxy 是深度递归的,大对象会炸。后来凡是 new 出来的实例(图表/地图/编辑器)我都用 shallowRef。这也引出我对 Vue2 vs Vue3 响应式、性能优化、内存泄漏的整套理解。」

2 3 万行测评数据表格直接白屏,Chrome 无响应

前端性能

🎬 场景: 测评指标表 3 万行,普通渲染 Chrome 提示无响应。换 vxe-table 虚拟滚动,首屏 200ms。

🌊 能牵出的知识点(12+)

核心虚拟滚动原理

只渲染可视区+缓冲,占位 div 撑高

浏览器DOM 多为什么卡

Layout/Paint 同步阻塞主线程

浏览器渲染全链路

DOM→CSSOM→RenderTree→Layout→Paint

变高定高 vs 变高虚拟滚动

定高 O(1)除法,变高前缀和二分

坑固定列错位

两虚拟容器 startIndex 同步问题

选型ag-grid vs vxe-table

企业级收费 vs 国产开源

数据shallowRef 存大数组

3 万行全 reactive 也卡,浅响应

数据dirty 提交

只提交改过的行,Set 记录 changedIds

优化分页 vs 虚拟滚动取舍

列表分页,整体操作虚拟滚动

延伸虚拟树(el-tree-v2)

树扁平化+虚拟滚动,8000 节点

延伸Time Slicing

requestIdleCallback 分片渲染

延伸Web Worker 计算

排序/聚合放 Worker 不阻塞主线程

话术:「3 万行白屏让我搞懂了浏览器渲染 —— 不是数据慢,是 DOM 多导致 Layout 卡死。虚拟滚动只渲染可视区,DOM 从万级降到几十。这也带出我对渲染全链路、变高虚拟滚动、dirty 提交的理解。」

3 数据大屏白天正常,半夜数据"停"了

生产网络

🎬 场景: 早上发现大屏数据停在昨晚,WebSocket 没断开提示。根因:NAT 静默断连(半开连接),onclose 没触发。

🌊 能牵出的知识点(10+)

网络NAT / 防火墙静默断连

空闲连接被回收,但前端不感知

网络半开连接(half-open)

TCP 一端已断,另一端以为还连着

方案心跳机制

定时 ping,超时无 pong 判定死亡

方案指数退避重连

1s/2s/4s/8s,防雪崩,最多 N 次

WebSocket生命周期/readyState

connecting/open/closing/closed

对比WebSocket vs SSE vs 轮询

双向/单向/简单,各自场景

网络TCP keepalive

系统层心跳,应用层心跳更可靠

前端组件卸载清理

onBeforeUnmount 必 close,防泄漏

容错断线 UI 提示 + 自动恢复

"重连中"状态,降级用上次数据

延伸大屏 7×24 监控

每日凌晨 reload 兜底,行业标准

话术:「大屏半夜"死"了让我懂了 TCP 半开连接 —— NAT 静默断连,前端不感知。加心跳 + 指数退避重连解决。这也带出我对 WebSocket 生命周期、SSE 选型、组件清理、容错降级的理解。」

4 线上接口服务器 CPU 突然 100%

后端运维

🎬 场景: 接口 CPU 飙到 100%,top→top -H→jstack 三步定位,发现是正则回溯爆炸(用户输入特殊字符触发)。

🌊 能牵出的知识点(12+)

排查CPU 三步定位法

top 找进程→top -H 找线程→jstack 看栈

排查线程 ID 十六进制转换

jstack 的 nid 是十六进制

根因正则回溯爆炸

嵌套量词触发指数级回溯

根因死循环/死递归

栈溢出或空转烧 CPU

根因频繁 Full GC

jstat 看 GC,GC 线程占 CPU

JVMjstack 线程 dump

看线程状态 RUNNABLE/BLOCKED

JVMjstat GC 监控

看新生代/老年代/Full GC 频率

工具arthas(阿里)

在线诊断,thread/dashboard 命令

防御RE2 线性正则引擎

线性时间,不支持回溯引用

防御输入长度限制

限制正则输入规模

防御超时熔断

执行超时直接 fail

运维CPU 告警 + 限流

Prometheus 监控,Sentinel 限流

话术:「CPU 100% 三步定位法(top→top -H→jstack)让我能快速定位线上问题。这次是正则回溯爆炸,让我深入学了正则引擎原理、RE2、以及 CPU 排查的完整工具链。」

5 接口上线时快,跑几个月越来越慢

数据库后端

🎬 场景: 订单接口上线 100ms,半年后变成 3 秒。根因:数据量增长 + 没索引 + N+1 查询。

🌊 能牵出的知识点(13+)

排查APM 链路追踪

SkyWalking/Pinpoint 看耗时分布

SQL慢查询日志

long_query_time,定位慢 SQL

SQLEXPLAIN 执行计划

type/key/rows/Extra

索引B+ 树索引

叶子链表范围查询快,树矮 IO 少

索引联合索引最左前缀

(a,b,c) 必须从 a 开始

索引覆盖索引 / 回表

字段在索引里不用回表(Using index)

坑索引失效场景

函数/类型转换/左模糊/最左前缀

坑N+1 查询

循环里查 DB,改成 JOIN/批量

坑大分页 LIMIT

LIMIT 100万,10 扫前 100 万行

优化游标分页

WHERE id > last_id LIMIT 10

优化Redis 缓存

热点数据缓存,减轻 DB 压力

架构读写分离 / 分库分表

数据量大到单库扛不住

监控慢接口告警

RT 阈值告警,提前发现

话术:「接口越来越慢是典型的"温水煮青蛙"。我先用 APM 定位是 DB 慢,EXPLAIN 看全表扫描,加索引+修 N+1+游标分页解决。这一个场景带出我对 MySQL 索引、执行计划、分页、缓存、分库分表的整套理解。」

6 大屏 7×24 跑,内存阶梯式上涨

前端性能

🎬 场景: 大屏不间断运行,JS Heap 阶梯式涨。根因:ECharts 未 dispose + 定时器未 clear + 闭包持有大对象。

🌊 能牵出的知识点(11+)

原理GC 垃圾回收

标记清除,可达性分析,GC Root

原理闭包与引用

函数持有外层变量,GC 不回收

泄漏定时器未 clear

setInterval 回调持有外部变量

泄漏事件监听未 remove

addEventListener 没对应 remove

泄漏Detached DOM

DOM 从树移除但 JS 还引用

泄漏ECharts 未 dispose

Canvas 上下文堆积

排查Heap Snapshot 对比

录两个快照看 delta

排查Performance Monitor

实时看 JS Heap Size 曲线

兜底每日凌晨 reload

大屏行业标准,强行重置

监控Performance Observer

观察长任务,上报内存

JavaJVM 内存泄漏

类比:jmap+MAT 找大对象

话术:「7×24 内存涨让我系统学了 GC 原理和泄漏排查。前端泄漏源(定时器/监听/Detached DOM)和后端 JVM 泄漏(jmap+MAT)思路相通 —— 都是找"该回收没回收的对象"。这也体现我全栈的排查能力。」

7 报表导出触发线上 OOM,服务重启

后端JVM

🎬 场景: 用户导出 50 万行报表,一次性加载进内存,堆撑爆 OOM。jmap dump + MAT 定位 ArrayList 占 80%。

🌊 能牵出的知识点(12+)

JVM堆/栈/方法区

对象在堆,栈帧在栈,类信息元空间

JVMOOM 类型

heap space/Metaspace/Direct memory

排查jmap -dump

dump 堆快照(注意 STW)

排查MAT Dominator Tree

支配树看谁占内存最多

排查Leak Suspects

MAT 自动分析泄漏嫌疑

排查GC Root 引用链

找对象为什么没被回收

预防HeapDumpOnOutOfMemoryError

OOM 自动 dump,不用等出事

方案流式处理

游标/分批查,不全量加载

方案EasyExcel 流式写

SAX 解析,边读边写不占内存

方案异步导出 + 通知

大导出异步,完成发通知下载

GCG1/CMS 收集器

G1 分 Region 可预测停顿

JVMXms=Xmx 配置

避免动态扩容抖动

话术:「报表 OOM 让我深入学了 JVM 内存和排查工具链。jmap+MAT 定位大对象,改成流式处理解决。这也带出我对 GC、堆参数、OOM 类型的理解 —— 全栈必须懂后端 JVM。」

8 秒杀活动库存超卖(卖了 110 件只有 100 件)

后端并发

🎬 场景: 秒杀 100 件,卖出 110 件。根因:并发下"查库存-减库存"非原子,多个请求同时读到库存=1。

🌊 能牵出的知识点(13+)

并发竞态条件

读-改-写非原子,并发出错

方案数据库行锁

SELECT FOR UPDATE 悲观锁

方案乐观锁(版本号)

UPDATE...WHERE version=?,失败重试

方案Redis 原子扣减

DECR 原子操作,Lua 保证原子

方案Redis 分布式锁

SET NX,Redisson 看门狗

架构Redis 预减库存

库存预热到 Redis,DB 兜底

架构消息队列削峰

RabbitMQ/Kafka 异步下单

架构限流(令牌桶)

Sentinel/Nginx limit_req 挡洪峰

架构熔断降级

下游故障快速失败,保核心

前端按钮防抖 + 验证码

防重复提交,人机验证

前端库存实时显示

WebSocket 推送剩余库存

数据库唯一索引防重

user_id+activity 唯一索引

设计模式幂等设计

同一请求多次执行结果一致

话术:「秒杀超卖是经典并发问题,牵出锁(悲观/乐观/分布式)、Redis、消息队列、限流、幂等一整套高并发知识。从根因竞态条件到完整的高可用架构,这一个场景能聊半小时。」

9 订单接口偶发卡死,两个事务死锁

数据库并发

🎬 场景: 事务 A 先锁订单 1 再锁订单 2,事务 B 反过来,死锁。SHOW ENGINE INNODB STATUS 定位。

🌊 能牵出的知识点(10+)

原理死锁四条件

互斥/持有等待/不剥夺/循环等待

MySQL行锁/间隙锁/临键锁

Record/Gap/Next-Key Lock

MySQL共享锁 vs 排他锁

S 锁兼容,X 锁排他

排查SHOW ENGINE INNODB STATUS

看 LATEST DETECTED DEADLOCK

排查jstack 检测 Java 死锁

Found one Java-level deadlock

预防统一加锁顺序

所有事务按相同顺序锁资源

预防缩短事务

大事务拆小,减少持锁时间

预防降低隔离级别

RC 比 RR 间隙锁少

隔离事务隔离级别

RU/RC/RR/Serializable,MySQL 默认 RR

隔离MVCC 多版本并发

快照读不加锁,读写不冲突

Javasynchronized vs ReentrantLock

JVM 层 vs API 层,可中断

话术:「死锁让我系统学了锁理论 —— 四条件、MySQL 锁类型、Java 锁。排查 MySQL 用 SHOW ENGINE INNODB STATUS,Java 用 jstack。预防靠统一加锁顺序。这一个点能带出整个并发锁体系。」

10 小程序首屏 3.2 秒,用户流失

前端性能

🎬 场景: 小程序首屏 3.2s,优化到 1.1s。关键请求并行(-1s)+ 分包(-800ms)+ 图片懒加载(-400ms)。

🌊 能牵出的知识点(13+)

方法量化驱动优化

Lighthouse 量化基线,找瓶颈再优化

指标FCP/LCP/TTI/CLS

Core Web Vitals 核心指标

链路浏览器渲染全链路

DNS→TCP→请求→解析→Layout→Paint

网络关键请求并行化

Promise.all,串行变并行省时间

网络preload/dns-prefetch

关键资源提前下载

网络HTTP/2 多路复用

一个连接并行多请求

资源路由懒加载

动态 import,首屏只加载首屏代码

资源代码分割 / Tree Shaking

按需加载,删未用代码

资源图片懒加载 WebP

IntersectionObserver,格式优化

小程序主包分包

启动不全量加载,按需下载分包

小程序setData 优化

跨线程,最小化传数据

渲染骨架屏 / defer

降低白屏感,不阻塞解析

持续CI Lighthouse 监控

分数下降告警,性能预算

话术:「3.2→1.1s 不是瞎优化,是量化驱动 —— Lighthouse 找瓶颈,针对性优化。这一个场景带出我对渲染全链路、Core Web Vitals、网络/资源/渲染层优化的完整方法论。」

11 用户评论里注入脚本,别人访问执行

安全前端

🎬 场景: 用户在评论框输入 <script>偷cookie</script>,存库后别人访问执行(存储型 XSS)。

🌊 能牵出的知识点(11+)

类型存储型/反射型/DOM 型

XSS 三种,存储型最严重

防御输出转义

<>& 转 HTML 实体

防御DOMPurify 清洗

必须 v-html 时用,白名单

防御CSP 内容安全策略

限制脚本来源,XSS 最后防线

防御HttpOnly Cookie

JS 读不到,防偷 token

对比XSS vs CSRF

注入执行 vs 冒充请求

CSRFSameSite Cookie

跨站不带 cookie

CSRFCSRF Token

一次性 token 校验

越权水平/垂直越权(IDOR)

改 URL 看别人数据,后端校验

Vue{{}} vs v-html

{{}} 安全转义,v-html 危险

延伸供应链投毒(npm)

npm audit + 锁版本

延伸点击劫持

X-Frame-Options 防 iframe 钓鱼

话术:「评论 XSS 让我系统学了前端安全 —— XSS 三类型、CSRF、CSP、越权。做 LLM 时模型输出也用 DOMPurify 清洗。前端安全是区分"会写"和"专业"的分水岭。」

12 富文本/LLM 输出直接 v-html,样式乱+XSS

前端AI

🎬 场景: 富文本内容/LLM 输出直接 v-html,Word 粘贴带一堆 mso 样式污染 + 潜在 XSS。

🌊 能牵出的知识点(10+)

安全DOMPurify 白名单

清洗 HTML,只留允许的标签属性

安全CSP 防注入

限制脚本来源

富文本ProseMirror Schema

文档结构宪法,脏数据进不来

富文本transformPasted 过滤

粘贴时拦截清洗

富文本白名单优于黑名单

Word 垃圾无穷尽,定义允许什么

LLM流式 Markdown 渲染

代码块未闭合崩溃,buffer 补全

LLMmarked/markdown-it

Markdown 解析库

性能rAF 节流渲染

一帧渲染一次,别每字重解析

原理innerHTML vs textContent

前者解析 HTML(危险),后者纯文本

Vuev-html 原理与风险

直接设 innerHTML,不做转义

话术:「v-html 是 XSS 重灾区。我做富文本和 LLM,所有用户/模型可控内容都过 DOMPurify。这也带出我对 ProseMirror Schema、流式 Markdown、安全边界的理解。」

13 富文本嵌套表格,Chrome/Safari 光标行为不同

前端复杂组件

🎬 场景: 测评报告表格嵌套,研发用 Chrome 一切正常,客户用 Safari 光标乱跳。根因:ContentEditable 浏览器实现差异。

🌊 能牵出的知识点(10+)

原理ContentEditable 问题

HTML5 最松规范,浏览器各自实现

原理Selection API / Range

光标和选区的底层 API

架构ProseMirror 接管渲染

ContentEditable 只显示,状态在模型

架构文档模型(树)vs Delta(线性)

树支持嵌套,Delta 扁平

Schema节点 content/attrs/parseDOM

文档结构约束

坑IME 中文输入首字丢

compositionend 处理

坑空单元格光标定位

空 cell 塞 br 占位

协同Yjs CRDT 协同

多人编辑自动合并

测试Playwright 跨浏览器 E2E

必须所有浏览器测光标

性能NodeView 复用 + debounce

大文档打字延迟优化

话术:「富文本光标在 Chrome/Safari 行为不同,排查一周。让我深入理解了 ContentEditable 的坑、ProseMirror 如何用模型层接管、以及跨浏览器测试的重要性。富文本是前端最硬核方向。」

14 流程设计器画布缩放后,拖拽节点位置错乱

前端交互

🎬 场景: 画布缩放到 50%,点击放置节点位置偏移。根因:屏幕坐标没换算成画布坐标(没除以 scale)。

🌊 能牵出的知识点(10+)

数学坐标系换算

画布坐标=(屏幕坐标-offset)/scale

数学围绕鼠标缩放

缩放前后鼠标指向画布坐标不变

设计数据模型(节点+边)

图论,画布坐标存储,非屏幕坐标

模式命令模式撤销重做

execute/undo,两个栈管理

算法DFS 防环检测

连线前检测是否成环

性能脏标记 + rAF 批处理

上千节点连线重绘不卡

性能视口剔除

画布外节点不渲染

选型jsPlumb vs G6 vs X6

DOM/Canvas,按规模选

交互拖拽/缩放/平移/吸附

画布核心交互

延伸ECharts 大屏 scale 同理

4K 适配坐标换算一致

话术:「画布缩放坐标错乱让我搞懂了坐标系换算 —— 屏幕坐标和画布坐标要除以 scale。这也带出命令模式(撤销重做)、DFS(防环)、性能优化(批处理+视口剔除)。一个交互组件能体现设计模式+算法+性能综合能力。」

15 两表 JOIN 查询慢,数据量上来就卡

数据库

🎬 场景: 订单 JOIN 用户 JOIN 商品,数据量大后慢。根因:JOIN 字段没索引 + 小表驱动大表方向错。

🌊 能牵出的知识点(10+)

原理JOIN 算法(Nested Loop)

驱动表每行去被驱动表找

原理Index Nested-Loop / Block

有索引走索引,无索引分块

优化小表驱动大表

小表在外层循环,减少次数

优化JOIN 字段加索引

被驱动表 JOIN 字段必须索引

优化字段类型一致

JOIN 两边类型不同会失效

坑子查询 vs JOIN

子查询常产临时表,JOIN 快

架构冗余字段反范式

常用 JOIN 字段冗余存,避免 JOIN

架构分库分表后 JOIN 难

跨库 JOIN 用应用层组装

工具EXPLAIN 看驱动表

看执行顺序和 type

延伸覆盖索引避免回表

JOIN 查的字段在索引里

话术:「JOIN 慢让我搞懂了 JOIN 算法(Nested Loop)、小表驱动大表、索引优化。也引出反范式设计、分库分表后 JOIN 的难题。一个 SQL 优化能带出数据库架构思考。」

16 热点 key 过期瞬间,DB 被打挂(缓存击穿)

Redis

🎬 场景: 首页热门数据 key 过期,瞬间几万请求同时打 DB,DB 挂了。

🌊 能牵出的知识点(11+)

三问题穿透/击穿/雪崩

不存在/热点过期/大量过期

穿透布隆过滤器

判断可能存在或一定不在

穿透缓存空值

不存在的也缓存 null,短过期

击穿互斥锁

只放一个查 DB,其他等待

击穿热点 key 永不过期

逻辑过期,异步刷新

雪崩过期时间加随机

防止同时过期

雪崩Redis 集群高可用

主从+哨兵/Cluster

一致性Cache Aside + 延迟双删

先更 DB 再删缓存,兜底再删

数据结构5 大类型场景

String/Hash/List/Set/ZSet

持久化RDB vs AOF

快照 vs 日志,生产都开

锁Redis 分布式锁

SET NX,Redisson 看门狗

话术:「缓存击穿让我系统学了 Redis 三大问题。互斥锁只放一个请求查 DB。这也带出穿透(布隆过滤器)、雪崩(随机过期)、一致性(双删)、分布式锁。Redis 是后端面试高频。」

17 LLM 流式输出,Markdown 代码块未闭合渲染崩

AI前端

🎬 场景: 大模型吐 ``` 然后慢慢吐代码,闭合标记没来时 Markdown 解析器崩。

🌊 能牵出的知识点(12+)

网络SSE vs WebSocket

单向流 vs 双向,LLM 用 SSE

网络fetch + ReadableStream

EventSource 不带 token,手写流

解析流式 Markdown buffer 补全

检测未闭合 ```,补一个

解析marked/markdown-it

Markdown 解析库

安全DOMPurify 清洗

模型输出可能恶意,清洗才渲染

性能rAF 节流

一帧渲染一次,别每字重解析

控制AbortController 中断

用户点停止,中断 fetch 流

Text2SQLSQL 拦截/意图确认

DROP/DELETE 拦截,模糊先确认

RAG引用标注/来源展示

标注 [1] 来源,防幻觉

RAG向量检索 Milvus

向量化 + 相似度 KNN

AgentFunction Calling

LLM 决定调哪个工具

上下文Token 管理/滑动窗口

tiktoken 估算,溢出处理

话术:「LLM 流式渲染坑很多 —— SSE 选型、Markdown 增量解析、中断、安全。这个场景带出我对流式渲染、Text2SQL、RAG、Agent 的完整 AI 前端理解。AI 是当下最热方向,有实战很出彩。」

18 页面多个请求同时 401,token 刷新乱套

前端架构

🎬 场景: 页面 5 个请求同时 401,每个都触发 refresh,后端 refresh token 多次使用失效。

🌊 能牵出的知识点(10+)

并发Promise 队列共享

isRefreshing 标志,排队等同一刷新

安全token 存储权衡

localStorage 易 XSS,HttpOnly 防 CSRF

安全accessToken 内存 + refresh Cookie

兼顾安全体验

鉴权JWT 结构/无状态

header.payload.signature

鉴权RBAC 角色权限

用户-角色-权限三层

axios请求/响应拦截器

Promise 链,统一处理 401

权限路由守卫 vs 接口拦截

两层防护,后端权威

权限动态路由 addRoute

登录后按权限注册路由

权限按钮级 v-permission

自定义指令控制显隐

多租户三层隔离

路由/数据/UI,后端权威

话术:「多请求 401 竞态是真实并发问题。用 isRefreshing + Promise 队列只刷新一次。这带出我对 token 存储、JWT、RBAC、权限体系、多租户的理解。一个拦截器能聊整个鉴权架构。」

19 Vue history 模式,刷新子路由 404

部署前端

🎬 场景: 部署后首页正常,刷新 /user/profile 就 404。根因:Nginx 找不到这个文件。

🌊 能牵出的知识点(11+)

路由hash vs history 模式

# 后不发请求 vs 真实路径

路由history API(pushState)

无刷新改 URL

方案Nginx try_files fallback

找不到回退 index.html

Nginx反向代理

/api/ 转后端,同域无跨域

Nginx负载均衡 upstream

轮询/权重/ip_hash

Nginxgzip 压缩

减小传输体积

缓存HTML 不缓存 + JS 长缓存

铁律:HTML no-cache,资源 hash+immutable

Docker多阶段构建

build 用 node,运行用 nginx,镜像 30M

Dockercompose 编排

前端+后端+DB 一键启动

跨域Nginx 同域 vs CORS

生产 Nginx 反代无跨域

部署灰度/回滚

多版本并存,秒回滚

话术:「history 404 是部署经典坑,try_files 解决。这带出我对 Nginx(反代/负载/缓存)、Docker(多阶段/compose)、前端缓存策略、跨域的整套部署理解。部署是全栈基本功。」

20 导出 50 万行 Excel,前端卡死/后端 OOM

前端后端

🎬 场景: 用户点导出 50 万行,前端浏览器卡死,后端堆 OOM。需要全链路优化。

🌊 能牵出的知识点(12+)

后端流式查询(游标)

不全量加载,分批查

后端EasyExcel 流式写(SAX)

边读边写,内存恒定

后端异步任务 + 通知

大导出异步,完成发通知下载

后端线程池异步

导出放线程池,不阻塞请求

存储OSS 临时文件

生成存 OSS,返回下载链接

数据库游标分页/流式查询

MyBatis Cursor,不全量

前端Web Worker 解析

大文件解析放 Worker

前端流式下载(StreamSaver)

边下边写磁盘,不占内存

前端Blob vs Stream

Blob 全量内存,Stream 流式

交互进度条 + 取消

导出进度反馈,可取消

限制导出行数限制

超 10 万强制分批/条件筛选

JVMOOM 预防

HeapDumpOnOutOfMemoryError

话术:「海量导出是全栈问题 —— 后端流式查询+EasyExcel+异步任务,前端 Web Worker+流式下载。这一个场景体现我全栈端到端的优化能力,从 DB 到 JVM 到前端 Worker。」

∑ 总结:20 个点 × ~12 知识点 = 240+ 知识点

核心思路: 面试官问任何问题,你都能把它挂到这 20 个场景上,然后顺势展开一片技术。

举例:
• 问"Vue 响应式" → 引到「ref 存图表卡死」(P1)→ 牵出 shallowRef/Proxy/性能/内存
• 问"性能优化" → 引到「3万行白屏」(P2)或「首屏 3.2s」(P10)→ 牵出虚拟滚动/渲染链路
• 问"并发" → 引到「秒杀超卖」(P8)或「死锁」(P9)→ 牵出锁/Redis/MQ
• 问"Redis" → 引到「缓存击穿」(P16)→ 牵出三问题/一致性/分布式锁
• 问"安全" → 引到「XSS」(P11)→ 牵出 CSRF/CSP/越权/token

每个场景都准备了 30 秒开场 + 知识辐射图 + 话术。面试前过一遍这 20 个,你就有"讲一个故事带出一片技术"的能力。

进阶练习: 选 3-5 个你最熟的场景,把每个知识点的细节再深挖(看对应专题 01-20)。这样面试时,你不仅能"带出"知识点,还能"讲深"每个知识点。带出 + 讲深 = 高级工程师的水准。

面试亮点专题 21 — 以点带面

20 个真实场景 · 240+ 知识点辐射图 · 一个故事带一片技术

← 返回首页

🎯 以点带面 · 一个场景牵出一片技术