前端页面如何正确渲染大量数据

当面临上千万条记录要显示时候，该怎么处理？

• 分页显示(分页查询)
• 分批插入

setTimeout(()=>{
	// 插入十万条数据
	const total = 100000
	// 一次性插入200条
	const once = 200
	const loopCount = total / once 
	let countOfRender = 0
	let ul = document.querSelector('ul')
	function add(){
		// 优化性能，插入不会造成回流
		const fragment = document.createDocumentFragment();
		for(let i = 0; i < once; i++){
			const li = document.createElement('li')
			li.innderText = `这是第 ${countIfRender} 次的li${li}`
			fragment.appendChild(li)
		}
		ul.appendChild(fragment)
		countOfRender += 1
		loop()
	}
	function loop(){
		if(countOfRender < loopCount ){
			window.requestAnimationFrame(add)
		}
	}
	loop()	
},0)

简化一下来分析

1. step1 异步队列里调用loop()
setTimeout(()=>{
	loop()
},0)

2. countOfRender, 计数器，用来跟踪记录数据是否已经都渲染完成了，如果还没渲染完，就
调用 window.requestAnimation(add)  来执行add方法进行渲染

3. 为什么要用requestAnimationFrame ？

requestAnimationFrame
在web应用中，实现动画效果的方法比较多，javascript中可以通过定时器setTimeout来实现，css3可以使用transition和animation来实现，html5中的canvas也可以实现。除此之外html5还提供一个专门用于请求动画的API, 即requestAnimationFrame(rAF), 直译就是 “请求动画帧”

rAF与setTimeout相比，最大的优势是由系统来决定回调函数的执行时机. 具体一点，就是系统每次绘制之前会主动调用rAF中的回调函数，如果系统绘制频率是60HZ, 那么回调函数就每16.7ms（1/60s = 1000/60ms）被执行一次, 如果绘制频率是75Hz，那么，这个间隔就变成了 1000/75 = 13.3ms。那就是说，rAF的执行步伐跟着系统的绘制频率走， 它能保证回调函数在屏幕每一次的绘制间隔中只被执行一次, 这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

可以戳这篇了解一下
requestAnimationFrame 与 setTimeout的性能比较

参考
前端页面如何正确渲染大量数据