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

原创已于 2023-09-10 16:33:36 修改 · 3.1w 阅读

95 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

于 2020-05-21 21:15:27 首次发布

js 同时被 3 个专栏收录

3 篇文章

订阅专栏

体验优化

2 篇文章

订阅专栏

前端性能优化

2 篇文章

订阅专栏

探讨了在处理大量数据时如何避免页面渲染卡顿的问题，通过将数据分割并逐步加载到页面，利用window.requestAnimationFrame进行平滑过渡，提升用户体验。

大多数设备的刷新频率是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);
});