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

文章介绍了两种分页加载优化方法,一是结合setTimeout,二是结合requestAnimationFrame来减少重排。更推荐使用requestAnimationFrame,因为它能更好地同步视觉更新。此外,还提到了利用文档碎片(document.createDocumentFragment())进一步提升DOM操作的性能,避免频繁操作实际DOM导致的性能问题。
摘要由CSDN通过智能技术生成

解决方案:利用分页

方案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("列表结束时间")
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

初一Y

你的鼓励将是我创造的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值