DOM如何渲染大量千級萬級數據頁面也不會卡住-面試題

一個例子是創建 WebQQ 的 QQ 好友列表。列表中通常會有成百上千個好友，如果一個好友
用一個節點來表示，當我們在頁面中渲染這個列表的時候，可能要一次性往頁面中創建成百上千
個節點。
在短時間內往頁面中大量添加 DOM 節點顯然也會讓瀏覽器吃不消，我們看到的結果往往就
是瀏覽器的卡頓甚至假死。代碼如下：

var ary = [];
for ( var i = 1; i <= 1000; i++ ){
    ary.push( i ); // 假設 ary 裝載了 1000 個好友的數據
};
var renderFriendList = function( data ){
    for ( var i = 0, l = data.length; i < l; i++ ){
        var div = document.createElement( 'div' );
        div.innerHTML = i;
        document.body.appendChild( div );
    }
};
renderFriendList( ary );

這個問題的解決方案之一是下面的 timeChunk 函數， timeChunk 函數讓創建節點的工作分批進
行，比如把 1 秒鐘創建 1000 個節點，改爲每隔 200 毫秒創建 8 個節點。

// data 數據  func 插入操作  interval 時間週期  該週期插入的項目數
var timeChunk = function(data, func, interval, count){
    var obj, timer;
    
    var start = function(){
        for(var i = 0; i < Math.min(count || 1, data.length); i++){
            obj = data.shift();
            func(obj);
        }
    };
    
    return function(){
        timer = setInterval(function(){
            if(data.length === 0){
                return clearInterval(timer);
            }
            
            start();
        }, interval);
    };
}


var data= [];
for ( var i = 1; i <= 1000; i++ ){
    data.push( i );
};

renderFriendList = timeChunk(data, function(n){
    var div = document.createElement( 'div' );
    div.innerHTML = n;
    document.body.appendChild( div );
}, 200, 10);

renderFriendList();

歡迎關注進階大前端IT圈公衆號，即時獲取更多前端技術，還可獲取百人的前端羣，裏面很多知名互聯網前端朋友，前端技術更新太快，不能被落伍淘汰，共同學習，共同進步！