后端接口返回近万条数据，前端渲染缓慢，content Download 时间长的优化方案_content download慢

本文链接：https://blog.csdn.net/2401_84437604/article/details/138394607

当后端接口返回近万条数据导致前端渲染缓慢时，采取前端分页和后端分页相结合的方式进行优化。前端通过数组的slice方法实现分页，减少首次加载数据量；后端精简返回字段，压缩数据资源大小。最后，通过传递分页参数给后端，让后端按需返回数据，降低content download时间，提高页面响应速度。

摘要由CSDN通过智能技术生成

从上图我们可以看到，光下载 http 接口的响应数据就需要 3.14s（此时是8000条数据），而正常接口的下载时间一般是以毫秒为单位。所以需要优化。

解决思路

1. 首先是前端分页

首先，需要思考下这将近一万条数据如何在前端渲染的问题。肯定是不能一下子进行全部展示的。既然后端没有进行分页，那就前端来进行分页。

前端分页逻辑其实很简单：有分页的组件，拿来用就行。使用数组的 slice 方法，对总数据进行分割，跳转到不同页时，根据 pageSize 和 limit 两个参数分割数组。

比较简单，就直接上代码了

// 前端分页逻辑
/\*\*
 \* 该方法用于前端分页
 \* @param limit 每页条数
 \* @param currentPage 当前页
 \* @param tableData 总数据
 \*/
  queryByPage(limit, currentPage, tableData) {
     return tableData.slice((currentPage - 1) \* limit, currentPage \* limit)
  }

进行前端分页后，只有第一次调用接口时会非常慢，之后进行跳转其他页码时，是不调用接口的，页面效果会很快。

不过这终究不是最终的解决方案，接口还是比较耗时，如果在进行其他操作后在调用该接口，仍然会非常慢，仍需继续优化。