前端虛擬列表【虛擬捲簾】的實現

書接上文，在以前的 聊聊前端開發中的長列表 中，筆者對「可視區域渲染」的列表進行了介紹，並寫了一個簡化的例子來展示如何實現。這種列表通常叫作 Virtual List，在本文中會使用「虛擬列表」來指代。在本文中，筆者會把上篇文章中的簡化例子一步步強化成一個相對通用、性能優異的虛擬列表組件，旨在講清楚虛擬列表的實現思路。閱讀本文不須要閱讀上一篇文章，但代碼是使用 Vue.js 來實現的，因此你須要有 Vue.js 的使用經驗。另外，提供了各個步驟的 JSFiddle，若是有不懂的地方，建議經過修改 JSFiddle 在線運行調試。

實現思路

在講解下面的內容以前，先對虛擬列表作一個簡單的定義。

由於 DOM 元素的建立和渲染須要的時間成本很高，在大數據的狀況下，完整渲染列表所須要的時間不可接收。其中一個解決思路就是在任何狀況下只對「可見區域」進行渲染，能夠達到極高的初次渲染性能。

虛擬列表指的就是「可視區域渲染」的列表，重要的基本就是兩個概念：

• 可滾動區域：假設有 1000 條數據，每一個列表項的高度是 30，那麼可滾動的區域的高度就是 1000 * 30。當用戶改變列表的滾動條的當前滾動值的時候，會形成可見區域的內容的變動。
• 可見區域：好比列表的高度是 300，右側有縱向滾動條能夠滾動，那麼視覺可見的區域就是可見區域。

實現虛擬列表就是處理滾動條滾動後的可見區域的變動，其中具體步驟以下：

1. 計算當前可見區域起始數據的 startIndex
2. 計算當前可見區域結束數據的 endIndex
3. 計算當前可見區域的數據，並渲染到頁面中
4. 計算 startIndex 對應的數據在整個列表中的偏移位置 startOffset，並設置到列表上

建議參考下圖理解一下上面的步驟：

最簡單的例子

這個章節會講述如何把上面步驟變成代碼，讓這個邏輯在瀏覽器裏真正的運行起來。

爲了讓這個例子足夠簡單，作了一個設定：每一個列表項的高度都是 30px。在這個約定下，核心 JavaScript 代碼不超過 10 行，可是能夠完整的實現可見區域的渲染和更新。

咱們首先要考慮的是虛擬列表的 HTML、CSS 如何實現，添加了這麼幾個樣式：

• 列表元素（.list-view）使用相對定位
• 使用一個不可見元素（.list-view-phantom）撐起這個列表，讓列表的滾動條出現
• 列表的可見元素（.list-view-content）使用絕對定位，left、right、top 設置爲 0

CSS 代碼以下：

.list-view{height:400px;overflow:auto;position:relative;border:1pxsolid#aaa;}.list-view-phantom{position:absolute;left:0;top:0;right:0;z-index:-1;}.list-view-content{left:0;right:0;top:0;position:absolute;}.list-view-item{padding:5px;color:#666;line-height:30px;box-sizing:border-box;}
複製代碼

HTML 代碼以下（先忽略其中的事件、變量綁定）：

<template><divclass="list-view"@scroll="handleScroll"><divclass="list-view-phantom":style="{         height: contentHeight      }"></div><divref="content"class="list-view-content"><divclass="list-view-item":style="{          height: itemHeight + 'px'        }"v-for="item in visibleData">
        {{ item.value }}
      </div></div></div></template>
複製代碼

JavaScript 代碼以下：

exportdefault{name:'ListView',props:{data:{type:Array,required:true},itemHeight:{type:Number,default:30}},computed:{contentHeight(){returnthis.data.length*this.itemHeight+'px';}},mounted(){this.updateVisibleData();},data(){return{visibleData:[]};},methods:{updateVisibleData(scrollTop){scrollTop=scrollTop||0;constvisibleCount=Math.ceil(this.$el.clientHeight/this.itemHeight);conststart=Math.floor(scrollTop/this.itemHeight);constend=start+visibleCount;this.visibleData=this.data.slice(start,end);this.$refs.content.style.webkitTransform=`translate3d(0, ${start*this.itemHeight}px, 0)`;},handleScroll(){constscrollTop=this.$el.scrollTop;this.updateVisibleData(scrollTop);}}}
複製代碼

1. 渲染可見區域的數據是 Vue.js 完成的，使用的是 visibleData 這個數組中的元素

2. 其中虛擬列表的更新邏輯是 updateVisibleData 這個方法，筆者對這個方法加了一些註釋：

   updateVisibleData(scrollTop){scrollTop=scrollTop||0;constvisibleCount=Math.ceil(this.refs.content.style.webkitTransform=translate3d(0, ${start*this.itemHeight}px, 0);// 把可見區域的 top 設置爲起始元素在整個列表中的位置（使用 transform 是爲了更好的性能）}

3. 爲了讓虛擬列表能夠正確的出現滾動條，使用了 Vue.js 的計算屬性 contentHeight 來計算滾動區域的真正高度

這個最簡單的實現能夠經過 這裏 在線運行，建議對代碼進行一些修改而後運行，加深對上文的理解。

去掉高度限制

最簡單實現中存在每一個元素高度相同的限制，若是打破這個限制，代碼該如何實現？

例子中使用了 itemHeight 屬性來決定列表項的高度，有兩個選擇能夠實現列表項的動態高度：

1. 添加一個數組類型的 prop，每一個列表項的高度經過索引來得到
2. 添加一個獲取列表項高度的方法，給這個方法傳入 item 和 index ，返回對應列表項的高度

很明顯第二種方案更靈活一點，因此增長了一個 itemSizeGetter 屬性，用來獲取每一個列表項的高度。

1. 增長 itemSizeGetter 屬性，代碼以下：

   itemSizeGetter:{type:Function}

2. 由於每一行的高度是不同的，因此 contentHeight 的算法須要進行更新，更新後的代碼以下：

   contentHeight(){const{data,itemSizeGetter}=this;lettotal=0;for(leti=0,j=data.length;i<j;i++){total+=itemSizeGetter.call(null,data[i],i);}returntotal;}

3. 上一個例子中，計算但是區域的起始索引和結束索引只須要使用 itemHeight 進行一些簡單的計算。在這個例子裏面，須要經過 scrollTop 來計算出這個位置的元素索引，因此增長了一個方法叫 findNearestItemIndex，實現代碼以下：

   findNearestItemIndex(scrollTop){const{data,itemSizeGetter}=this;lettotal=0;for(leti=0,j=data.length;i<j;i++){constsize=itemSizeGetter.call(null,data[i],i);total+=size;if(total>=scrollTop||i===j-1){returni;}}return0;}

4. 同理，某個列表項在列表中的 top 以前也能夠經過索引簡單的計算出來，如今須要增長一個方法來計算，實現代碼以下：

   getItemSizeAndOffset(index){const{data,itemSizeGetter}=this;lettotal=0;for(leti=0,j=Math.min(index,data.length-1);i<=j;i++){constsize=itemSizeGetter.call(null,data[i],i);if(i===j){return{offset:total,size};}total+=size;}return{offset:0,size:0};}

5. updateVisibleData 方法根據上面的修改作了一個簡單的更新，代碼以下：

   updateVisibleData(scrollTop){scrollTop=scrollTop||0;conststart=this.findNearestItemIndex(scrollTop);constend=this.findNearestItemIndex(scrollTop+this.refs.content.style.webkitTransform=translate3d(0, ${this.getItemSizeAndOffset(start).offset}px, 0);}

增長了 itemSizeGetter 的實現能夠經過 這裏 在線運行，你能夠修改 itemSizeGetter 的返回值，看看是否能正常響應。

緩存計算結果

雖然上個例子實現了列表項的動態高度，可是每一個列表項目的尺寸、偏移計算沒有任何緩存，在初次渲染、滾動更新時 itemSizeGetter 會被重複調用，性能並不理想。爲了優這個性能，須要把尺寸、偏移信息進行一個緩存，在下次時候的時候直接從緩存中取得結果。

在常規狀況下，用戶的滾動是從頂部開始的，而且是連續的。能夠採起一個很是簡單的緩存策略，記錄最後一次計算尺寸、偏移的 index 。

1. 把這個變量叫作 lastMeasuredIndex，默認值爲 -1；存儲緩存結果的變量叫作 sizeAndOffsetCahce，類型爲對象，實現代碼以下：

   data(){return{lastMeasuredIndex:-1,startIndex:0,sizeAndOffsetCahce:{},...};}

2. 緩存列表項高度的計算結果主要是修改 getItemSizeAndOffset 這個方法，增長緩存後的代碼以下：

   getItemSizeAndOffset(index){const{lastMeasuredIndex,sizeAndOffsetCahce,data,itemSizeGetter}=this;if(lastMeasuredIndex>=index){returnsizeAndOffsetCahce[index];}letoffset=0;if(lastMeasuredIndex>=0){constlastMeasured=sizeAndOffsetCahce[lastMeasuredIndex];if(lastMeasured){offset=lastMeasured.offset+lastMeasured.size;}}for(leti=lastMeasuredIndex+1;i<=index;i++){constitem=data[i];constsize=itemSizeGetter.call(null,item,i);sizeAndOffsetCahce[i]={size,offset};offset+=size;}if(index>lastMeasuredIndex){this.lastMeasuredIndex=index;}returnsizeAndOffsetCahce[index];}

3. findNearestItemIndex 方法中的還在使用 itemSizeGetter 來獲取元素大小，咱們在這裏能夠修改爲使用 getItemSizeAndOffset 來獲取，修改後的代碼以下：

   findNearestItemIndex(scrollTop){const{data,itemSizeGetter}=this;lettotal=0;for(leti=0,j=data.length;i<j;i++){constsize=this.getItemSizeAndOffset(i).size;// ...}return0;}

使用了緩存以後的代碼能夠點擊 這裏 在線運行，若是以爲性能並無明顯的改進，能夠把數組的大小改爲 20000 或者 50000 試試。

優化 contentHeight 的計算

若是你給 itemSizeGetter 加入一行 console.log，你會發現初次渲染的時候 contentHeight 會在第一次把全部列表項的 itemSizeGetter 執行一遍。

爲了解決這個問題，須要引入另一個屬性 estimatedItemSize。這個屬性的含義是爲那些還沒計算高度的元素進行一個預估，那麼 contentHeight 就等於緩存過的列表項的高度和 + 未緩存過的列表項的數量 * estimatedItemSize。

1. 首先須要爲組件增長這個屬性，默認值爲 30，代碼以下：

   estimatedItemSize:{type:Number,default:30}

2. 由於須要得知計算太高度的列表項的高度和，須要增長方法 getLastMeasuredSizeAndOffset，代碼以下：

   getLastMeasuredSizeAndOffset(){returnthis.lastMeasuredIndex>=0?this.sizeAndOffsetCahce[this.lastMeasuredIndex]:{offset:0,size:0};}

3. 根據上面的算法修改後的代碼以下：

   contentHeight(){const{data,lastMeasuredIndex,estimatedItemSize}=this;letitemCount=data.length;if(lastMeasuredIndex>=0){constlastMeasuredSizeAndOffset=this.getLastMeasuredSizeAndOffset();returnlastMeasuredSizeAndOffset.offset+lastMeasuredSizeAndOffset.size+(itemCount-1-lastMeasuredIndex)estimatedItemSize;}else{returnitemCountestimatedItemSize;}}

優化過 contentHeight 的實現能夠經過 這裏 在線運行，你能夠爲 itemSizeGetter 屬性增長 console.log，來查看 itemSizeGetter 是如何運行的。

優化已緩存結果的搜索性能

使用過緩存的虛擬列表實際上還有優化的空間，好比 findNearestItemIndex 的搜索方式是順序查找的，時間複雜度爲 O(N)。實際上列表項的計算結果自然就是一個有序的數組，可使用二分查找來優化已緩存的結果的搜索性能，把時間複雜度下降到 O(lgN) 。

1. 爲組件增長 binarySearch 方法，代碼以下：

   binarySearch(low,high,offset){letindex;while(low<=high){constmiddle=Math.floor((low+high)/2);constmiddleOffset=this.getItemSizeAndOffset(middle).offset;if(middleOffset===offset){index=middle;break;}elseif(middleOffset>offset){high=middle-1;}else{low=middle+1;}}if(low>0){index=low-1;}if(typeofindex==='undefined'){index=0;}returnindex;}

這個二分查找和普通的二分查找略有不一樣，區別在於在任何狀況下都不會返回 -1，能夠思考下爲何這個邏輯會是這樣。

1. 修改 findNearestItemIndex 方法，對於已緩存的結果使用二分查找，代碼以下：

   findNearestItemIndex(scrollTop){const{data,itemSizeGetter}=this;constlastMeasuredOffset=this.getLastMeasuredSizeAndOffset().offset;if(lastMeasuredOffset>scrollTop){returnthis.binarySearch(0,this.lastMeasuredIndex,scrollTop);}else{// ...}return0;}

使用了二分查找的實現能夠經過 這裏 在線運行，從效果上來說和上個例子是沒有區別的。

優化未緩存結果的搜索性能

未緩存過的結果的搜索依然是順序搜索的，對於未緩存過的結果的搜索優化有兩個思路：

1. 一次查找多條的數量，一個合理的數值是 contentHeight / estimatedSize ，找到超過本身查找結果的 index，而後使用二分查找
2. 按指數數量查找，好比 一、二、四、八、1六、32… 的順序來查找範圍，而後使用二分查找

筆者選擇了第二種方式，這個搜索算法的名稱爲 Exponential Search，這個算法的搜索過程能夠參考下圖：

1. 增長 exponentialSearch 方法，代碼以下：

   exponentialSearch(scrollTop){letbound=1;constdata=this.data;conststart=this.lastMeasuredIndex>=0?this.lastMeasuredIndex:0;while(start+bound<data.length&&this.getItemSizeAndOffset(start+bound).offset<scrollTop){bound=bound*2;}returnthis.binarySearch(start+Math.floor(bound/2),Math.min(start+bound,data.length),scrollTop);}

這個算法與標準的 Exponential Search 也略有不一樣，主要的區別是不會從頭進行搜索，會從 lastMeasuredIndex 的位置開始搜索。

1. 修改 findNearestItemIndex 方法，代碼以下：

   findNearestItemIndex(scrollTop){const{data,itemSizeGetter}=this;constlastMeasuredOffset=this.getLastMeasuredSizeAndOffset().offset;if(lastMeasuredOffset>scrollTop){returnthis.binarySearch(0,this.lastMeasuredIndex,scrollTop);}else{returnthis.exponentialSearch(scrollTop);}}

優化後的實現能夠經過 這裏 在線運行，能夠爲代碼中加一下 console.log 觀察搜索的執行流程。

參考資料

在寫這篇文章的過程當中，筆者參考了不少的開源項目，也參考了不少的文章，對我幫助比較大的有如下這些：

• React Tiny Virtual List
• React Virtualized
• estimatedRowHeight 自適應 Cell

寫在最後

若是你有意瞭解如何實現一個虛擬列表，但願這篇文章能對你有所幫助。

對於一個靜態數據的虛擬列表，能夠作的優化基本上這篇文章已經介紹了。若是你對這個主題依然頗有興趣，能夠嘗試爲虛擬列表增長這麼兩個功能：

1. 根據渲染結果動態的更新列表項的高度
2. 數據更新後讓緩存失效，並儘量讓失效緩存的範圍最小

感謝你有耐心讀完這篇文章，若是文章中有任何錯誤，或者你有任何疑問，請直接在文章評論區留言。