前端一次渲染 10 万条数据解决方案

1.分页+setTimeout

2.window.requestAnimationFrame

3.document.createDocumentFragment

//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("列表结束时间")
}