摘要：本文同步自我的博客園如果要在前端呈現(xiàn)大量的數(shù)據(jù)，一般的策略就是分頁。為了解決這個(gè)問題，我們讓數(shù)據(jù)是顯示一部分，這一部分是可視區(qū)域的內(nèi)容，以及上下各一屏一屏指的是高度所能容納的區(qū)域大小的緩存內(nèi)容。

本文同步自我的博客園：http://hustskyking.cnblogs.com

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

本文的策略是，顯示三屏數(shù)據(jù)，其他的移除 DOM。

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

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

為了解決這個(gè)問題，我們讓數(shù)據(jù)是顯示一部分，這一部分是 Container 可視區(qū)域的內(nèi)容，以及上下各一屏（一屏指的是 Container 高度所能容納的區(qū)域大小）的緩存內(nèi)容。如果 Container 比較高，也可是只緩存半屏，緩存的原因是，在我們滾動(dòng)滾動(dòng)條的時(shí)候，js 需要時(shí)間來拼湊字符串（或者創(chuàng)建 Node ），這個(gè)時(shí)候?yàn)g覽器還來不及渲染，所以會(huì)出現(xiàn)臨時(shí)的空白，這種體驗(yàn)是相當(dāng)不好的。

demo 在 IE 7、8 有 bug，請讀者自己修復(fù)吧~

代碼：

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

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

Container 可以容納的 Data 數(shù)目為 num = height / delta，Container 頂部第一個(gè)節(jié)點(diǎn)的索引值為

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

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

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

通過上面的計(jì)算，從 start 到 end 將節(jié)點(diǎn)一次插入到 Container 中，并且將最后一個(gè)節(jié)點(diǎn)插入到 DOM 中。

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

這里解釋下為什么要插入最后一個(gè)節(jié)點(diǎn)，插入節(jié)點(diǎn)的方式是：

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);
}

可以看到我們給插入的節(jié)點(diǎn)都加了一個(gè) top 屬性，最后一個(gè)節(jié)點(diǎn)的 top 是最大的，只有把這個(gè)節(jié)點(diǎn)插入到 DOM 中，才能讓滾動(dòng)條拉長，讓人感覺放了很多的數(shù)據(jù)。

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

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

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

本文主要是敘述大數(shù)據(jù)加載的一點(diǎn)基本原理，程序可能有 bug，也有很多地方可以優(yōu)化，了解下算法就行了。