const renderList = async () => { console.time('列表时间') const list = await getList() console.log(list) const total = list.length const page = 0 const limit = 200 const totalPage = Math.ceil(total / limit) const render = (page) => { if (page >= totalPage) return // 使用requestAnimationFrame代替setTimeout requestAnimationFrame(() => { for (let i = page * limit; i < page * limit + limit; i++) { const item = list[i] const div = document.createElement('div') div.className = 'sunshine' div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>` container.appendChild(div) } render(page + 1) }) } render(page) console.timeEnd('列表时间') }
使用requestAnimationFrame代替setTimeout,减少了重排的次数
24 min read