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圈公衆號，即時獲取更多前端技術，還可獲取百人的前端羣，裏面不少知名互聯網前端朋友，前端技術更新太快，不能被落伍淘汰，共同窗習，共同進步！