day09--大量数据渲染不卡顿

文章目录

• • 示例

示例

<script type="text/javascript">
 	// 记录任务开始时间
     let now = Date.now();
	// 插入十万条数据
	const total = 100000;
	// 一次插入 20 条	
	let once = 20;
	//总页数
	let page = total / once;
	//每条记录的索引
	let index =	0;
	// 获取容器
	let ul = document.querySelector("ul");
	
	function lookup(cortotal,corindex){
		if(cortotal <= 0){
			return false;
		}
		//每页多少条
		let pageCount = Math.min(cortotal,once);
        
		window.requestAnimationFrame(()=>{      // 等同于setTimeout(()=>{fun()},1000/60)
			// 将数据插入容器中
            let arr=[]
			for (let i = 0; i < pageCount; i++) {
				let li = document.createElement('li');
				li.innerHTML = corindex + i +":" + ~~(Math.random() * total) //~~去反两次 得到没有小数点的本身
				arr.push(li)
			}
            ul.appendChild(...arr)
			 lookup(cortotal - pageCount , corindex + pageCount );//回调显示全部
		})
	}
	lookup(total,index);

</script>

标签：day09,pageCount,--,arr,不卡顿,li,let,cortotal,total
来源： https://blog.csdn.net/qq_42451776/article/details/118786108