因為 DOM 性能瓶頸，大型列表存在難以克服的性能問題。 因此，就有了 “局部渲染” 的優化方案，這就是虛擬列表的核心思想。

虛擬列表的實現，需要重點關注的問題一有以下幾點：

下面逐一分解說明。

可視區域計算

可視區域的計算，就是使用當前視口的高度、當前滾動條滾過的距離，得到一個可視區域的坐標區間。 算出可視區域的坐標區間之后，在去過濾出落在該區間內的列表項，這個過程，列表項的坐標也是必須能算出的。

思考以下情況，

根據這些條件，我們可以計算出，當前可視區域為第 11 項至第 20 項。

01 - 05，可視區域上方
+----+-----------+--------
| 06 | 100 ~ 120 |
+----+-----------+
| 07 | 120 ~ 140 |
+----+-----------+
| 08 | 140 ~ 160 | 可視區域
+----+-----------+
| 09 | 160 ~ 180 |
+----+-----------+
| 10 | 180 ~ 200 |
+----+-----------+--------
  11 - N，可視區域下方

這是因為列表項高度是固定的，我們可以通過簡單的四則運算算出已經滾動過去的 100px 中，已經滾動走了 5 個列表項，因此可視區域是從第 6 項開始，而視口高度為 100px，能容納 100 / 20 即 5 個條目。

上面例子的情況非常簡單，也不存在性能問題，因此實際上并沒有展開討論的價值。 而還有另一種復雜很多的情況，那就是，列表項高度不固定，根據內容決定高度。

此時，我們就沒辦法直接使用四則運算一步到位算出可視區域對應的條目了。

而必須實現一種機制，記錄所有列表項的坐標，再通過檢查列表項是否落在視口內。

下面重點討論該問題。

列表項的坐標

列表項的坐標，可以通過以下公式定義：

<列表項 top 坐標值> = <上一項 top 坐標值> + <上一項的高度值>

第一個列表項的 top 坐標值為 0，因此，只要記錄所有列表項目的高度，即可算出任意一個列表項的 top 坐標值。 于是，問題就變成了，必須使用某種方式來存儲每個條目的高度。

我想，最容易想到的方案就是，使用一個數組，一一對應地存儲列表每項的高度值。 然后獲取特定項的坐標值時，提取第一項到目標項的值，進行累加運算。參考下面代碼進行理解：

// 假設使用該數組存儲列表每一項的高度const itemHeightStore = [20, 20, 20, 20, 20]// 使用該方法，可以算出列表中指定項的 top 坐標值const getTop = (index) => { let sum = 0 while (index--) sum += itemHeightStore[index] || 0 return sum}// 第一項getTop(0) // 0// 第二項getTop(1) // 20// ...