前言

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

為啥要用虛擬列表呢！

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

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

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

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

怎么弄？

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

虛擬列表的實(shí)現(xiàn)，實(shí)際上就是在首屏加載的時候，只加載可視區(qū)域內(nèi)需要的列表項(xiàng)，當(dāng)滾動發(fā)生時，動態(tài)通過計(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ù)，并渲染到頁面中
4、計(jì)算startIndex對應(yīng)的數(shù)據(jù)在整個列表中的偏移位置startOffset并設(shè)置到列表上

　　由于只是對可視區(qū)域內(nèi)的列表項(xiàng)進(jìn)行渲染，所以為了保持列表容器的高度并可正常的觸發(fā)滾動，將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) // 每頁最多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) // 每頁最多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) // 每頁最多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ù)據(jù)這個情況還是比較少見的，就當(dāng)做個了解吧。