前端处理较大数据量防止页面卡死的方法

大多数设备的刷新频率是60Hz,也就说是浏览器对每一帧画面的渲染工作要在16ms内完成,超出这个时间,页面的渲染就会出现卡顿现象,影响用户体验

假设后台一下返回10000条数据,如果我们一次性把它放到页面上,一下子渲染不过来,所以会卡顿。

如果不考虑虚拟列表,我们的优化思路就是,让渲染线程不要一下子那么忙,请求 js 老兄协助把数组分割一下,然后把数据一段一段的显示到页面,可利用  window.requestAnimationFrame或者setInterval不断填充数据;

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

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

使用

let allData = [0, 1, 2 /**...很多条*/];
let dataView = []; // 要显示在页面的列表
UtilHandleBigData(allData, (data) => {
  dataView.push(...data);
});

  • 13
    点赞
  • 92
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
当在前端页面中使用JavaScript循环大量数据时,由于JavaScript是单线程执行,会导致页面卡死的现象出现。这是因为当循环执行的时候,页面的渲染和响应事件会被阻塞,直到循环结束才能继续执行其他操作。 为了解决这个问题,可以采用以下几种方法: 1. 分批处理:将大量数据分成多个小批次进行处理,每一批处理完后再执行下一批。可以使用`setTimeout`或`setInterval`来控制每批的执行时间间隔,使得页面有足够的时间进行渲染和响应事件。 2. 使用Web Worker:Web Worker是HTML5中的一种特性,允许在后台线程中执行JavaScript代码,不影响页面的渲染和响应事件。可以将循环处理的逻辑放在Web Worker中执行,从而避免页面卡死的问题。 3. 使用虚拟滚动:当需要展示大量数据时,可以使用虚拟滚动的方式,只渲染当前可见区域的数据,而不是全部渲染。这样可以减少渲染的数量,提高页面的性能和响应速度。 4. 使用优化算法:如果循环逻辑中存在重复的计算或繁重的操作,可以考虑使用优化算法来减少计算量。例如,可以使用缓存机制、减少不必要的重复操作等方式来提高代码的执行效率。 总之,在处理大量数据时,需要注意避免阻塞页面渲染和响应事件的情况发生,可以采用分批处理、Web Worker、虚拟滚动和优化算法等方法来提高页面的性能和响应速度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值