Javascript Girl
  1. Javascript Girl
  3. Comment gérer les éléments DOM
Intereting Posts
Copier le texte de la zone de texte dans div avec des sauts de ligne Drag-n-Drop sur le contenuEditable elements Pouvons-nous donner le nom à html <table>? Différence entre MEAN.js et MEAN.io Comment passez-vous un seul devis via une URL? Polymer + requirejs: les attributs sur ont été liés aux données avant la mise à niveau du polymère de l'élément Comment fermer une fenêtre en utilisant jquery Composants de matériaux angulaires dans Ng-Sweet-Alert-2 Facebook like: Uncaught TypeError: Object # <an Object> n'a pas de méthode 'fournir' Une fonction JavaScript peut-elle se retourner? JavaScript: Référence une fonction portée locale comme objet Retourner la concaténation des rappels résultant appelée dans une boucle Existe-t-il une version de setTimeout qui renvoie une promesse ES6? Comment injecter dynamiquement une fonction JavaScript? Initialement cacher un div pour affichage ultérieur

Comment gérer les éléments DOM

J'ai implémenté le défilement Infinite (c.-à-d. Charger des enregistrements lorsque la barre de défilement atteint le bas de la division). Cela fonctionne bien, mais après avoir chargé trop d'enregistrements sur la page, la page devient trop lourde et cause un rendu lent. En fait, j'utilise cette technique comme remplacement d'une grille, alors, comment puis-je gérer de gros DOM dans ce scénario?

  1. Réduisez au minimum les éléments DOM.
  2. Réduire au minimum le nombre d'enveloppes.
  3. Minimiser l'accès aux éléments DOM, qui comprend ( suggestions de Yahoo ):
    • Les références de cache aux éléments accessibles
    • Mettre à jour les nœuds "hors ligne", puis les ajouter à l'arbre
    • Évitez de réparer la mise en page avec JavaScript
  4. S'il y a un calcul qui peut être réduit, comme obtenir le nombre de lignes (ne le calculez pas chaque fois, ajoutez simplement le nombre de nouvelles lignes au courant), cachez-le (woogle Wikipedia )

Si vous avez un type d'itération sur une collection d'éléments DOM et que vous n'utilisez pas jQuery pour itérer, utilisez ceci (suggestions par motifs JavaScript ): 

for (var iteration = 0, limit = lengthOfElements; iteration++; iteration < limit)

ou 

 for (var i = myarray.length; i--; )

Peut-être faire cette technique des deux côtés, défiler vers le haut et vers le bas? Lorsque vous avez atteint 100 éléments après avoir fait défiler vers le bas, retirez le top 50. Vous les rechargez ou affichez-les à nouveau lorsque vous vous déplacez vers le haut.

Idée de savoir comment y parvenir: 

 $('.entry:lt(50)').remove(); // remove the top 50 .entry elements $('.entry:lt(' + (current_entries - 50) + ')').remove();

Rechargez les serveurs lorsque vous déplacez en haut de la div. J'espère que cela pourra aider.