首页/文章/javascript

虚拟列表 or 时间分片

2023-12-01

1872 字约 7 分钟

...

学习

最近在做一个官网，原本接口做的都是分页的，但是客户提出不要分页，之前看过虚拟列表这个东西，所以进行一下了解。

为啥要用虚拟列表呢！

　　在日常工作中，所要渲染的也不单单只是一个li那么简单，会有很多嵌套在里面。但数据量过多，同时渲染式，会在渲染样式跟布局计算上花费太多时间，体验感不好，那你说要不要优化嘛，不是你被优化就是你优化它。

进入正题，啥是虚拟列表？

可以这么理解，根据你视图能显示多少就先渲染多少，对看不到的地方采取不渲染或者部分渲染。

这时候你完成首次加载，那么其他就是在你滑动时渲染，就可以通过计算，得知此时屏幕应该显示的列表项。

怎么弄？

备注：很多方案对于动态不固定高度、网络图片以及用户异常操作等形式处理的也并不好，了解下原理即可。

虚拟列表的实现，实际上就是在首屏加载的时候，只加载可视区域内需要的列表项，当滚动发生时，动态通过计算获得可视区域内的列表项，并将非可视区域内存在的列表项删除。

1、计算当前可视区域起始数据索引(startIndex)
2、计算当前可视区域结束数据索引(endIndex)
3、计算当前可视区域的数据，并渲染到页面中
4、计算startIndex对应的数据在整个列表中的偏移位置startOffset并设置到列表上

　　由于只是对可视区域内的列表项进行渲染，所以为了保持列表容器的高度并可正常的触发滚动，将Html结构设计成如下结构：

<div class="infinite-list-container">
    <div class="infinite-list-phantom"></div>
    <div class="infinite-list">
      
      
      
      
    </div>
</div>

infinite-list-container 为可视区域的容器
infinite-list-phantom 为容器内的占位，高度为总列表高度，用于形成滚动条
infinite-list 为列表项的渲染区域

接着，监听infinite-list-container的scroll事件，获取滚动位置scrollTop
假定可视区域高度固定，称之为screenHeight
假定列表每项高度固定，称之为itemSize
假定列表数据称之为listData
假定当前滚动位置称之为scrollTop

　　则可推算出：

列表总高度listHeight = listData.length * itemSize
可显示的列表项数visibleCount = Math.ceil(screenHeight / itemSize)
数据的起始索引startIndex = Math.floor(scrollTop / itemSize)
数据的结束索引endIndex = startIndex + visibleCount
列表显示数据为visibleData = listData.slice(startIndex,endIndex)

　　当滚动后，由于渲染区域相对于可视区域已经发生了偏移，此时我需要获取一个偏移量startOffset，通过样式控制将渲染区域偏移至可视区域中。

偏移量startOffset = scrollTop - (scrollTop % itemSize);

那么虚拟列表是一方面可以优化的方式，另一个就是时间分片。

先看看我们平时的情况

1.直接开整，直接渲染。

诶？？？我们可以发现，js运行时间为113ms,但最终完成时间是 1070ms，一共是 js 运行时间加上渲染总时间。
PS：

在 JS 的 EventLoop中，当JS引擎所管理的执行栈中的事件以及所有微任务事件全部执行完后，才会触发渲染线程对页面进行渲染
第一个 console.log的触发时间是在页面进行渲染之前，此时得到的间隔时间为JS运行所需要的时间
第二个 console.log是放到 setTimeout 中的，它的触发时间是在渲染完成，在下一次 EventLoop中执行的

那我们改用定时器

上面看是因为我们同时渲染，那我们可以分批看看。

let once = 30
  let ul = document.getElementById('testTime')
  function loopRender (curTotal, curIndex) {
    if (curTotal <= 0) return
    let pageCount = Math.min(curTotal, once) 
    setTimeout(_ => {
      for (let i=0; i<pageCount;i++) {
        let li = document.createElement('li')
        li.innerHTML = curIndex + i
        ul.appendChild(li)
      }
      loopRender(curTotal - pageCount, curIndex + pageCount)
    }, 0)
  }
  loopRender(100000, 0)

这时候可以感觉出来渲染很快，但是如果渲染复杂点的dom会闪屏，为什么会闪屏这就需要清楚电脑刷新的概念了，这里就不详细写了，有兴趣的小朋友可以自己去了解一下。
可以改用 requestAnimationFrame 去分批渲染，因为这个关于电脑自身刷新效率的，不管你代码的事，可以解决丢帧问题。

let once = 30
  let ul = document.getElementById('container')
  
  function loopRender (curTotal, curIndex) {
    if (curTotal <= 0) return
    let pageCount = Math.min(curTotal, once) 
    window.requestAnimationFrame(_ => {
      for (let i=0; i<pageCount;i++) {
        let li = document.createElement('li')
        li.innerHTML = curIndex + i
        ul.appendChild(li)
      }
      loopRender(curTotal - pageCount, curIndex + pageCount)
    })
  }
  loopRender(100000, 0)

还可以改用 DocumentFragment

什么是 DocumentFragment

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

　　当 append元素到 document中时，被 append进去的元素的样式表的计算是同步发生的，此时调用 getComputedStyle 可以得到样式的计算值。而 append元素到 documentFragment 中时，是不会计算元素的样式表，所以 documentFragment 性能更优。当然现在浏览器的优化已经做的很好了，当 append元素到 document中后，没有访问 getComputedStyle 之类的方法时，现代浏览器也可以把样式表的计算推迟到脚本执行之后。

let once = 30 
  let ul = document.getElementById('container')
  
  function loopRender (curTotal, curIndex) {
    if (curTotal <= 0) return
    let pageCount = Math.min(curTotal, once) 
    window.requestAnimationFrame(_ => {
      let fragment = document.createDocumentFragment()
      for (let i=0; i<pageCount;i++) {
        let li = document.createElement('li')
        li.innerHTML = curIndex + i
        fragment.appendChild(li)
      }
      ul.appendChild(fragment)
      loopRender(curTotal - pageCount, curIndex + pageCount)
    })
  }
  loopRender(100000, 0)