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