前端一次性渲染10w条数据

解决方案：利用分页

方案1、分页+setTimeout（定时器） 不推荐

 使用：setTimeout(()=>{}) 宏任务，依次执行

方案2、分页+requestAnimationFrame 推荐

使用：requestAnimationFrame(()=>{}) 减少重排,循环的时候重复操作

优化方案2

document.createDocumentFragment()  文档碎片  循环操作dom会浪费性能 ，利用文档碎片的方法减少对dom的操作

详细代码：

//1.分页 + setTimeout

const getList=()=>{
 		return new Promise((resolve,reject)=>{
 			
 		})
 	}

 const renderList=async()=>{
 	console.time("列表时间")
 	const list=await getList()
 	const total=list.length;
 	const page=0;
 	const limit=200;
 
 const totalPage=Math.ceil(total/limit)
 
 const render=(page)=>{
 	if(page>=totalPage) return;
 	setTimeout(()=>{
 		for(let i=page*limit;i<page*limit+limit;i++){
 			const item=list[i]
 			const div=document.createElement('div')
 			div.innerHTML=`<img src="${item.src}" /><span>${item.text}</span>`
 			container.appendChild(div)
 		}
 		render(page+1)
 	},0)
 }
 render(page)
 console.timeEnd("列表结束时间")
 }

//2.window.requestAnimationFrame减少重排

const renderList=async()=>{
		console.time("列表时间")
		const list=await getList()
		const total=list.length;
		const page=0;
		const limit=200;
	
	const totalPage=Math.ceil(total/limit)
	
	const render=(page)=>{
		if(page>=totalPage) return;
		requestAnimationFrame(()=>{
			for(let i=page*limit;i<page*limit+limit;i++){
				const item=list[i]
				const div=document.createElement('div')
				div.innerHTML=`<img src="${item.src}" /><span>${item.text}</span>`
				container.appendChild(div)
			}
			render(page+1)
		},0)
	}
	render(page)
	console.timeEnd("列表结束时间")
	}

//3.document.createDocumentFragment()

const renderList=async()=>{
		console.time("列表时间")
		const list=await getList()
		const total=list.length;
		const page=0;
		const limit=200;
	
	const totalPage=Math.ceil(total/limit)
	
	const render=(page)=>{
		if(page>=totalPage) return;
		requestAnimationFrame(()=>{
			//创建一个文档碎片
			const fragment=document.createDocumentFragment()
			for(let i=page*limit;i<page*limit+limit;i++){
				const item=list[i]
				const div=document.createElement('div')
				div.className='flex'
		
				div.innerHTML=`<img src="${item.src}" /><span>${item.text}</span>`
				fragment.appendChild(div)
			}
			container.appendChild(fragment)
			render(page+1)
		},0)
	  }
		render(page)
		console.timeEnd("列表结束时间")
    }