【前端】动态插入并渲染大量数据的方法-时间分片：使用requestAnimationFrame+DocumentFragment

前言

动态插入并渲染大量数据的方法，一般有两种：

• 时间分片
• 虚拟列表

这里记录时间分片的方法。

「前端进阶」高性能渲染十万条数据(时间分片)在实际工作中，我们很少会遇到一次性需要向页面中插入大量数据的情况，但是为了丰 - 掘金

只适用于列表项的DOM结构十分简单的情况。

requestAnimationFrame

Window：requestAnimationFrame() 方法 - Web API | MDN

window.requestAnimationFrame()方法会告诉浏览器你希望执行一个动画。它要求浏览器在下一次重绘之前，调用用户提供的回调函数。 对回调函数的调用频率通常与显示器的刷新率相匹配。

也就是说，这是由浏览器来决定下次调用回调函数的时机。在这里的代码里，就是下一页数据的渲染时机由浏览器决定。

DocumentFragment

DocumentFragment - Web API | MDN

使用虚拟节点。存在虚拟节点DocumentFragment中的内容是存在内存中的。
防止频繁操作DOM，影响性能。

代码

import { ref, onMounted } from 'vue'const containerRef = ref()
const total = 10000
const once = 20onMounted(() => {if (containerRef.value) {loopRender(total)}
})const loopRender = (curTotal) => {if (curTotal <= 0) {return}//   当前页数条数const pageCount = Math.min(once, curTotal)window.requestAnimationFrame(() => {const fragment = document.createDocumentFragment()for (let i = 0; i < pageCount; i++) {const li = document.createElement('li')li.innerText = Math.random() * totalfragment.appendChild(li)}containerRef.value.appendChild(fragment)loopRender(curTotal - pageCount)})
}