数据量大导致传输速度慢解决方案——请求分片

de_la_prada

于 2021-03-14 08:52:32 发布

阅读量2.6k

点赞数

分类专栏：小程序前端文章标签： javascript node.js

本文链接：https://blog.youkuaiyun.com/weixin_41973410/article/details/114776441

版权

本文针对前端请求大量数据导致的加载速度慢问题，提出了请求分片的解决方案。通过先加载50条数据，然后监听滚动事件，在用户滚动到底部时请求下一批数据，以此提高页面渲染效率和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在开发过程中，遇到要请求几千行数据的需求，因为前端部分已经使用了VirtualList虚拟列表只渲染当前可视区域的视图，非可视区域的视图在用户滚动到可视区域再渲染：
在这里插入图片描述
但仍不能解决数据加载缓慢问题。原因是数据量本身太大，导致传输的速度过慢，所以渲染到页面上的速度也很慢。

解决方案

用请求分片的方式，先加载前50条数据，监听滑动到底部的事件，当列表下拉到底部的时候，再去请求后50条数据。这么做每次只请求50条数据，传输速度就会很快。

前端具体实现如下：

function PoemList() {
   
  ...
  // 设置请求偏移量
  const [offset, setOffset] = useState<number>(0); 

  useEffect(() => {
   
	 ...
	 // 第一次请求
      getPoemList(category, offset)
        .then((res) => {
   
          setList(res);
        })
        .catch((err) => {
   
          console.error(err);
        });
    }
  }, []);
	
  // 监听滑动到底部

最低0.47元/天解锁文章