解决方案:利用分页
方案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("列表结束时间")
}