améliorer la boucle sur un grand tableau d'objets

Vous pouvez revenir à la structure d'origine et pré-calculer la même structure d'aide côté client. Pour l'optimiser davantage, vous pourriez peut-être mettre à jour paresseusement la structure du "cache" en anticipant les actions de l'utilisateur (et si le cache n'était pas encore rempli, bloquer l'interface utilisateur jusqu'à ce que vous le fassiez).

l'objectif est de montrer les trains se déplaçant sur une carte

Et c'est ainsi que nous devrions commencer:

Regroupez les horaires par train . Cela peut être fait en O (n), et cela n'augmentera pas la taille des datasrts (cela pourrait donc être fait sur le backend également, voir ci-dessous pour des considérations).

Maintenant, pourquoi cela aide-t-il? Cela réduit la taille des ensembles de données que nous devons beaucoup filtrer. Les 11 000 événements ne concernent probablement que quelques centaines de trains.

Ensuite, commencez par générer ce qui suit:

• Une carte (identifiant de train - train) des trains actuellement affichés

• Un tableau trié de trains par heure de départ

• Un tableau trié de trains par heure d'arrivée.

• La position du dernier train parti à la position actuelle du curseur

• La position du dernier train est arrivée à la position actuelle du curseur

Désormais, chaque fois que le curseur bouge, tout ce que vous avez à faire est:

• Déplacez la position de départ sur le tableau des départs, pour chaque train que vous franchissez, ajoutez le train à la carte et au DOM.

• Déplacez la position d'arrivée sur le tableau des arrivées, pour chaque train que vous franchissez, retirez le train de la carte et du DOM.

(Si le curseur se déplace vers l'arrière, la procédure est l'inverse).

Ensuite, pour chaque train actuellement affiché, ajustez la position si nécessaire . p>

Ce sera beaucoup plus rapide, j'imagine que pour un pas de curseur typique, ~ 20 trains se déplacent, ~ 1 part, ~ 1 arrive, donc vous devez faire 22 mises à jour , au lieu de 11000.

---

Divers autres conseils d'optimisation que j'ai écrits pendant que la question évoluait, ils pourraient toujours être utiles, bien que non pertinents si le conseil supérieur était appliqué

Le code que vous utilisez pour grouper sur le backend n'est vraiment pas optimisé car il .filter est le tableau data 120 fois . Voici comment vous pouvez faire cela en itérant une seule fois sur l'ensemble de données, puis pour chaque entrée, parcourez toutes les minutes auxquelles elle appartient et ajoutez-la ici:

   const toMinutes = date => {
     const [hours, mins] = date.split(":");
     return (+hours * 60 + +mins);
   };
   const fromMinutes = minutes => {
     const mins = minutes % 60;
     const hours = (minutes - mins) / 60;
     return hours + ":" + mins;
   };

   const START = "tp_org_r", END = "tp_des_r";
   const groupByDate = { /* "01:20": [...] */ };

   for(const elm of data) {
     const start = toMinutes(elm[START]);
     const end = toMinutes(elm[END]);
     for(let minutes = start; minutes <= end; minutes++) {
        const id = fromMinutes(minutes);
        if(!groupByDate[id]) groupByDate[id] = [];
        groupByDate[id].push(elm);
     }
 }

Mais cette approche a un gros défaut: il duplique massivement les éléments . Je ne ferais jamais cela sur le backend, car cela augmentera vraiment la taille du fichier envoyé au frontend, et ainsi vous perdrez le léger avantage de performances que vous pourriez gagner en augmentant le temps nécessaire pour envoyer les données au frontend. De plus, comme il semble qu'il n'y a aucun moyen de le mettre en cache sur le backend, vous devez donc refaire les calculs pour chaque client. En d'autres termes: vous perdez votre temps de calcul (vous payez le serveur, le client est "gratuit") et vous n'en tirez aucun bénéfice (les calculs sur le serveur ont du sens si vous ( 1) réduire la quantité de données envoyées au client, diminuant ainsi le temps de chargement de la page et / ou (2) calculer les données une fois, puis les diffuser à des centaines de clients).

Vous pouvez le faire sur le frontend, mais je ne pense pas que la construction de ce lookuptable en vaille la peine (car filtrer la date est en fait assez facile).

Au lieu de cela, envoyez tous les éléments au frontend, puis filtrez-y. Si l'ensemble de données est ordonné, le filtrage est simple et vous n'avez même pas à parcourir les 11000 éléments:

1) Triez le tableau par heure de début.

2) Trouvez le première position où l'heure de début est plus petite que la durée du curseur moins la durée maximale (je suppose que ce n'est que quelques minutes). Faites de même pour la dernière position où l'heure de fin est plus grande que la durée du curseur plus la durée maximale. Grâce à cela, nous éliminons beaucoup de ces 11000, la plage résultante peut alors être facilement filtrée.

L'avantage n'est peut-être pas encore clair, mais si le curseur bouge , il ne nous reste plus qu'à déplacer les positions de départ et de fin. En d'autres termes, nous n'avons pas besoin de regarder à nouveau les 11000 éléments, nous déplaçons simplement la plage légèrement vers la droite / gauche, puis nous filtrons cette petite plage.

Mais dans ma première approche, c'est une fois chaque changement de curseur, mais si l'utilisateur fait glisser rapidement le curseur, l'interface utilisateur ne devient pas fluide

C'est assez facile à réparer. Si l'utilisateur glisse rapidement, il ne veut pas et n'a pas besoin de voir les événements sur lesquels il glisse . Procédez comme suit:

(1) Lorsque l'utilisateur commence à glisser, masquez les éléments actuels et affichez une sorte d'indicateur de chargement.

(2) Lorsque l'utilisateur arrête de glisser, attendez un peu de temps, puis générez les résultats filtrés.

Grâce à cela, la page ne se rendra que deux fois , ce qui réduira considérablement la quantité de calculs effectués, et l'interface utilisateur est beaucoup plus fluide ( car la mise à jour se produit lorsqu'aucune interaction de l'utilisateur n'est effectuée, donc même si le calcul est lourd, l'utilisateur ne le remarquera pas car il n'y a pas de lag).

Pour de meilleures performances, vous devez savoir que le gros problème est le rendu et non filtrage.

Votre problème vient de l'utilisation de l'objet Date et des dates de comparaison. pour de meilleures performances, vous pouvez d'abord convertir vos données du type Date en type Number (en millisecondes), puis comparer les nombres les uns avec les autres. J'ai changé votre code et vous pouvez voir l'exemple.

Et sachez que les performances des boucles en javascript sont différentes les unes des autres:

J'ai comparé la somme d'éléments aléatoires de 10k en utilisant pour , for-of, while, forEach et réduire. L'exécution des tests 10000 fois a renvoyé les résultats suivants:

<script src="https://momentjs.com/downloads/moment.min.js"></script>

et vous pouvez utiliser Object.keys et Object.values ​​ et Array.map et Array.filter de la bonne manière si vous en avez besoin.

let formatTrips = function (data) {
    var arr = [], i, j;
    for(i=0; i<24; i++) {
        for(j=0; j<60; j++) {
            arr.push(i*60*60*1000 + j*60*1000 );
        }
    }

    var start = new Date().getTime();
    const dataWithTimeStamp = data.map((d) => (
      {
        ...d,
        tp_org_r: (new Date(d.startingTime)).valueOf() % (24*60*60*1000), // just get time in miliseconds
        tp_des_r: (new Date(d.endingTime)).valueOf() % (24*60*60*1000) // just get time in miliseconds
      }
    ));

    var arrFormated = arr.map((time)=> {
        let schedulesFiltered=[];
        schedulesFiltered = dataWithTimeStamp.filter(elm => (elm.tp_org_r <= time && elm.tp_des_r >= time));
        //console.log(schedulesFiltered)
        return schedulesFiltered

    });
    var end = new Date().getTime();
    var time = end - start;
    console.log('Execution time: ' + time);
}

// Create sample data
const sampleData = [];
const date2019ToMiliseconds = (new Date("2019-01-01")).valueOf();
const miliSecondsFrom2019 = (new Date()).valueOf() - date2019ToMiliseconds;
for(let i = 0;i<10000; i++){
  const randomDate = new Date(Math.floor(date2019ToMiliseconds+Math.random()*miliSecondsFrom2019)).valueOf(); // Random Date between 2019-01-01 till now
   sampleData.push({
      "startingTime": randomDate,
      "endingTime":randomDate + (1000*60)
   })
}
formatTrips(sampleData);

For Loop, average loop time: ~10 microseconds
For-Of, average loop time: ~110 microseconds
ForEach, average loop time: ~77 microseconds
While, average loop time: ~11 microseconds
Reduce, average loop time: ~113 microseconds