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

/**  * @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);

标签：十万,一次性,前端,renderSize,let,div,page,加载
来源： https://www.cnblogs.com/pingpinggo/p/16456537.html