js 时间分片解决万级数据渲染问题

一、定时器实现

  let pageSize = 30
  let ul = document.getElementById('testnode')
  function loopRender (curTotal, curIndex) {
    if (curTotal <= 0) return
    let pageCount = Math.min(curTotal, pageSize) // 每页最多30条
    setTimeout(() => {
      for (let i=0; i

这时候可以感觉出来渲染很快，但是如果渲染复杂点的dom会闪屏，
可以改用 requestAnimationFrame 去分批渲染，因为这个关于电脑自身刷新效率的，不管你代码的事，可以解决丢帧问题。

  let pageSize = 30
  let ul = document.getElementById('testnode')
  // 循环加载渲染数据
  function loopRender (curTotal, curIndex) {
    if (curTotal <= 0) return
    let pageCount = Math.min(curTotal, pageSize) // 每页最多30条
    window.requestAnimationFrame(() => {
      for (let i=0; i

二、可以改用 DocumentFragment

DocumentFragment，文档片段接口，表示一个没有父级文件的最小文档对象。它被作为一个轻量版的 Document使用，用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为 DocumentFragment不是真实DOM树的一部分，它的变化不会触发DOM树的（重新渲染) ，且不会导致性能等问题。
可以使用 document.createDocumentFragment方法或者构造函数来创建一个空的 DocumentFragment
DocumentFragments是DOM节点，但并不是DOM树的一部分，可以认为是存在内存中的，所以将子元素插入到文档片段时不会引起页面回流。

  let pageSize = 30 
  let ul = document.getElementById('testnode')
  // 循环加载渲染数据
  function loopRender (curTotal, curIndex) {
    if (curTotal <= 0) return
    let pageCount = Math.min(curTotal, pageSize) // 每页最多30条
    window.requestAnimationFrame(_ => {
      let fragment = document.createDocumentFragment()
      for (let i=0; i