🚀 前端狂欢—电商高并发：秒杀 抢购 库存同步...

什么

什么是高并发❓❓❓

可能不知道啥是高并发，但互联网时代，或多或少参与过秒杀、抢票、促销的功能等活动。恰恰这些应用场景，即是高并发+性能优化的重中之重。

高并发的特征：

瞬时流量巨大 ：活动开始时可能涌入数十万甚至百万用户
操作集中性强 ：用户行为高度一致（如点击同一个按钮）
响应要求极高：用户对延迟极其敏感，几百毫秒的延迟可能导致失败

怎么做（重要）

秒杀

秒杀活动开始前，成千上万的用户同时进入页面，如果JS、CSS、图片等静态资源加载缓慢，就会导致核心秒杀模块展现延迟，严重影响用户体验。

1. CDN分发与缓存策略

• 全球分布式CDN：将静态资源部署到离用户最近的边缘节点

• 多级缓存策略 ：

  <!-- 文件名嵌入哈希值实现精确缓存控制 -->
  <link rel="stylesheet" href="styles.a1b2c3.css">
  <script src="app.d4e5f6.js"></script>

• 缓存头优化： Cache-Control: public, max-age=31536000, immutable

2. HTTP/2多路复用

• 单连接多请求，减少TCP握手开销
• 服务器推送关键资源

3. 资源预加载与预连接

<!-- DNS预解析 -->
<link rel="dns-prefetch" href="//cdn.example.com">

<!-- 关键资源预加载 -->
<link rel="preload" href="/critical.css" as="style">

抢购

"立即抢购"按钮被疯狂点击时，短时间内大量相同请求涌向服务器，可能导致接口崩溃。

1. 防抖与节流

防抖（Debounce） ：高频操作后只执行一次（如搜索框）
节流（Throttle）：固定间隔执行一次（如抢购按钮）

2. 请求队列与优先级控制

class RequestQueue {
  constructor(maxConcurrent = 5) {
    this.queue = []
    this.activeCount = 0
    this.maxConcurrent = maxConcurrent
  }

  add(requestFn) {
    return new Promise((resolve, reject) => {
      this.queue.push({ requestFn, resolve, reject })
      this.next()
    })
  }

  next() {
    if (this.activeCount >= this.maxConcurrent || !this.queue.length) return
    
    const { requestFn, resolve, reject } = this.queue.shift()
    this.activeCount++
    
    requestFn()
      .then(resolve)
      .catch(reject)
      .finally(() => {
        this.activeCount--
        this.next()
      })
  }
}

// 全局请求队列实例
const apiQueue = new RequestQueue(3)

// 封装秒杀请求
function seckillRequest(data) {
  return apiQueue.add(() => axios.post('/api/seckill', data))
}

抢购页面优化

秒杀页面包含大量内容，但只有核心抢购模块需要第一时间展示。

1. 代码分隔

将代码拆分为核心模块（首屏关键代码）和非核心模块（如弹窗、二级页面），按需加载 。抢购页面的核心逻辑（如倒计时、立即购买按钮）需优先加载，而辅助功能（如订单详情、优惠券列表）可延迟加载。

// 动态导入（Dynamic Import），非核心模块按需加载
const CouponModal = React.lazy(() => import('./CouponModal'));  

// 使用 Suspense 包裹懒加载组件
<Suspense fallback={<Spinner />}>
  <CouponModal />  
</Suspense>

2. 懒加载/预加载/长列表

懒

延迟加载非关键资源（如图片、辅助组件），触发条件包括滚动、点击等交互行为。

// 图片懒加载（IntersectionObserver API）
const imgObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const lazyImg = entry.target;
      lazyImg.src = lazyImg.dataset.src; // 替换 data-src 为真实 URL
      imgObserver.unobserve(lazyImg);
    }
  });
});

document.querySelectorAll('img.lazy').forEach(img => imgObserver.observe(img));

预

提前加载后续可能需要的资源（如抢购确认页的 JS/CSS）

用link的preload<link rel="preload" href="qianggou.js" as="script" />

长

可自行实现，也可用一些库。

大型虚拟列表优化：就渲染用户视口中能看到的部分就行。

1、vue 用 vue-virtual-scroller

2、react 用 react-window 或 react-virtualized

只渲染可见的元素，滚动时动态加载，提高性能！

倒计时/同步库存

1.webSocket

替代HTTP轮询（减少无效轮询），开一个webSocket持久连接，秒级抢购和同时👍。

const socket = new WebSocket('wss://example.com/seckill');

// 心跳检测防止连接断开
const heartbeatInterval = setInterval(() => {
  if (socket.readyState === WebSocket.OPEN) {
    socket.send(JSON.stringify({ type: 'ping' }));
  }
}, 30000);

socket.onmessage = (event) => {
  const { stock, countdown, userQueue } = JSON.parse(event.data);
  
  // 使用虚拟DOM更新避免重绘（性能关键！）
  requestAnimationFrame(() => {
    document.getElementById('stock').textContent = `库存：${stock}`;
    document.getElementById('countdown').textContent = `倒计时：${countdown}s`;
    renderQueue(userQueue); // 更新用户排队位置
  });
};

2.SSE(Server-Sent Events)

后端做sse接口。

前端要打开连接，创一个EventSource对象。

const eventSource = new EventSource('/sse');

eventSource.onmessage = (event) => {
  // 做逻辑代码
}

3. Web Worker

将复杂的计算逻辑，交给web workder，避免堵塞。

// main.js
const worker = new Worker('compute.worker.js')

// 复杂任务分发
function processBigData(data) {
  return new Promise((resolve) => {
    worker.postMessage(data)
    worker.onmessage = (e) => resolve(e.data)
  })
}

// compute.worker.js
self.onmessage = function(e) {
  const result = heavyComputation(e.data)
  self.postMessage(result)
}

function heavyComputation(data) {
  // 复杂计算逻辑
  return processedData
}

总结

静态资源 ：CDN+缓存+预加载 → 加速首屏
请求控制 ：防抖+节流+队列 → 避免崩溃
加载策略 ：代码分割+懒加载 → 按需加载
实时同步 ：WebSocket+SSE → 毫秒级更新
性能保障 ：Web Worker → 主线程不卡顿