1. 分页场景与性能挑战
典型场景
- 电商商品列表（排序+过滤+分页）
- 金融交易记录（时间范围+分页）
- 社交平台动态流（无限滚动懒加载）
性能瓶颈
| 数据量级 | 传统分页问题 | 优化目标 |
|---|
| 1万条 | 翻页时重复请求，加载慢 | 减少重复数据传输 |
| 10万条 | 页码跳转时数据库OFFSET效率低 | 降低数据库查询成本 |
| 100万条 | 深分页（如第1000页）性能急剧下降 | 避免全表扫描，优化查询逻辑 |
2. 基础分页实现方案
前端代码（React + 分页控件）
function PaginatedTable() {const [data, setData] = useState([]);const [currentPage, setCurrentPage] = useState(1);const [totalPages, setTotalPages] = useState(0);const fetchData = async (page) => {const params = new URLSearchParams({page,pageSize: 20,sort: 'price_desc',filter: JSON.stringify({ category: 'electronics' })});const response = await fetch(`/api/items?${params}`);const { items, total } = await response.json();setData(items);setTotalPages(Math.ceil(total / 20));};useEffect(() => {fetchData(currentPage);}, [currentPage]);return (<div><table>{}</table><Pagination current={currentPage
