百萬數據如何在前端快速流暢顯示？

如果要在前端呈現大量的數據，一般的策略就是分頁。前端要呈現百萬數據，這個需求是很少見的，但是展示千條稍微復雜點的數據，這種需求還是比較常見，只要內存夠，javascript 肯定是吃得消的，計算幾千上萬條數據，js 效率根本不在話下，但是 DOM 的渲染瀏覽器扛不住，CPU 稍微搓點的電腦必然會卡爆。

本文的策略是，顯示三屏數據，其他的移除 DOM。

本文地址：http://www.cnblogs.com/hustskyking/p/million-data-show-in-front-end.html，轉載請注明源地址。

一、 策略

下面是我簡單勾畫的一個草圖，我們把一串數據放到一個容器當中，這串數據的高度（Data List）肯定是比 Container 的高度要高很多的，如果我們一次性把數據都顯示出來，瀏覽器需要花費大量的時間來計算每個 data 的位置，並且依次渲染出來，整個過程中 JS 並沒有花費太多的時間，開銷主要是 DOM 渲染。

                          /==============> Data List
        |     ....     | /
        +--------------+/
+=======|=====data=====|========+
|       +--------------+        |
|       |     data     |        |
|       +--------------+        |\
|       |     data     |        | \
|       +--------------+        |  \======> Container
+=======|=====data=====|========+    
        +--------------+
        |     ....     |        Created By Barret Lee

為了解決這個問題，我們讓數據是顯示一部分，這一部分是 Container 可視區域的內容，以及上下各一屏（一屏指的是 Container 高度所能容納的區域大小）的緩存內容。如果 Container 比較高，也可是只緩存半屏，緩存的原因是，在我們滾動滾動條的時候，js 需要時間來拼湊字符串（或者創建 Node ），這個時候瀏覽器還來不及渲染，所以會出現臨時的空白，這種體驗是相當不好的。

二、Demo

注：demo 在 IE 7、8 有 bug，請讀者自己修復吧~

代碼：

<title>百萬數據前端快速流暢顯示</title>
<style type="text/css">
#box {position: relative; height: 300px; width: 200px; border:1px solid #CCC; overflow: auto}
#box div { position: absolute; height: 20px; width: 100%; left: 0; overflow: hidden; font: 16px/20px Courier;}
</style>

<div id="box"></div>

<script type="text/javascript">
var total = 1e5
  , len = total
  , height = 300
  , delta = 20
  , num = height / delta
  , data = [];

for(var i = 0; i < total; i++){
    data.push({content: "item-" + i});
}

var box = document.getElementById("box");
box.onscroll = function(){
    var sTop = box.scrollTop||0
      , first = parseInt(sTop / delta, 10)
      , start = Math.max(first - num, 0)
      , end = Math.min(first + num, len - 1)
      , i = 0;

    for(var s = start; s <= end; s++){
        var child = box.children[s];
        if(!box.contains(child) && s != len - 1){
            insert(s);
        }
    }

    while(child = box.children[i++]){
        var index = child.getAttribute("data-index");
        if((index > end || index < start) && index != len - 1){
            box.removeChild(child);
        }
    }

};

function insert(i){
    var div = document.createElement("div");
    div.setAttribute("data-index", i);
    div.style.top = delta * i + "px";
    div.appendChild(document.createTextNode(data[i].content));
    box.appendChild(div);
}

box.onscroll();
insert(len - 1);
</script>

可以戳這個 demo，或者看這里 https://gist.github.com/barretlee/9744160

三、算法說明

1. 計算 start 和 end 節點

        |              |
+=======|==============|========+——
|    ↓——+--------------+        | ↑
| delta |              |        |
|    ↑——+--------------+        | height
|       |              |        |
|       +--------------+        | ↓
+=======|==============|========+——  
        |              |

Container 可以容納的 Data 數目為 num = height / delta，Container 頂部第一個節點的索引值為

 var first = parseInt(Container.scrollTop / delta);

由於我們上下都有留出一屏，所以

var start = Math.max(first - num, 0);
var end = Math.min(first + num, len - 1);

2. 插入節點

通過上面的計算，從 start 到 end 將節點一次插入到 Container 中，並且將最后一個節點插入到 DOM 中。

// 插入最后一個節點
insert(len - 1);
// 插入從 start 到 end 之間的節點
for(var s = start; s <= end; s++){
    var child = Container.children[s];
    // 如果 Container 中已經有該節點，或者該節點為最后一個節點則跳過
    if(!Container.contains(child) && s != len - 1){
        insert(s);
    }
}

這里解釋下為什么要插入最后一個節點，插入節點的方式是：

function insert(i){
    var div = document.createElement("div");
    div.setAttribute("data-index", i);
    div.style.top = delta * i + "px";
    div.appendChild(document.createTextNode(data[i].content));
    Container.appendChild(div);
}

可以看到我們給插入的節點都加了一個 top 屬性，最后一個節點的 top 是最大的，只有把這個節點插入到 DOM 中，才能讓滾動條拉長，讓人感覺放了很多的數據。

3. 刪除節點

為了減少瀏覽器的重排（reflow），我們可以隱藏三屏之外的數據。我這里為了方便，直接給刪除掉了，后續需要再重新插入。

while(child = Container.children[i++]){
    var index = child.getAttribute("data-index");
    // 這里記得不要把最后一個節點給刪除掉了
    if((index > end || index < start) && index != len - 1){
        Container.removeChild(child);
    }
}

當 DOM 加載完畢之后，觸發一次 Container.onscroll()，然后整個程序就 OK 了。

四、小結

本文主要是敘述大數據加載的一點基本原理，程序可能有 bug，也有很多地方可以優化，了解下算法就行了。