解決前端渲染大量資料渲染效能問題 Part's 2- 虛擬捲軸 && 分段渲染

首頁關於我

Frontend

Mark Ku

April 16, 2020

1 min

定義問題

先前有對大資料渲染進行調察研究，得知瞬間大資料的渲染，會造成瀏覽器卡頓不回應，並得出可以透過分時渲染、捲動式渲染、虛擬列表，解決高併發渲染的問題。

而籃足球比賽比分列表，一遇假日就會有1000~2000 筆的比賽需要同時顯示，且依使用者需求，不能分頁顯示。

虛擬捲軸 VS 分段渲染

虛擬捲軸概念

設計概念，一開始先傳入高度，並將每一筆 item 的邊界 getBoundingClientRect 結果快取起來，直到渲染出來會重新計算快取高度，透過容器的卷軸事件，css translate3d，操作 y 軸，達到到平移捲動的效果，只有利用實體捲軸的高度及捲動事件，但不是透過實體捲軸顯示，因此這就是為什麼稱之虛擬捲軸的原因。

分段渲染概念

跟虛擬捲軸最大的差異，分段捲軸一開始採用的用的真實的實體捲軸，除buffer item 其餘都僅渲染空 div 支撐捲軸高度，直到捲到 buffer item 時，才開始渲染該區間的元件。

和傳統渲染效能比較

拿 1000 筆左右的數據，資料採用分段渲染和一般炫染效能做比較，因為要渲染的筆數少了，其實可以預期效能差了快1x倍之多。

一般渲染

分段渲染

使用方式

虛擬捲軸

<VirtualScroller
      :list="news"
      class="news-list-wrapper"

      :item-default-height="100"
      :uni-key="'id'"
      :enable-scroll-up="!isLastPage"
      :auto-load-more="true"
      :enable-scroll-down="true"
      :buffer-size="4"
      @scrollDown="scrollDown"
      @scrollUp="scrollUp"
    >
      <template #default="slotScope">
        <NewsCard
          :id="'news-' + slotScope.item[slotScope.uniKey]"
          :key="'news-' + slotScope.item[slotScope.uniKey]"
          :start="slotScope.start"
          :end="slotScope.end"
          :index="slotScope.index"
          :h="slotScope.height"
          :news="slotScope.item"
          :sport-id="slotScope.item.sportId"
        />
      </template>
</VirtualScroller>

分段捲軸

<PartRenderingScroller :scroll-element-id="'schedule-container'" :list="early.early" :item-default-height="100" uni-key="matchId" class="schedule-list p-l-20 p-r-20" :buffer-size="50">
            <template #default="slotScope">
              <ScheduleCard
                :id="'live-' + slotScope.item[slotScope.uniKey]"
                :key="'live-' + slotScope.item[slotScope.uniKey]"
                :class="{'p-t-20':slotScope.index===0}"
                :start="slotScope.start"
                :end="slotScope.end"
                :index="slotScope.index"
                :h="slotScope.height"
                :sport-id="sportId"
                :schedule="slotScope.item"
                :lottery-type="lotteryType"
              />
            </template>
</PartRenderingScroller>

如果要設計的東西，未來要套虛擬捲軸或分段捲軸時，可能要留意一下

分段捲軸 Desktop 網站架構是是 body 捲動，而 mobile 架構是 div 在捲動，可以透過傳入 scrollElementId 決定，沒傳則是 body 捲動
list 外容器，不能撐padding ，要由 item 去支撐撐高，item 最外層不能用 margin，因為用程式抓寬高抓不到 margin => 之後或許可以擴充用 window.getComputedStyle 來擴充支援 margin
list-item 的 css 要加 box-sizing: border-box; 不然不會把 padding 算進去
分段或虛擬捲軸，結構要用 div ，不能用 ul li 或table 等等，因為虛擬捲軸組件會額外渲染出額外的 div
為了重算高度，list item 一定要給 id ，並用減號分隔 => “{{type}}-{{id}}”
儘量避免和其他有用到捲軸的套件整合 better scroller、vant dialog、 swiper，因為每個套件有自己的生命週期，如果一定整合進來，可能自己擴充組件功能會比較不會衝突