記錄--虛擬滾動探索與封裝-有解無憂

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

1. 介紹

什么是虛擬滾動？虛擬滾動就是通過js控制大串列中的dom創建與銷毀，只創建可視區域dom，非可視區域的dom不創建，這樣在渲染大串列中的資料時，只創建少數的dom，提高性能，

2. 分類

在虛擬滾動技術中，虛擬滾動可以分為定高虛擬滾動和非定高虛擬滾動，定高指的是每一個串列元素都是高度固定的，非定高指的是每一個串列元素的高度是動態變化的，定高虛擬滾動的實作比較容易，而且性能高；非定高虛擬滾動的失效稍微復雜，而且性能比定高虛擬滾動要差一些，無論是定高虛擬滾動還是非定高虛擬滾動，都是虛擬滾動技術的分類，對于大資料渲染都有很大的性能提升，

下面我們逐步分析兩種虛擬滾動技術的實作，并且封裝成常用的組件，選用技術堆疊是vue，改成react或angular也是十分方便的，

3. 定高虛擬滾動

3.1 封裝思路

虛擬滾動的結構如下圖：

虛擬滾動由圖三部分組成，渲染容器container，渲染資料list和撐開滾動條的容器clientHeightRef，渲染容器就是我們需要渲染的區域，渲染資料就是可視區域的資料，撐開滾動條的容器代表所有資料渲染出來后的高度，

由于我們只渲染可視區域的資料，那么渲染容器的滾動條高度是不正確的，需要撐開滾動條的容器來撐開實際的高度，

html結構如下：

<div >
      <!-- 這里是用于撐開高度，出現滾動條用 -->
      <div  ref="clientHeightRef" :style="{ height: list.length*itemHeight + 'px' }"></div>
      <ul v-if="list.length > 0"  ref="contentRef">
        <li
          :style="{ height: itemHeight + 'px' }"
          
          v-for="(item, index) in virtualRenderData"
          :key="index"
        >
          {{item}}
        </li>
      </ul>
  </div>

每一條資料的高度是this.itemHeight=10,渲染容器的高度是this.containerHeight=300,那么一屏需要渲染的資料是count=Math.ceil(this.containerHeight / this.itemHeight)，

假設我們我們的需要的資料list如下：

const list = [
    {id:1,name:1},
    {id:2,name:3},
    ....
]

那么撐開滾動條的容器的高度是this.list.length*this.itemHeight，

我們給渲染容器加一個監聽滾動的事件，主要是獲取當前滾動的scrollTop，用來更新渲染可視區域的資料，如下，我們封裝一個更新渲染可視區域的資料函式：

const update = function(scrollTop = 0){
    this.$nextTick(() => {
        // 獲取當前可展示數量
        const count = Math.ceil(this.containerHeight / this.itemHeight)
        const start = Math.floor(scrollTop / this.itemHeight)
        // 取得可見區域的結束資料索引
        const end = start + count
        // 計算出可見區域對應的資料，讓 Vue.js 更新
        this.virtualRenderData = https://www.cnblogs.com/smileZAZ/archive/2023/03/01/this.list.slice(start, end)
    })
}

當滾動條滾動的時候，我們需要從list中截取當前渲染容器剛剛好可以渲染的資料，達到像真的滾動的了一樣，上面的滾動函式雖然已經更新了渲染可視區域的資料，但是當我們滾動的時候會發現內容塊被滾動到了上面，再次滾動的時候直接就不見了，這是由于滾動條是由撐開滾動條的容器撐開的，渲染的內容高度只有容器的高度，所以它只會在頂部出現，滾動的時候自然就不會動，效果如下：

所以當我們滾動滾動的時候，還需要將渲染內容往對應的方向偏移，比如偏移的y方向距離就是scrollTop的距離，

this.$refs.contentRef.style.webkitTransform = `translate3d(0, ${scrollTop * this.itemHeight}px, 0)`

這樣就能達到滾動的時候，渲染內容始終保持在渲染容器的頂部，好像真的隨著滾動條滾動而滾動，

但是實際上這樣的效果是不好的，因為我們更新的顆粒度是按每一條資料來分的，而不是按scrollTop來進行的，所以渲染內容的偏移量也需要按照每一條資料的顆粒度來進行更新，代碼如下：

const update = function(scrollTop = 0){
    this.$nextTick(() => {
        // 獲取當前可展示數量
        const count = Math.ceil(this.containerHeight / this.itemHeight)
        const start = Math.floor(scrollTop / this.itemHeight)
        // 取得可見區域的結束資料索引
        const end = start + count
        // 計算出可見區域對應的資料，讓 Vue.js 更新
        this.virtualRenderData = https://www.cnblogs.com/smileZAZ/archive/2023/03/01/this.list.slice(start, end)
        + this.$refs.contentRef.style.webkitTransform = `translate3d(0, ${start * this.itemHeight}px, 0)`
    })
}

上面的代碼基本可以滿足基本的使用，但是當我們滾動比較快的時候，渲染區域底部會出現瞬間留白，是因為dom沒有及時的渲染，原因是我們只渲染剛剛好一屏的資料，

為了減少留白的出現，我們應該預渲染幾條資料bufferCount，增加渲染快取區間：

const update = function(scrollTop = 0){
    this.$nextTick(() => {
        // 獲取當前可展示數量
        const count = Math.ceil(this.containerHeight / this.itemHeight)
        const start = Math.floor(scrollTop / this.itemHeight)
        // 取得可見區域的結束資料索引
        + const end = start + count + bufferCount
        // 計算出可見區域對應的資料，讓 Vue.js 更新
        this.virtualRenderData = https://www.cnblogs.com/smileZAZ/archive/2023/03/01/this.list.slice(start, end)
        this.$refs.contentRef.style.webkitTransform = `translate3d(0, ${start * this.itemHeight}px, 0)`
    })
}

3.2 完整代碼和演示地址

定高虛擬滾動演示地址：atdow.github.io/learning-co…

定高虛擬滾動代碼地址：github.com/atdow/learn…

4. 非定高虛擬滾動

4.1 封裝思路

看了上面的定高虛擬滾動，我們對虛擬滾動技術已經有了基本的了解，對于非定高虛擬滾動，需要解決的最大問題就是每一條需要渲染的資料的高度是不確定，這樣我們就很難確定一屏需要渲染多少條數據，

為了確定一屏需要渲染多少條資料，我們需要假設每條需要渲染資料的高度為一個假設值estimatedItemHeight=40，定義一個用于存盤每一條渲染資料高度的陣列itemHeightCache=[]，定義一個用于存盤每一條渲染資料距離頂部距離的陣列itemTopCache=[]（用于提升性能用，后面會做解釋），以及定義撐開滾動條滾動容器高度的變數scrollBarHeight，

假設我們我們的需要的資料list如下：

const list = [
    {id:1,name:1},
    {id:2,name:3},
    ....
]

我們先初始化itemHeightCache、itemTopCache和scrollBarHeight：

const estimatedTotalHeight = this.list.reduce((pre, current, index) => {
        // 給每一項一個虛擬高度
        this.itemHeightCache[index] = { isEstimated: true, height: this.estimatedItemHeight }
        // 給每一項距頂部的虛擬高度
        this.itemTopCache[index] = index === 0 ? 0 : this.itemTopCache[index - 1] + this.estimatedItemHeight
        return pre + this.estimatedItemHeight
      }, 0)
// 串列總高
this.scrollBarHeight = estimatedTotalHeight

有了上面的初始化資料，我們就可以進行第一次假設渲染了：

// 更新資料函式
const update = function() {
      const startIndex = this.getStartIndex()
      // 如果是奇數開始，就取其前一位偶數
      if (startIndex % 2 !== 0) {
        this.startIndex = startIndex - 1
      } else {
        this.startIndex = startIndex
      }
      this.endIndex = this.getEndIndex()
      this.visibleList = this.list.slice(this.startIndex, this.endIndex)
      // 移動渲染區域
      if (this.$refs.contentRef) {
        this.$refs.contentRef.style.webkitTransform = `translate3d(0, ${this.itemTopCache[this.startIndex]}px, 0)`
      }
}

// 獲取開始索引
cont getStartIndex = function() {
      const scrollTop = this.scrollTop
      // 每一項距頂部的距離
      const arr = this.itemTopCache
      let index = -1
      let left = 0,
        right = arr.length - 1,
        mid = Math.floor((left + right) / 2)
      // 判斷 有可回圈項時進入
      while (right - left > 1) {
        /*
        二分法：拿每一次獲得到的 距頂部距離 scrollTop 同 獲得到的模擬每個串列據頂部的距離作比較，
        arr[mid] 為虛擬列高度的中間項
        不斷while 回圈，利用二分之一將陣列分割，減小搜索范圍
        直到最終定位到 目標index 值
      */
        // 目標數在左側
        if (scrollTop < arr[mid]) {
          right = mid
          mid = Math.floor((left + right) / 2)
        } else if (scrollTop > arr[mid]) {
          // 目標數在右側
          left = mid
          mid = Math.floor((left + right) / 2)
        } else {
          index = mid
          return index
        }
      }
      index = left
      return index
}

// 獲取結束索引
const getEndIndex = function() {
      const clientHeight = this.$refs.scrollbarRef?.clientHeight //渲染容器高度
      let itemHeightTotal = 0
      let endIndex = 0
      for (let i = this.startIndex; i < this.dataList.length; i++) {
        if (itemHeightTotal < clientHeight) {
          itemHeightTotal += this.itemHeightCache[i].height
          endIndex = i
        } else {
          break
        }
      }
      endIndex = endIndex
      return endIndex
}

update函式是用來更新需要渲染的資料的，核心邏輯就是獲取截取資料的開始索引getStartIndex和結束索引getEndIndex以及移動被渲染資料容器，

當滾動條滾動的時候，我們就將scrollTop存起來，這個時候從itemTopCache中獲取距離scrollTop最近的索引，就是我們需要截取資料的開始索引，因為itemTopCache存盤的就是每一條資料距離頂部的距離，所以直接取就行了，這也是為什么我們要先存盤itemTopCache，因為滾動的時候，我們都要從itemTopCache中使用二分法查找，不然就得從itemHeightCache中從頭到尾一個一個遍歷去對比查找，在資料量大的時候容易造成卡頓，

getEndIndex核心就是從itemHeightCache（存盤每一條渲染資料高度的陣列）中一條一條拿資料，從startIndex開始拿，一直拿到剛好填滿渲染容器高度即可，就可以得到我們的截取資料的最后索引（實際上這樣是不夠完美的，后面繼續講解），

移動被渲染資料容器的技巧和上面定高虛擬滾動類似，這里不做太多解釋，

在初始化完itemHeightCache、itemTopCache和scrollBarHeight后，我們就可以手動調一次update函式進行第一次渲染了（this.update()），使用的都是預設的假定值，

在說更新之前，我們需要先定義一下子組件，也就是每一條被渲染資料的容器，這樣當資料被更新渲染之后(需要通知暴露index和height引數)，就可以得到真實的dom的高度，通知我們去更新itemHeightCache、itemTopCache和scrollBarHeight，更新邏輯如下：

const updateItemHeight = function({ index, height }) {
      // 每次創建的時候都會拋出事件，因為沒有處理異步的情況，所以必須每次高度變化都需要更新
      // dom元素加載后得到實際高度 重新賦值回去
      this.itemHeightCache[index] = { isEstimated: false, height: height }
      // 重新確定串列的實際總高度
      this.scrollBarHeight = this.itemHeightCache.reduce((pre, current) => {
        return pre + current.height
      }, 0)
      // 更新itemTopCache
      const newItemTopCache = [0]
      for (let i = 1, l = this.itemHeightCache.length; i < l; i++) {
        // 虛擬每項距頂部高度 + 實際每項高度
        newItemTopCache[i] = this.itemTopCache[i - 1] + this.itemHeightCache[i - 1].height
      }
      // 獲得每一項距頂部的實際高度
      this.itemTopCache = newItemTopCache
}

dom更新完之后，初始化預定值計算出來需要的渲染資料就真的被渲染了，我們這個時候就可以再次呼叫update函式再次更新資料，自動更新彌補到渲染真實一屏需要渲染的資料了，

const updateItemHeight = function({ index, height }) {
      // 每次創建的時候都會拋出事件，因為沒有處理異步的情況，所以必須每次高度變化都需要更新
      // dom元素加載后得到實際高度 重新賦值回去
      this.itemHeightCache[index] = { isEstimated: false, height: height }
      // 重新確定串列的實際總高度
      this.scrollBarHeight = this.itemHeightCache.reduce((pre, current) => {
        return pre + current.height
      }, 0)
      // 更新itemTopCache
      const newItemTopCache = [0]
      for (let i = 1, l = this.itemHeightCache.length; i < l; i++) {
        // 虛擬每項距頂部高度 + 實際每項高度
        newItemTopCache[i] = this.itemTopCache[i - 1] + this.itemHeightCache[i - 1].height
      }
      // 獲得每一項距頂部的實際高度
      this.itemTopCache = newItemTopCache
      + this.update() // 自動更新
}

當滾動的時候，存盤scrollTop，手動呼叫update函式，將會自動更新，整個程序如下：

html結構如下：

 <div  ref="scrollbarRef" @scroll="onScroll">
    <div  :style="{ height: scrollBarHeight + 'px' }"></div>
    <!-- 串列總高 -->
    <ul ref="contentRef">
      <Item
        v-for="item in visibleList"
        :data="https://www.cnblogs.com/smileZAZ/archive/2023/03/01/item.data"
        :index="item.index"
        :key="item.index"
        @update-height="updateItemHeight"
      >
        {{item}}
      </Item>
    </ul>
</div>

跟定高虛擬滾動不同點就是，需要定義子組件，同時傳遞給子組件index索引，visibleList需要定義為[{index:xxx,data:xxx}]的資料格式，將index給儲存起來，這樣在子組件更新的時候才能獲取到index，

4.2 調優

在上面的代碼中，基本可以實作基礎的非定高虛擬滾動了，但是還是無法應對復雜的情況，

我們舉一個極端的例子：當一條資料的真實高度是200，其他資料的真實高度高度是10，渲染容器的高度是300，在第一次假設渲染并且更新后我們的itemHeightCache、itemTopCache和scrollBarHeight后，我們將會得到這樣的結果，渲染容器中渲染的是資料是第一條資料和剩下的9條資料，剛剛好渲染一屏資料，這樣是沒有任何問題的，

當滾動條滾動的時候，我們滾動了20px的距離，獲取到的startIndex應該是0，因為距離頂部最近的資料是第一條資料，這個就會造成下部空白20px的區域，當滾動了80px的時候，獲取到的startIndex也是0，原理同上，下部造成了空白區域將會是恐怖的80px，

為了解決空白局域，靠緩沖渲染bufferCount是不夠的，就算bufferCount給了4，多四條資料也無法填充滿空白區域，調大bufferCount容易造成性能問題，也不能確定bufferCount到底給多少才能合適，所以需要調整getEndIndex的邏輯，不再是從startIndex獲取到剛好填充滿渲染區域，而是從startIndex獲取到剛好填充滿渲染區域+statIndex的高度，這樣無論startIndex的高度是多少，我們都能填充滿整個渲染容器，因為空白區域最大高度就是startIndex的高度，同時我們在endIndex上加上bufferCount，就可以達到完美的效果，

// 獲取結束索引
const getEndIndex = function() {
      + const whiteHeight = this.scrollTop - this.itemTopCache[this.startIndex] // 出現留白的高度
      const clientHeight = this.$refs.scrollbarRef?.clientHeight //渲染容器高度
      let itemHeightTotal = 0
      let endIndex = 0
      for (let i = this.startIndex; i < this.dataList.length; i++) {
        + if (itemHeightTotal < clientHeight+whiteHeight) {
          itemHeightTotal += this.itemHeightCache[i].height
          endIndex = i
        } else {
          break
        }
      }
      + endIndex = endIndex + bufferCount
      return endIndex
}

3.3 完整代碼和演示地址

非定高虛擬滾動演示地址：atdow.github.io/learning-co…

非定高虛擬滾動代碼地址：github.com/atdow/learn…

4 總結

有了非定高虛擬滾動組件，不就是可以應對各種情況了，為什么還需要做定高虛擬滾動組件？

在上面的封裝思路中，我們能清晰知道非定高虛擬滾動組件是用假定值進行渲染的，在真實渲染過后才會彌補更新，而定高虛擬滾動所有東西都是確定的，所以定高虛擬滾動的優勢就是比非定高虛擬滾動性能高，缺點就是只能應對每一條渲染資料是固定的情況，

定高虛擬滾動：

優點：性能比非定高虛擬滾動高
缺點：只能應用于每一條渲染資料高度是固定的場景

非定高虛擬滾動：

優點：性能比定高虛擬滾動低
缺點：能應用于每一條渲染資料高度是動態的場景

本文轉載于:

https://juejin.cn/post/7204450037031092283

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/545490.html

標籤：其他

上一篇：第124篇: 期約Promise

下一篇：web基礎