正文

在前端開發(fā)中，大數(shù)據(jù)量列表渲染 一直是性能挑戰(zhàn)。假設(shè)我們有一個(gè) API 返回 1 萬(wàn)條數(shù)據(jù)，如果直接渲染到頁(yè)面，必然會(huì)導(dǎo)致嚴(yán)重卡頓甚至瀏覽器崩潰。

解決方案就是 —— 虛擬列表 (Virtual List) 。

虛擬列表的核心思想是：只渲染當(dāng)前視口范圍內(nèi)的元素，通過(guò)計(jì)算位置來(lái)“假裝”完整渲染。

常見實(shí)現(xiàn)方式主要有兩種：

1. Spacer 占位法
2. Absolute 定位法

本文將對(duì)比這兩種實(shí)現(xiàn)，并給出適用場(chǎng)景。

1. Spacer 占位法實(shí)現(xiàn)

思路：用 上空白塊 + 下空白塊 撐出容器總高度，視口中只渲染真實(shí)元素。

<div ref="root" @scroll="onScroll"
     :style="{ overflowY: 'auto', height: containerHeight + 'px' }">
  <!-- 上占位 -->
  <div :style="{ height: topSpacer + 'px' }"></div>

  <!-- 可見元素 -->
  <div v-for="item in visibleItems" :key="item.id" class="virtual-item">
    {{ item.text }}
  </div>

  <!-- 下占位 -->
  <div :style="{ height: bottomSpacer + 'px' }"></div>
</div>

優(yōu)點(diǎn)：

• 實(shí)現(xiàn)簡(jiǎn)單直觀
• 支持動(dòng)態(tài)高度（只要調(diào)整 spacer 值即可）

 缺點(diǎn)：

• 多余的 DOM（兩個(gè) spacer）
• 每次滾動(dòng)都要更新 topSpacer 和 bottomSpacer，涉及 回流 (Reflow)

2. Absolute 定位法實(shí)現(xiàn)

思路：先撐出一個(gè) 固定高度的容器，每個(gè) item 通過(guò) absolute + top 定位。

<div ref="root" @scroll="onScroll"
     :style="{ overflowY: 'auto', height: containerHeight + 'px', position: 'relative' }">
  
  <!-- 總高度容器 -->
  <div :style="{ height: totalHeight + 'px', position: 'relative' }">
    <div v-for="(item, idx) in visibleItems"
         :key="item.id"
         class="virtual-item"
         :style="{ position: 'absolute', top: (startIndex + idx) * itemHeight + 'px' }">
      {{ item.text }}
    </div>
  </div>
</div>

優(yōu)點(diǎn)：

• DOM 結(jié)構(gòu)更簡(jiǎn)潔（沒有 spacer）
• 絕對(duì)定位減少回流，性能更好
• 更適合大數(shù)據(jù)場(chǎng)景（5w+ 條時(shí)依然穩(wěn)定）

缺點(diǎn)：

• 對(duì)自適應(yīng)高度支持不友好（必須固定高度）
• position: sticky 等布局特性會(huì)失效

3. 性能對(duì)比

4. 實(shí)踐建議

• 固定高度 item → 推薦 Absolute 定位法
  簡(jiǎn)潔高效，減少 DOM & 回流開銷。
• 動(dòng)態(tài)高度 item → 推薦 Spacer 占位法
  更容易適配復(fù)雜布局。
• 超大數(shù)據(jù)量 (5w+ 條) → Absolute 更穩(wěn)

如果你要做一個(gè)通用組件，可以支持 兩種實(shí)現(xiàn)方式切換：

• 默認(rèn)使用 Absolute 定位法
• 如果檢測(cè)到 item 高度不一致，再切換到 Spacer 占位法

這種混合策略，正是一些成熟虛擬列表庫(kù)（如 react-window、vue-virtual-scroll-list）的做法。

5. 結(jié)論

• 兩種方案都能解決虛擬列表問(wèn)題
• Absolute 定位法 在固定高度場(chǎng)景下性能更優(yōu)
• Spacer 占位法 更靈活，能支持動(dòng)態(tài)高度

所以，選擇哪種方案要根據(jù) 業(yè)務(wù)需求 來(lái)定。

到此這篇關(guān)于Vue3實(shí)現(xiàn)高性能虛擬列表的兩種方法的文章就介紹到這了,更多相關(guān)Vue3高性能虛擬列表內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論