标签：十万 一次性 前端 renderSize let div page 加载

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。