优化 之 页面一次性加载数据过多

1.若是用来展示table列表

推荐使用umy-ui类库，基于elment-ui的表格开发的虚拟表格，很大程度上减少卡顿

可以看我的相关文章

2.若是页面某部分区域(不进行分页) 

 把数据进行拆分，分割成一部分一部分，通过setInterval函数进行实现，代码如下:

// 从数据库获取到的数据  加入是2000条
let dataList = new Array(2000).fill(1)

// 需要分段的数据    回调函数    每段需要多少条数据
function sliceArray(dataList, fn, pageSize = 20) {
  // 总共分成多少段，用来判断是否终止
  let totalLength = Math.ceil(dataList.length / pageSize)
  // 当前的页数
  let currentPage = 1

  let timer = setInterval(() => {
    let start = (currentPage - 1) * pageSize
    let end = currentPage * pageSize
    let tempArr = dataList.slice(start, end)
    fn(tempArr)
    currentPage++
    if (currentPage > totalLength) {
      clearInterval(timer)
    }
  }, 10)
}

// 页面展示的数据
let showData = []

// 调用函数
sliceArray(
  dataList,
  (arr) => {
    showData.push(...arr)
    console.log(showData)
  },
  50
)

3.图片压缩 TinyPNG – Compress WebP, PNG and JPEG images intelligently