性能优化：一次性返回大量数据渲染DOM

例如：创建Web QQ的好友列表，列表中通常会有成百上千个好友，如果一个好友用一个节点来表示，当在页面中渲染这个列表的是，可能要一次性地往页面中创建成百上千个节点。在段时间内往页面只能往页面中大量添加DOM节点会造成浏览器的卡顿甚至假死。

var ary = [];
for ( var i = 1; i <= 1000; i++ ){
    ary.push( i ); // 假设 ary 装载了 1000 个好友的数据
};
var renderFriendList = function( data ){
    for ( var i = 0, i < data.length; ; i++ ){
        var div = document.createElement( 'div' );
        div.innerHTML = i;
        document.body.appendChild( div );
    }
};

renderFriendList( ary );

解决方案：

1. 分页；
2. 先加载部分数据，当滚动到底部的时候再加载部分数据（比如：小程序的上拉刷新）；
3. 可以创建一个timeChunk函数，timeChunk函数让创建节点的工作分批进行，比如把一秒钟创建1000个节点，改为每隔200毫秒创建8个节点。

   //timeChunk函数接收三个参数，第一个参数是创建节点时需要用到的数据，第二个参数是封装了创建节点逻辑的函数，第三个参数表示每一批创建的节点数量。
   var timeChunk = function(ary,fn,count){
       var t;
       
       var start = function(){
       	//Math.min(count || 1,ary.length)：可能执行到最后一次或者本身ary的长度就小于8，则取值为ary.length，其他时候取值"count || 1"；
       	//"count || 1"：如果没有传入count，则取值1，否则取值count
           for(var i= 0 ;i < Math.min(count || 1,ary.length);i++){
           	//遍历指定的次数，每次都截取ary的第一个值去创建节点
               var obj = ary.shift();
               fn(obj);
           }
       }
       
       //每隔200毫秒执行一次创建节点的方法
       return function(){
           t= setInterval(function(){
           	//如果全部节点都已经被创建好
               if(ary.length === 0){
                  return  clearInterval(t);
               }
               start();
           },200)
       }
   }
   

   测试：

   var ary = [];
   for(var i = 1;i<=1000;i++){
       ary.push(i);
   }
   var renderFriendList = timeChunk(ary,function(n){
       var div = document.createElement('div');
       div.innerHTML= n;
       document.body.appendChild(div);
   })
   renderFriendList();