高并发场景下的前端策略，本质是**"前端做盾，后端做枪"**。前端通过缓存减少对后端的无效冲击，通过降级在服务崩溃时保住核心体验。这不仅是技术方案，更是系统稳定性的第一道防线。
一、前端缓存策略：多级分流，减少回源
高并发下，前端缓存的核心目标是**"能不从服务器拿的数据，坚决不拿"**，将流量挡在浏览器层。
| 缓存层级 | 技术手段 | 适用场景与策略 |
|---|---|---|
| HTTP 强缓存 | Cache-Control: max-age=31536000( immutable ) |
静态资源 ：JS、CSS、图片。通过文件名哈希（如 app.a1b2c3.js）实现"永不过期"缓存，大幅减少 CDN 回源压力。 |
| CDN 边缘缓存 | 静态页面/资源分发 | 将 HTML 模板、活动页推送到离用户最近的节点。大促前需预热热门资源，避免瞬间流量击穿源站。 |
| 客户端数据缓存 | Service Worker / IndexedDB | 动态接口数据：拦截 API 请求，优先返回本地缓存。适合商品列表、配置信息等非强实时数据，设置合理的 TTL（生存时间）。 |
| 内存缓存 | 全局变量 / Map 对象 | 极高频数据：如用户 Token、基础配置。生命周期随页面关闭而结束，响应速度最快。 |
关键技巧：
-
版本化更新：静态资源更新时修改文件名，强制浏览器下载新资源，而非覆盖旧缓存。
-
缓存雪崩预防：为不同资源的过期时间添加随机扰动，避免大量缓存同时失效导致后端被"一波流"冲垮。
二、降级策略：丢车保帅，保障核心链路
当系统压力过大或后端出现故障时，降级是**"主动放弃非核心功能，确保主流程不死"**的生存手段。
1. 功能降级（UI 层面）
-
非核心模块隐藏 ：直接移除或隐藏评价列表、相关推荐、广告 Banner 等模块。在代码中通过配置中心开关控制，无需发版即可一键切换。
-
交互简化：关闭复杂的动画效果、自动轮播，将实时校验改为异步校验。
2. 数据降级（接口层面）
-
本地兜底数据 ：在接口超时或返回 5xx 错误时，读取
localStorage或IndexedDB中的历史快照数据。虽然数据可能过时，但避免了页面白屏（如商品详情页展示昨日库存）。 -
静态化降级：若动态接口完全不可用，前端可跳转至预先生成的静态页（如"活动太火爆"页面），或从 CDN 拉取一份静态 JSON 兜底数据。
3. 限流与容错（防御层面）
-
前端限流：在按钮点击或请求发起层做节流（Throttle）和防抖（Debounce）。例如秒杀场景，用户点击一次后锁定按钮 3 秒，防止用户狂点产生无效并发。
-
主动熔断：监控接口错误率，当连续失败 N 次后，前端主动进入"降级模式"，一段时间内不再向后端发送请求，直接返回默认数据，给后端恢复的时间窗口。
三、实战场景：秒杀/大促 SOP
以"双 11"或"秒杀"为例，前端的具体防御动作为：
-
准备阶段：提前预热 CDN，将静态页、JS、CSS 推送到边缘节点；开启 HTTP 强缓存。
-
开始阶段：
-
隐藏非核心 UI（评价、推荐）。
-
开启按钮防重复点击（点击后置灰 3 秒）。
-
库存、价格等实时数据走短缓存（如 10s），减少后端压力。
-
-
极端情况：
-
若接口超时，展示"服务繁忙，请稍后重试"并自动重试。
-
若完全不可用，展示本地缓存的商品基本信息（如名称、主图），引导用户稍后再试。
-
四、面试与架构思考
在回答此类问题时，需体现你的分层防御思维：
-
缓存是"防"：通过多级缓存（浏览器 -> CDN -> 本地存储）将 80% 的静态请求挡在门外。
-
降级是"守"：通过开关配置和兜底策略，在系统崩溃时保住"浏览商品 -> 加入购物车 -> 下单"的核心链路。
-
前端是"缓冲层"：前端虽不能解决数据库瓶颈，但能通过限流和容错，为后端争取宝贵的恢复时间。