百万数据如何在前端快速流畅显示？

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

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

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

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

// 插入最后一个节点
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);
}

while(child = Container.children[i++]){
    var index = child.getAttribute("data-index");
    // 这里记得不要把最后一个节点给删除掉了
    if((index > end || index < start) && index != len - 1){
        Container.removeChild(child);
    }
}