前端性能优化思路_场景题
20 万人同时在直播间打赏，前端优化需要考虑高并发、性能优化、流畅体验等问题，涉及 WebSocket 处理、消息去抖、虚拟列表优化、动画优化、CDN 加速 等多个方面。
- WebSocket 高并发优化
（1）使用 WebSocket 替代轮询
轮询（Polling）会频繁发送 HTTP 请求，开销大，不适合高并发场景。
WebSocket 可以实现实时通信，只在有数据更新时推送，提高效率。
const socket = new WebSocket(‘wss://example.com/socket’);
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log(‘收到打赏消息：’, data);
};
（2）减少 WebSocket 消息量
去重：服务器应去重，防止重复数据传输。
合并消息：同一秒内的多条打赏消息可以合并，减少通信压力。
限流策略：
每个用户每秒最多收到 10 条消息，超出的可以合并展示。
可以用 令牌桶算法 进行限流。
let messageQueue: any[] = [];
let isProcessing = false;
socket.onmessage = (event) => {
messageQueue.push(JSON.parse(event.data));
if (!isProcessing) {
isProcessing = true;
setTimeout(() => {
processMessages([…messageQueue]); // 处理合并后的消息
messageQueue = [];
isProcessing = false;
}, 300);
}
};
- 消息列表性能优化
（1）使用虚拟列表
打赏消息列表数据量大，不能直接渲染 20 万条数据，需要虚拟滚动：
npm install vue-virtual-scroller
<RecycleScroller
:items=“messages”
:item-size=“50”
key-field=“id”
class=“scroller”
<template #default="{ item }">
效果：仅渲染可视区域的 10~20 条数据，提高性能。
（2）消息去抖（Debounce）
当 WebSocket 高速推送数据时，前端避免 UI 频繁更新：
import { debounce } from ‘lodash-es’;
const updateMessageList = debounce((newMessages) => {
messages.value = […newMessages, …messages.value].slice(0, 100);
}, 300);
效果：每 300ms 更新一次 UI，减少渲染次数，提高性能。
- 动画 & 性能优化
（1）打赏弹幕动画
避免 DOM 操作，使用 transform+opacity，减少重排（Reflow）。
CSS 动画替代 JS 动画：
@keyframes fadeInUp {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.reward-message {
animation: fadeInUp 0.5s ease-out;
}
（2）Canvas/WebGL 绘制弹幕
如果有大量飞屏弹幕，使用 Canvas/WebGL 绘制比 DOM 效率更高：
const canvas = document.getElementById(‘barrageCanvas’) as HTMLCanvasElement;
const ctx = canvas.getContext(‘2d’);
function renderBarrage(text, x, y) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = ‘#fff’;
ctx.fillText(text, x, y);
}
效果：比 DOM + CSS 渲染更高效，不卡顿。
- 静态资源优化
（1）CDN 加速
直播间图片、头像、礼物动画等资源需要放在 CDN 上，减少服务器负担。
采用 OSS + CDN 方案，如阿里云 OSS / 腾讯云 COS。
缓存策略：
Cache-Control: max-age=86400（静态资源 24 小时缓存）
ETag 机制，避免重复请求相同资源。
const giftImageUrl = https://cdn.example.com/gifts/${giftId}.png;
（2）使用 WebP 替代 PNG
效果：减少 30%~50% 的图片大小，提高加载速度。
- 负载均衡 & 降级策略
（1）服务端分流
使用 Nginx 负载均衡：不同直播间分配不同的 WebSocket 服务器。
采用 Redis Pub/Sub 进行消息分发。
（2）客户端降级策略
当并发过高，前端可采取降级策略：
只展示前 1000 名打赏信息，其余合并显示为 “更多人打赏”。
减少动画效果，超高流量时，关闭部分动效：
if (onlineUsers > 100000) {
disableAnimations = true;
}
总结
在高并发场景下，最重要的是减少不必要的 DOM 更新，减少 WebSocket 消息量，并利用 CDN、虚拟列表、Canvas 渲染弹幕 提高性能。你觉得你的项目适合哪种优化方案？