「具体问题」后端返回大量数据，前端要如何处理？

分页处理Pagination

• 实现原理：前端仅展示固定数量，用户通过翻页加载。
• 优点：大幅减少DOM节点数。

虚拟滚动Virtual Scroll

• 实现原理：只渲染可视区域内的元素，滚动时动态替换内容。
• 优点：保持流畅滚动体验，适合长列表。
• 关键工具 ：
  • react-window/react-virtualized
  • vue-virtual-scroller
• 示例

import { FixedSizeList } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

export default ({ data }) => (
  <FixedSizeList 
    height={600}
    itemCount={data.length}
    itemSize={20}
    width="100%"
  >
    {Row}
  </FixedSizeList>
);

懒加载Infinite Scroll

• 实现原理：滚动到底部时追加数据，结合分页逻辑。
• 优点：无缝加载体验，避免翻页中断。
• 注意事项：需添加加载状态和滚动监听销毁。
• 示例

const pageSize = 20;
const [current, setCurrent] = useState(1);

const loadMore = () => {
  const data = getPaginationData(fullData,current, pageSize);
  setCurrent(pre => pre + 1);
};

window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
    loadMore();
  }
});

Web Worker处理数据

• 适用场景：数据需要复杂计算（过滤/排序）时。
• 原理：将计算移至后台线程，避免阻塞UI。
• 示例

// 主线程
const worker = new Worker('data-worker.js');
worker.postMessage(fullData);
worker.onmessage = (e) => {
  renderData(e.data);
};

// data-worker.js
self.onmessage = (e) => {
  self.postMessage(sortData(e.data));
};

时间分片Time Slicing

• 原理 ：用requestAnimationFrame或setTimeout分批渲染。
• 适用场景：兼容性要求高且不用第三方库时。
• 示例

const renderChunk = (data, chunkSize = 100) => {
  let index = 0;
  
  const render = () => {
    const chunk = data.slice(index, index + chunkSize);
    
    // 渲染chunk到DOM
    index += chunkSize;
    if (index < data.length) {
      requestAnimationFrame(render);
    }
  };
  
  render();
};

优化后端配合「最佳」

• 分页 /流式传输WebSocket/Server-Sent Events