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

分页处理Pagination

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

虚拟滚动Virtual Scroll

  • 实现原理:只渲染可视区域内的元素,滚动时动态替换内容。
  • 优点:保持流畅滚动体验,适合长列表。
  • 关键工具
    • react-window/react-virtualized
    • vue-virtual-scroller
  • 示例
jsx 复制代码
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

  • 实现原理:滚动到底部时追加数据,结合分页逻辑。
  • 优点:无缝加载体验,避免翻页中断。
  • 注意事项:需添加加载状态和滚动监听销毁。
  • 示例
javascript 复制代码
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。
  • 示例
javascript 复制代码
// 主线程
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

  • 原理 :用requestAnimationFramesetTimeout分批渲染。
  • 适用场景:兼容性要求高且不用第三方库时。
  • 示例
javascript 复制代码
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
相关推荐
前端_学习之路1 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
柚子8161 小时前
scroll-marker轮播组件不再难
前端·css
你的人类朋友2 小时前
🫏光速入门cURL
前端·后端·程序员
01传说3 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js