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

您所在的位置：网站首页 › app加载动画太长怎么解决 › 页面一次性加载数据过多时，页面卡死怎么办

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

2024-06-01 12:06| 来源: 网络整理| 查看: 265

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

【本文地址】

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

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

今日新闻

推荐新闻