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 );

// 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

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,

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.

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.

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.