Performance avec un nombre infini de défilement ou beaucoup d'éléments du dom?

Nous avons dû composer avec un problème similaire sur FoldingText. Comme le document est devenue plus grande, plus d'éléments de ligne et associés span éléments ont été créés. Le moteur de navigateur semblait s'étouffer, et donc une meilleure solution devait être trouvée.

Voici ce que nous avons fait, peut ou peut ne pas être utile pour vos besoins:

Visualiser l'ensemble de la page comme un long document, et le navigateur de la fenêtre d'affichage comme la lentille pour une partie spécifique du document long. Vous n'avez qu'à montrer la partie à l'intérieur de la lentille.

Donc, la première partie est de calculer la vue visible port. (Cela dépend de la façon dont les éléments sont placés, absolu /fixe /valeur par défaut)

var top = document.scrollTop;
var width = window.innerWidth;
var height = window.innerHeight;

Certains de plus de ressources pour trouver plus de croix-navigateur basé sur le viewport:

Obtenez la fenêtre d'affichage du navigateur dimensions avec JavaScript

Croix-navigateur méthode de détection de la scrollTop de la fenêtre du navigateur

Deuxièmement, vous avez besoin d'une structure de données afin de connaître les éléments qui sont visibles dans la zone

Nous avons déjà eu l'équilibre binaires de recherche arbres en place pour l'édition de texte, nous avons donc élargi pour gérer la ligne de hauteurs trop, cette partie nous a été relativement facile. Je ne pense pas que vous aurez besoin d'une structure de données complexes pour la gestion de votre élément en hauteur; un simple tableau ou d'un objet peuvent faire très bien. Juste assurez-vous que vous pouvez interroger les hauteurs et dimensions facilement sur elle. Maintenant, comment voulez-vous obtenir la hauteur de données pour l'ensemble de vos éléments. Un exemple très simple (mais gourmand en ressources pour de grandes quantités d'éléments!)

var boundingRect = element.getBoundingClientRect()

Je parle en termes de pur javascript, mais si vous êtes à l'aide de jQuery $.offset, $.position, et les méthodes énumérées ici serait très utile.

De nouveau, en utilisant une structure de données est important seulement comme un cache, mais si vous voulez, vous pouvez le faire à la volée (même si, comme je l'ai dit ces opérations sont coûteuses). Aussi, méfiez-vous de l'évolution des styles css et de l'appel de ces méthodes. Ces fonctions de la force de redessiner, de sorte que vous verrez un problème de performance.

Enfin, il suffit de remplacer les éléments à l'écran avec un seul, dire <div> élément calculé la hauteur

• Maintenant, vous avez des hauteurs de tous les éléments stockés dans la structure de Données, les requêtes de tous les éléments qui se trouvent avant la vue visible.

• Créer un <div> avec css hauteur (en pixels) de la somme de l'élément hauteurs

• De marquer avec un nom de classe de sorte que vous savez c'est une plaque de div
• Supprimer tous les éléments du dom que cette division couvre
• insérer ce nouveau div au lieu

Répétez l'opération pour les éléments qui se trouvent après la vue visible.

Look pour faire défiler et de redimensionner les événements. Sur chaque rouleau, vous aurez besoin de revenir à votre structure de données, retirez la plaque de vrd, de créer des éléments qui ont été retirés précédemment de l'écran, et en conséquence d'ajouter de nouvelles remplissage divs.

🙂 C'est un travail long, complexe de la méthode, mais pour les gros documents, il a augmenté notre performance par une grande marge.

tl;dr

Je ne suis pas sûr que je l'ai expliqué correctement, mais l'essentiel de cette méthode est:

• Savoir les dimensions verticales de vos éléments
• Connaître le défilé en vue port
• Représenter toutes les éléments de l'écran avec un seul div (hauteur égale à la somme de tous les éléments hauteurs, il couvre pour l')
• Vous aurez besoin de deux divs au total, à un moment donné, un pour les éléments au-dessus de la vue visible, un pour les éléments ci-dessous.
• Garder une trace de la vue du port d'écoute pour les faire défiler et de redimensionner les événements. Recréer les divs et les éléments visibles en conséquence

Espère que cette aide.