页面一次性加载数据过多时，页面卡死怎么办_前端请求数据过大页面卡死

问题：当后端一次性返回数据(array)过多时（例如1000条或者更多），会导致页面卡顿

优化思路之方案一：（推荐使用）

思路：利用插件pl-table

解决方案：https://developer.aliyun.com/mirror/npm/package/pl-table

示例：请看官方文档，里面描述很清楚，就不重复说了

推荐理由：dom结构固定，不是累加似加到页面

注意：基于element-ui但是不代表你需要安装element-ui才能使用pl-table，你可以不安装任何UI库，就可以使用pl-table。但是必须在集成vue框架下使用

优化思路之方案二：

思路：将这1000条数据划分为多个小数组，然后一段一段的加到页面上

解决方案：利用window.requestAnimationFrame()或者setInterval()

示例：以window.requestAnimationFrame()为例

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行；

// data为所有数据的数组，callback 拿到当前数据要做的操作 ,pageSize 一次取多少条
UtilHandleBigData(data, callback, pageSize = 20) {
   const totalCount = data.length // 共多少条
   // 可分多少页,就是分割为多少个小数组
   const totalPageNumer = Math.ceil(totalCount / pageSize)
   let currentPageNumber = 1 // 当前页数
 
   const handler = () => {
      const start = (currentPageNumber - 1) * pageSize
      const end = currentPageNumber * pageSize
      const currentData = data.slice(start, end) // 当前页的数据
      if (typeof callback === 'function') {
        callback(currentData, {
          totalCount,
          totalPageNumer,
          currentPageNumber,
          pageSize
        })
      }
      if (currentPageNumber < totalPageNumer) {
          window.requestAnimationFrame(handler)
      }
      currentPageNumber++
  }
  handler()
}

使用

let allData = [0, 1, 2, ......]; // 接口所得的所有数据
let tableData = []; // 显示在页面的列表
UtilHandleBigData(allData, (data) => {
  tableData.push(...data);
}

优化思路之方案三：

思路：写个vue指令，给table滚动区域添加指令，绑定方法，达到要求，就滚动加载数据

用法：

// directive.js文件
Vue.directive('loadMore', {
  bind(el, binding) {
    const bodyWrapper = el.querySelector('.el-table__body-wrapper')
    bodyWrapper.addEventListener('scroll', function() {
      const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
      // 触底加载下一页
      if (scrollDistance <= 10) {
        binding.value()
      }
    })
  }
})

然后再去main.js文件里注册

…………
import * as directives from '@/directive'
 
// 注册
Vue.use(directives)

具体文件使用

<template>
    <el-table
       :data="tableData"
       v-loadMore="loadMore"
    >
        ………………
    </el-table>
</template>
 
<script>
export default {
    data() {
        allData: [], // 所有数据
        tableData: [], // 当前显示的数据
        pageNum: 1,   // 当前页数
        pageSize: 10  // 一次性展示多少条数据
    }
    methods: {
        loadMore() {
          if (this.pageNum * this.pageSize < this.allData.length) {
            this.pageNum++
            this.tableData= this.allData.slice(0, this.pageNum * this.pageSize)
          }
        }
 
    }
}
</script>