关于后端一次性返回十万条数据,前端怎么处理问题。

/**
 * @description 数据懒加载变色
 * @param 通过interSectionObserver实现
 */

function handleDivBack(entries) {
  entries.forEach(item => (item.isIntersecting ? (item.target.style.background = 'red') : (item.target.style.background = 'black')));
}

let observer = new IntersectionObserver(handleDivBack, {
  threshold: 0.4,
});

/**
 * @description 十万条数据加载
 * @params 直接加载十万条数据,加载很慢
 * @params 将十万条数据设置分页,拿到总页数配合定时器加载
 * @params 将十万条数据设置分页,拿到总页数配合requestAnimationFrame
 * @params 将十万条数据设置分页,拿到总页数配合requestAnimationFrame加文档碎片
 */
// 直接加载十万条数据,加载很慢
 document.getElementById('ul_list').innerHTML = new Array(100000).fill('<div class="ul_item"></div>').join('');

//将十万条数据设置分页,拿到总页数配合定时器加载
// function renderList(renderLength, renderSize) {
//   let container = document.getElementById('ul_list');
//   let page = 0;
//   let totalPage = Math.ceil(renderLength / renderSize)
//   let render = page => {
//     setTimeout(() => {
//       if (page >= totalPage) return true;
//       for (let i = page * renderSize; i <= page * renderSize + renderSize; i++) {
//         let div = document.createElement('div');
//         div.className = 'ul_item';
//         div.innerHTML = i;
//         container.appendChild(div);
//       }
//       render(page + 1);
//     }, 0);
//   };
//   render(page);
// }
// renderList(100000, 200);

// 将十万条数据设置分页,拿到总页数配合requestAnimationFrame
// function renderList(renderLength, renderSize) {
//   let container = document.getElementById('ul_list');
//   let page = 0;
//   let totalPage = Math.ceil(renderLength / renderSize)
//   let render = page => {
//     requestAnimationFrame(() => {
//       if (page >= totalPage) return true;
//       for (let i = page * renderSize; i <= page * renderSize + renderSize; i++) {
//         let div = document.createElement('div');
//         div.className = 'ul_item';
//         div.innerHTML = i;
//         container.appendChild(div);
//       }
//       render(page + 1);
//     });
//   };
//   render(page);
// }
// renderList(100000, 200);

// 将十万条数据设置分页,拿到总页数配合requestAnimationFrame加文档碎片
function renderList(renderLength, renderSize) {
  let container = document.getElementById('ul_list');
  let page = 0;
  let totalPage = Math.ceil(renderLength / renderSize);
  let render = page => {
    requestAnimationFrame(() => {
      if (page >= totalPage) return true;
      let frg = document.createDocumentFragment();
      for (let i = page * renderSize; i <= page * renderSize + renderSize; i++) {
        let div = document.createElement('div');
        observer.observe(div); //监听div的父容器
        div.className = 'ul_item';
        div.innerHTML = i;
        frg.appendChild(div);
      }
      container.appendChild(frg);
      render(page + 1);
    });
  };
  render(page);
}
renderList(400, 200);
posted @   是平平狗  阅读(506)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示