從原理到實踐：如何在Taro中構建高效且易用的虛擬列表
前言
最近在小程序的工作中有許多場景是大數據量的列表渲染，這種渲染場景如果不對它進行優化會非常耗性能，常見的優化手段有：分片渲染與虛擬列表，恰好Taro官方也有提供虛擬列表組件，但有同事反饋這個組件并不好用，體驗也不好，白屏非常明顯。
在虛擬列表中滾動過快造成的白屏其實是必然的，關鍵在于我們怎么去優化它，把白屏比例盡量降到最低，這其中還得權衡性能與體驗，想要白屏越少，那么你要渲染的節點就越多，性能自然也就越差。反之，你想要性能好，那么白屏就會增加。
接下來，自己動手實現一個虛擬列表，支持以下功能：
- 元素定高，可支持滾動到指定元素位置
- 元素不定高，無需關心子元素的高度，組件內自動計算
- 可支持一次性加載所有數據，也支持分頁加載數據
原理介紹
虛擬列表的原理其實就是：只渲染可視區內的元素，對于非可視區的元素不進行渲染，這樣就可以提高長列表的渲染性能。
但是為了在滾動過程盡可能的降低白屏率，我們可以多渲染幾屏元素
圖片
如上圖，原理大概是這樣：
- 將數據處理成每一屏一個渲染單位，用二維數組存儲
- 使用Taro.createIntersectionObserver監聽每一屏內容是否在可視區，在可視區直接渲染，不在可視區則使用該屏真實高度進行占位。高度怎么來？可以定高，也可以不定高，不定高的話就是等每一屏渲染完成后記錄渲染高度即可，兩種都有實現，具體可以看下面的實現方法
這樣的話，每次真實渲染的節點數就遠小于列表全部渲染的節點數，可以極大地提高頁面渲染性能。
實現
處理數據
首先將外部的數據處理成二維數組，方便后續按屏渲染
// 處理列表數據，按規則分割
let initList: any[] = []; // 初始列表(備用)
const dealList = (list: any[]) => {
const segmentNum = props?.segmentNum; // 每頁顯示數量
let arr: any[] = [];
const _list: any[] = [];
list.forEach((item, index) => {
arr.push(item);
if ((index + 1) % segmentNum === 0) {
_list.push(arr);
arr = [];
}
});
// 處理余數
const restList = list.slice(_list.length * segmentNum);
if (restList.length) {
_list.push(restList);
}
initList = _list;
};計算渲染高度
在處理完數據后，接著我們就是取出每一屏的數據進行渲染，接著計算并存儲渲染后每一屏所占用的高度，在后續滾動過程中，如果該屏內容離開可視區，我們就可以將該屏的內容替換成對應高度進行渲染占位，這樣就可以減少真實渲染的節點數。
// 計算每一頁數據渲染完成后所占的高度
const setheight = (list: any[], pageIndex?: number) => {
const index = pageIndex ?? renderPageIndex.value;
const query = Taro.createSelectorQuery();
query.select(`.inner_list_${index}`).boundingClientRect();
query.exec((res) => {
if (list?.length) {
pageHeightArr.value.push(res?.[0]?.height); // 存儲每一屏真實渲染高度
}
});
observePageHeight(pageIndex); // 監聽頁面高度
};監聽每一屏是否在可視區
上面提到的當每一屏的內容離開可視區就需要將該屏內容替換為占位高度，這個功能的實現就需要借助Taro.createIntersectionObserver這個API來完成。
這里需要注意的是relativeToViewport可以自定義監視區域，如果想要滾動過程減少白屏概率，那么可以將監視區域擴大，但渲染性能也會隨之變差，所有這里可以按自己的業務需要考量
const observePageHeight = (pageIndex?: number) => {
const index = pageIndex ?? renderPageIndex.value;
observer = Taro.createIntersectionObserver(
currentPage.page as any,
).relativeToViewport({
top: props?.screenNum * pageHeight,
bottom: props?.screenNum * pageHeight,
});
console.log('observer', observer);
// console.log("index", `.inner_list_${index}`);
observer?.observe(`.inner_list_${index}`, (res) => {
console.log(`.inner_list_${index}`, res.intersectionRatio);
if (res.intersectionRatio <= 0) {
// 當沒有交集時，說明當前頁面已經不在視口內，則將該屏數據修改為該屏高度進行占位
towList.value[index] = {
height: pageHeightArr.value[index],
};
} else {
// 當有交集時，說明當前頁面在視口內
if (!towList.value[index]?.length) {
towList.value[index] = initList[index];
}
}
});
};觸底監聽
UI層，使用了scrollView組件來渲染列表，真實列表項渲染提供插槽給外部自行處理
<scroll-view
v-if="list?.length"
class="list"
:scrollY="true"
:showScrollbar="false"
:lowerThreshold="lowerThreshold"
:scrollTop="scrollTop"
@scrollToLower="renderNext"
:enhanced="true"
:bounces="false"
:enablePassive="true"
:style="{ height: height }"
>
<view
:class="[`inner_list_${pageIndex}`]"
:id="`inner_list_${pageIndex}`"
v-for="(page, pageIndex) in towList"
:key="pageIndex"
>
<template v-if="page?.length > 0">
<view
:id="`item_${pageIndex}_${index}`"
v-for="(item, index) in page"
:key="index"
>
<slot v-if="item" name="listItem" :item="item"></slot>
</view>
</template>
<view v-else :style="{ height: `${pageHeightArr[pageIndex]}px` }">
</view>
</view>
<!-- 底部自定義內容 -->
<slot name="renderBottom"></slot>
</scroll-view>通過lowerThreshold監聽觸底操作，將二維數組每一項取出來渲染，當每一頁的內容都渲染完后，那么頁面最終的所有節點將會是：真實列表內容 + 占位高度，后續只需要依賴上一步驟的監聽就可以完成真實內容渲染與占位高度之間的切換。
// 渲染下一頁
const renderNext = () => {
// if (!towList.value[pageIndex]?.length) {
// // 無數據
// }
renderPageIndex.value += 1; // 更新當前頁索引
if (renderPageIndex.value >= initList.length) {
// 已經到底
return;
}
towList.value[renderPageIndex.value] = initList[renderPageIndex.value];
Taro.nextTick(() => {
setheight(props?.list);
});
};這樣基本就完成一個虛擬列表組件，我們來看看效果：
// 渲染數據
const list = ref(
new Array(10000).fill(0).map((_, i) => {
return {
label: `第 ${i} 章`,
value: i,
isLock: false,
time: "2023-01-12 16:07",
type: "chapter",
};
}),
); // 列表數據這里模擬了10000條數據來測試：
圖片
初始渲染只有兩頁內容，每一頁渲染20條。
當我們滾動頁面時，就會根據監聽來加入渲染內容，并且將不在可視區的內容替換成占位高度。
圖片
但是我們的業務還需要定位功能，定位到某一章高亮，這里就需要計算滾動高度了，雖然scrollView組件提供了scrollIntoView屬性，可以使列表滾動到對應子元素位置，但是我發現只有它的第一層子元素能夠生效，對于他的孫子元素并不生效。
定高滾動至指定位置
由于我這里是按頁來渲染的，需要定位到的元素并不是它的第一層子元素，所以這個方法在這里并不適用，最終只能計算滾動高度來實現。
const formateList = (list: any[]): void => {
const scrollToIndex = props?.scrollToIndex; // 滾動到指定位置
const itemHeight =
itemRenderHeight.value || (props?.itemHeight ?? 0) * (pageWidth / 375); // 每一項的真實渲染高度
const segmentNum = props?.segmentNum; // 每頁顯示數量
dealList(list);
if (itemHeight && scrollToIndex !== undefined) {
// 定高，可滾動至指定位置
// console.log("scrollToIndex", scrollToIndex);
const startIndex = Math.floor(scrollToIndex / segmentNum); // 找到當前索引所在的頁面
console.log("startIndex", startIndex);
renderPageIndex.value = startIndex; // 更新當前頁索引
const pageHeight = segmentNum * itemHeight; // 一屏的高度
console.log("pageHeight", pageHeight, itemHeight);
// readyList
for (let i = 0; i < startIndex; i++) {
pageHeightArr.value[i] = pageHeight;
towList.value[i] = {
height: pageHeight,
};
}
towList.value[startIndex] = initList[startIndex];
if (startIndex + 1 < initList.length) {
towList.value[startIndex + 1] = initList[startIndex + 1];
}
Taro.nextTick(() => {
for (let i = 0; i < startIndex; i++) {
// observePageHeight(i);
setheight(list, i);
}
scrollTop.value = scrollToIndex * itemHeight;
console.log("scrollTop---", scrollTop.value);
});
} else {
// console.log("當前為不定高虛擬列表");
towList.value = initList.slice(0, 1);
Taro.nextTick(() => {
setheight(list);
});
}
};通過scrollToIndex計算出需要定位到的位置。
圖片
這里需要注意的是，在通過scrollToIndex找到該節點即將渲染在第幾頁，在這之前的幾頁都需要我們手動執行以下監聽每一屏是否在可視區，因為在這之后的頁都會通過觸底這一操作來執行監聽。如果少了這一步那么之前的這幾頁都會白屏，無真實數據渲染。
