页面一次性加载数据过多时,页面卡死怎么办

问题:当后端一次性返回数据(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)

具体文件使用



 

你可能感兴趣的:(vue,js,css,javascript,前端)