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圈公众号，即时获取更多前端技术，还可获取百人的前端群，里面不少知名互联网前端朋友，前端技术更新太快，不能被落伍淘汰，共同窗习，共同进步！