Comment rendre le DOM lors de la récupération de milliers de données à la fois ?

Question

//方法一：长度为l的数组切成n片，追加n次
$('.btn1').click(function(event) {
    var arr=['中国','美国','法国','英国','俄罗斯','朝鲜','瑞典','挪威','德国','意大利','南非','埃及','巴基斯坦','哈萨克斯坦','印度','越南','加拿大','澳大利亚'];
    var result=[];
    for(i=0;i<arr.length;i=i+3){
      result.push(arr.slice(i,i+3));
    }
    for(j=0;j<result.length;j++){
        var html='';
        for(k=0;k<result[j].length;k++){
            html+='<li>'+result[j][k]+'</li>';
        }
        console.log('html--'+html);
        $('.list').append(html);
    }
});

//方法二：长度为l的数组直接追加到dom中，循环l次
$('.btn2').click(function(event) {
    var arr=['中国','美国','法国','英国','俄罗斯','朝鲜','瑞典','挪威','德国','意大利','南非','埃及','巴基斯坦','哈萨克斯坦','印度','越南','加拿大','澳大利亚'];
    var html='';
    for(i=0;i<arr.length;i++){
      html+='<li>'+arr[i]+'</li>';
    }
    $('.list').append(html);
});

C'est le temps mesuré par Firebug : 8,3 millisecondes sont ajoutées en groupes (première méthode), 5,74 millisecondes sont ajoutées directement (méthode deux)

Personnellement, je pense que le regroupement réduira le rendu dom et évitera le décalage, mais le test Firebug Ce qui est sorti est contraire à ce que je pensais. Est-ce parce que les données sont trop petites ?

Answer 1

En fait, votre groupe ne partage pas vraiment la pression. Vous devez ajouter une minuterie et utiliser une fonction de partage de temps

.

Un exemple est la création d'une liste d'amis QQ pour WebQQ. Il y a généralement des centaines ou des milliers d'amis dans la liste. Si un ami est représenté par un nœud, lorsque nous affichons la liste sur la page, nous devrons peut-être créer des centaines ou des milliers de nœuds dans la page à la fois.
L'ajout d'un grand nombre de nœuds DOM à la page dans un court laps de temps va évidemment submerger le navigateur. Le résultat que nous voyons est souvent
un bégaiement ou même une animation suspendue du navigateur. Le code est le suivant :

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 p = document.createElement( 'p' );
        p.innerHTML = i;
        document.body.appendChild( p );
    }
};
renderFriendList( ary );

L'une des solutions à ce problème est la fonction timeChunk suivante. La fonction timeChunk permet d'effectuer le travail de création de nœuds par lots. Par exemple, au lieu de créer 1000 nœuds en 1 seconde, créez 8 nœuds toutes les 200 millisecondes.

// 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 p = document.createElement( 'p' );
    p.innerHTML = n;
    document.body.appendChild( p );
}, 200, 10);

renderFriendList();

Ce qui précède est extrait du livre Design Patterns

Answer 2

La raison pour laquelle votre solution est lente est la suivante,
$('.list').append(html);
Chaque fois que ce code est bouclé, l'élément dom doit être repositionné Autrement dit, $('.list') jquery doit obtenir le document .list, ce qui équivaut à
boucler N et devoir le localiser N fois. Ceci est bien sûr inefficace, donc votre deuxième option ne localise que le. élément une fois. L'efficacité est évidemment plus élevée après les avoir tous ajoutés,
Quant au partitionnement de votre tableau, il ne peut pas du tout être reflété dans js. Combien de fois devez-vous le boucler, mais cela n'améliore pas l'efficacité. , et vous ajoutez également une étape supplémentaire de partitionnement, js Il est monothread et l'efficacité est toujours la même quelle que soit la façon dont vous le divisez,

Answer 3

Obtenir des milliers de données en même temps montre qu'il y a quelque chose qui ne va pas dans la conception de votre API.

Answer 4

Personnellement, je pense que la première méthode consomme plus de mémoire et de temps (lorsque le volume est petit). Premièrement, les instructions ci-dessus s'additionnent et s'exécutent plus de fois. Deuxièmement, ajouter plusieurs fois n'est certainement pas aussi efficace que d'ajouter en une seule fois.

Answer 5

Des milliers de données obtenues en même temps ne seront pas toutes ajoutées en même temps.

L'approche raisonnable consiste à charger en fonction de l'importance et du caractère secondaire de l'affichage. Chargez d'abord ce que vous pouvez voir, puis insérez le reste dans la page par lots lorsque le processus est inactif.