前言

最近在做一個(gè)官網(wǎng)，原本接口做的都是分頁(yè)的，但是客戶提出不要分頁(yè)，之前看過(guò)虛擬列表這個(gè)東西，所以進(jìn)行一下了解。

為啥要用虛擬列表呢！

　　在日常工作中，所要渲染的也不單單只是一個(gè)li那么簡(jiǎn)單，會(huì)有很多嵌套在里面。但數(shù)據(jù)量過(guò)多，同時(shí)渲染式，會(huì)在 渲染樣式 跟 布局計(jì)算上花費(fèi)太多時(shí)間，體驗(yàn)感不好，那你說(shuō)要不要優(yōu)化嘛，不是你被優(yōu)化就是你優(yōu)化它。

進(jìn)入正題，啥是虛擬列表？

可以這么理解，根據(jù)你視圖能顯示多少就先渲染多少，對(duì)看不到的地方采取不渲染或者部分渲染。

這時(shí)候你完成首次加載，那么其他就是在你滑動(dòng)時(shí)渲染，就可以通過(guò)計(jì)算，得知此時(shí)屏幕應(yīng)該顯示的列表項(xiàng)。

怎么弄？

備注：很多方案對(duì)于動(dòng)態(tài)不固定高度、網(wǎng)絡(luò)圖片以及用戶異常操作等形式處理的也并不好，了解下原理即可。

虛擬列表的實(shí)現(xiàn)，實(shí)際上就是在首屏加載的時(shí)候，只加載可視區(qū)域內(nèi)需要的列表項(xiàng)，當(dāng)滾動(dòng)發(fā)生時(shí)，動(dòng)態(tài)通過(guò)計(jì)算獲得可視區(qū)域內(nèi)的列表項(xiàng)，并將非可視區(qū)域內(nèi)存在的列表項(xiàng)刪除。

1、計(jì)算當(dāng)前可視區(qū)域起始數(shù)據(jù)索引(startIndex)
2、計(jì)算當(dāng)前可視區(qū)域結(jié)束數(shù)據(jù)索引(endIndex)
3、計(jì)算當(dāng)前可視區(qū)域的數(shù)據(jù)，并渲染到頁(yè)面中
4、計(jì)算startIndex對(duì)應(yīng)的數(shù)據(jù)在整個(gè)列表中的偏移位置startOffset并設(shè)置到列表上

　　由于只是對(duì)可視區(qū)域內(nèi)的列表項(xiàng)進(jìn)行渲染，所以為了保持列表容器的高度并可正常的觸發(fā)滾動(dòng)，將Html結(jié)構(gòu)設(shè)計(jì)成如下結(jié)構(gòu)：

<div class="infinite-list-container">
    <div class="infinite-list-phantom"></div>
    <div class="infinite-list">
      <!-- item-1 -->
      <!-- item-2 -->
      <!-- ...... -->
      <!-- item-n -->
    </div>
</div>

let once = 20
  let ul = document.getElementById('testTime')
  function loopRender (curTotal, curIndex) {
    if (curTotal <= 0) return
    let pageCount = Math.min(curTotal, once) // 每頁(yè)最多20條
    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)

let once = 20
  let ul = document.getElementById('container')
  // 循環(huán)加載渲染數(shù)據(jù)
  function loopRender (curTotal, curIndex) {
    if (curTotal <= 0) return
    let pageCount = Math.min(curTotal, once) // 每頁(yè)最多20條
    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)

let once = 20 
  let ul = document.getElementById('container')
  // 循環(huán)加載渲染數(shù)據(jù)
  function loopRender (curTotal, curIndex) {
    if (curTotal <= 0) return
    let pageCount = Math.min(curTotal, once) // 每頁(yè)最多20條
    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)

其實(shí)同時(shí)渲染十萬(wàn)條數(shù)據(jù)這個(gè)情況還是比較少見(jiàn)的，就當(dāng)做個(gè)了解吧。