JavaScript affiche des dizaines de milliers d'exemples de codes de données à la fois

Cet article présente principalement la méthode d'implémentation de JavaScript affichant des dizaines de milliers de données à la fois. Il a une très bonne valeur de référence. Voyons cela avec l'éditeur

Un collègue a déclaré à tout le monde qu'il avait vu une question d'interview sur Internet : « Si le backend transmet des dizaines de milliers de données au serveur. front-end, qu'en est-il du front-end ? " Rendu sur la page ? ", comment répondre ? En conséquence, le bureau était en effervescence et nos collègues ont commencé à en discuter. Vous et moi avons exprimé nos projets un par un. Certains ont dit qu'il devrait être directement bouclé pour générer du HTML et inséré dans la page ; certains ont dit que la pagination devrait être utilisée ; certains ont dit que l'intervieweur était un idiot, comment l'arrière-plan pouvait-il transmettre des dizaines de milliers de données au front-end ; ? J'y ai réfléchi attentivement. Après un certain temps, peu importe que le back-end soit assez stupide pour envoyer des dizaines de milliers de données au front-end. Si cela se produit, une fois que le front-end a obtenu les données, il convertira directement les données en une chaîne HTML et les insérera via les opérations DOM. Lorsque vous atteindrez la page, cela entraînera inévitablement un ralentissement de la page. Pour cette raison, j'ai également écrit une démo pour la tester.

$.get("data.json", function (response) {
 //response里大概有13万条数据
 loadAll( response );
});
function loadAll(response) {
 var html = "";
 for (var i = 0; i < response.length; i++) {
  var item = response[i];
  html += "<li>title:" + item.title + " content:" + item.content + "</li>";
 }
 $("#content").html(html);
}

data.json contient environ 130 000 éléments de données. Après avoir obtenu les données via ajax, les données sont affichées de la manière la plus simple et la plus brute. le navigateur Chrome, actualisez la page pour afficher les données. Je compte silencieusement dans mon esprit. L'ensemble du processus prend environ 5 secondes. La pause est très évidente. J'ai observé grossièrement le temps d'exécution du code et j'ai constaté que le processus de boucle pour générer des chaînes ne prend pas trop de temps. Le goulot d'étranglement des performances est le processus d'insertion de chaînes HTML dans les documents, qui est $("#content") . html(html); Après tout, lors de l'exécution de ce code, 130 000 éléments li doivent être insérés dans le document. Il est raisonnable que la vitesse de rendu des pages soit lente.

Étant donné que le rendu de 130 000 éléments de données à la fois entraînera un chargement lent de la page, nous ne pouvons pas restituer autant de données à la fois, mais les restituer par lots, par exemple 10 000 éléments à la fois, et les compléter en 13 fois, comme ceci Cela peut améliorer la vitesse de rendu de la page. Cependant, si ces 13 opérations sont exécutées dans le même processus d’exécution de code, il semble que non seulement cela ne puisse pas résoudre le problème de mauvaise page bloquée, mais cela compliquera le code. La meilleure solution à des problèmes similaires dans d'autres langages consiste à utiliser le multi-threading. Bien que Javascript ne dispose pas de multi-threading, les deux fonctions setTimeout et setInterval peuvent avoir des effets similaires au multi-threading. Par conséquent, pour résoudre ce problème, setTimeout peut entrer en jeu. La fonction de la fonction setTimeout peut être considérée comme le démarrage d'un nouveau thread pour terminer la tâche après l'heure spécifiée.

$.get("data.json", function (response) {
  //response里大概有13万条数据
  loadAll( response );
});

function loadAll(response) {
  //将13万条数据分组， 每组500条，一共260组
  var groups = group(response);
  for (var i = 0; i < groups.length; i++) {
    //闭包， 保持i值的正确性
    window.setTimeout(function () {
      var group = groups[i];
      var index = i + 1;
      return function () {
        //分批渲染
        loadPart( group, index );
      }
    }(), 1);
  }
}

//数据分组函数（每组500条）
function group(data) {
  var result = [];
  var groupItem;
  for (var i = 0; i < data.length; i++) {
    if (i % 500 == 0) {
      groupItem != null && result.push(groupItem);
      groupItem = [];
    }
    groupItem.push(data[i]);
  }
  result.push(groupItem);
  return result;
}
var currIndex = 0;
//加载某一批数据的函数
function loadPart( group, index ) {
  var html = "";
  for (var i = 0; i < group.length; i++) {
    var item = group[i];
    html += "<li>title:" + item.title + index + " content:" + item.content + index + "</li>";
  }
  //保证顺序不错乱
  while (index - currIndex == 1) {
    $("#content").append(html);
    currIndex = index;
  }
}

Le flux d'exécution général du code ci-dessus est

Utilisez ajax pour obtenir les données à traiter, un total de. 130 000 pièces

2. Regroupez les tableaux en 500 éléments chacun, un total de 260 groupes

3. Parcourez ces 260 groupes de données, traitez chaque groupe de données séparément et utilisez setTimeout. fonction pour démarrer un nouveau thread d'exécution (de manière asynchrone). Empêcher le blocage du thread principal en raison du rendu de grandes quantités de données.

Il y a ce code dans la fonction loadPart

while (index - currIndex == 1) {
 $("#content").append(html);
 currIndex = index;
}

pour assurer la cohérence de l'ordre lorsque le html est finalement inséré dans le document dans différents threads . Cela empêche les codes exécutés en même temps de s'usurper les uns les autres lors de l'insertion de HTML.

En exécutant de cette manière, la page apparaîtra instantanément sans aucun temps d'attente. Lors du passage de synchrone à asynchrone, bien que la consommation globale de ressources du code augmente, la page peut répondre instantanément. De plus, l'environnement d'exécution du front-end est l'ordinateur de l'utilisateur, d'où l'amélioration de l'expérience utilisateur apportée par une légère perte de performances. ça vaut relativement le coup.

Bien que les situations mentionnées dans les exemples soient presque impossibles à se produire dans des environnements réels, il existe toujours des scénarios plausibles dans notre travail quotidien. L'utilisation des idées de traitement à l'intérieur peut nous aider à résoudre le problème.

ps : setTimeout n'est pas vraiment multi-thread, mais pour plus de commodité d'expression, le mot thread est emprunté

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!