加载大数据时性能压力优化

1. 减少数据请求量

分页加载（Pagination）

原理：将数据拆分为多页，按需加载。
实现：
- 传统分页（页码切换）。
- 无限滚动（滚动到底部自动加载下一页，如社交媒体）。

懒加载（Lazy Loading）

原理：仅加载用户可见区域的数据。
场景：
- 图片懒加载（使用 loading="lazy" 属性）。
- 列表懒加载（如虚拟滚动）。

按需加载（条件请求）

原理：根据用户操作动态加载数据。
- 示例：展开详情时再请求子数据。

2. 优化数据传输

数据压缩

服务端：开启 Gzip / Brotli 压缩。
前端：简化 JSON 结构（如缩短字段名）或使用二进制格式（如 Protocol Buffers）。

增量更新

原理：仅传输变化的部分数据。
- 示例：WebSocket 推送更新，或通过 API 返回差异数据。

CDN 缓存

对静态数据使用 CDN 缓存，减少服务端压力。

3. 服务端优化

分页与游标查询

数据库：使用 LIMIT + OFFSET 或基于游标的分页（避免深分页性能问题）。
API 设计：返回 next_page_token 或游标标识。

服务端缓存

对高频访问的数据（如热门商品）进行 Redis/Memcached 缓存。

GraphQL 按需查询

允许前端指定需要的字段，避免冗余数据传输。

4. 前端数据处理优化

虚拟滚动（Virtual Scrolling）

原理：仅渲染可视区域内的元素。
实现库：
- react-virtualized（React）
- vue-virtual-scroll-list（Vue）
- 原生实现：计算滚动位置动态渲染 DOM。

Web Worker 处理数据

原理：将数据解析、排序等耗时操作放在子线程，避免阻塞主线程。
```
const worker = new Worker('data-processor.js');
worker.postMessage(largeData);
```

防抖（Debounce）与节流（Throttle）

场景：搜索框输入、滚动事件等高频操作。

// 防抖：停止操作后触发
const search = debounce(() => fetchData(), 300);

// 节流：固定频率触发
window.addEventListener('scroll', throttle(() => {...}, 100));

5. 渲染优化

减少 DOM 操作

批量更新：使用文档碎片（DocumentFragment）或框架的批量渲染机制（如 Vue/React 的虚拟 DOM）。
离线 DOM：操作完成后一次性插入页面。

优化 CSS

避免复杂选择器，使用 contain: strict 限制渲染范围。
对频繁变化的元素启用 GPU 加速（如 transform: translateZ(0)）。

避免强制同步布局（Layout Thrashing）

集中读取布局属性（如 offsetHeight），避免读写交替。

6. 预加载与预取

预加载关键数据

在页面空闲时预加载下一页数据（如 requestIdleCallback）。
使用 <link rel="prefetch"> 提前加载资源。

数据本地缓存

使用 LocalStorage / IndexedDB 缓存已加载数据，减少重复请求。

7. 降级与容错

加载状态：显示骨架屏（Skeleton Screen）或加载动画。
错误处理：数据加载失败时提供重试按钮。
分块加载：优先渲染核心内容，次要内容延迟加载。

8. 性能监控与分析

使用 Lighthouse 或 Chrome DevTools 分析性能瓶颈。
监控长任务（Long Tasks）和内存泄漏。

示例代码：虚拟滚动核心逻辑

// 伪代码：虚拟滚动实现思路
const container = document.getElementById('list-container');
let startIdx = 0;
let endIdx = 0;

container.addEventListener('scroll', () => {
  const scrollTop = container.scrollTop;
  const itemHeight = 50;
  startIdx = Math.floor(scrollTop / itemHeight);
  endIdx = startIdx + Math.ceil(container.clientHeight / itemHeight);
  
  // 更新可见区域数据
  renderVisibleItems(data.slice(startIdx, endIdx));
});