Wir mussten uns mit einem ähnlichen Problem bei FoldingText befassen . Mit zunehmender Größe des Dokuments wurden mehr Linienelemente und zugehörige Bereichselemente erstellt. Die Browser-Engine schien nur zu ersticken, und so musste eine bessere Lösung gefunden werden.
Folgendes haben wir getan, können für Ihre Zwecke nützlich sein oder auch nicht:
Visualisieren Sie die gesamte Seite als langes Dokument und das Browser-Ansichtsfenster als Objektiv für einen bestimmten Teil des langen Dokuments. Sie müssen wirklich nur den Teil innerhalb des Objektivs zeigen.
Der erste Teil besteht also darin, den sichtbaren Ansichtsport zu berechnen. (Dies hängt davon ab, wie Ihre Elemente platziert sind, absolut / fest / Standard)
var top = document.scrollTop;
var width = window.innerWidth;
var height = window.innerHeight;
Weitere Ressourcen, um ein browserübergreifenderes Ansichtsfenster zu finden:
Holen Sie sich die Dimensionen des Browser-Ansichtsfensters mit JavaScript
Browserübergreifende Methode zum Erkennen des scrollTop des Browserfensters
Zweitens benötigen Sie eine Datenstruktur, um zu wissen, welche Elemente in diesem Bereich sichtbar sind
Wir hatten bereits einen ausgeglichenen binären Suchbaum für die Textbearbeitung, daher haben wir ihn erweitert, um auch die Zeilenhöhen zu verwalten, sodass dieser Teil für uns relativ einfach war. Ich glaube nicht, dass Sie eine komplexe Datenstruktur für die Verwaltung Ihrer Elementhöhen benötigen. Ein einfaches Array oder Objekt kann gut funktionieren. Stellen Sie einfach sicher, dass Sie Höhen und Maße einfach abfragen können. Wie würden Sie nun die Höhendaten für alle Ihre Elemente erhalten? Eine sehr einfache (aber rechenintensive für große Mengen von Elementen!)
var boundingRect = element.getBoundingClientRect()
Ich bin in Bezug auf die reine Javascript sprechen, aber wenn Sie jQuery verwenden $.offset, $.positionund Methoden aufgeführt hier wäre sehr hilfreich.
Auch hier ist die Verwendung einer Datenstruktur nur als Cache wichtig. Wenn Sie möchten, können Sie dies jedoch im laufenden Betrieb tun (obwohl diese Vorgänge, wie bereits erwähnt, teuer sind). Achten Sie auch darauf, die CSS-Stile zu ändern und diese Methoden aufzurufen. Diese Funktionen erzwingen das Neuzeichnen, sodass ein Leistungsproblem auftritt.
Zuletzt ersetzen Sie einfach die Elemente außerhalb des Bildschirms durch ein einzelnes, beispielsweise <div>Element mit berechneter Höhe
Jetzt haben Sie Höhen für alle in Ihrer Datenstruktur gespeicherten Elemente. Fragen Sie alle Elemente ab, die vor dem sichtbaren Ansichtsfenster liegen.
Erstellen Sie eine <div>mit CSS-Höhe festgelegte Höhe (in Pixel) zur Summe der Elementhöhen
- Markieren Sie es mit einem Klassennamen, damit Sie wissen, dass es sich um ein Füller-Div handelt
- Entfernen Sie alle Elemente aus dem Dom, den dieses Div abdeckt
- Fügen Sie stattdessen dieses neu erstellte Div ein
Wiederholen Sie diesen Vorgang für Elemente, die hinter dem sichtbaren Ansichtsfenster liegen.
Suchen Sie nach Ereignissen zum Scrollen und Ändern der Größe. Bei jedem Bildlauf müssen Sie zu Ihrer Datenstruktur zurückkehren, die Füller-Divs entfernen, Elemente erstellen, die zuvor vom Bildschirm entfernt wurden, und dementsprechend neue Füller-Divs hinzufügen.
:) Es ist eine lange, komplexe Methode, aber bei großen Dokumenten hat sie unsere Leistung erheblich gesteigert.
tl; dr
Ich bin mir nicht sicher, ob ich es richtig erklärt habe, aber der Kern dieser Methode ist:
- Kennen Sie die vertikalen Abmessungen Ihrer Elemente
- Kennen Sie den gescrollten Ansichtsport
- Stellen Sie alle Off-Screen-Elemente mit einem einzigen Div dar (Höhe entspricht der Summe aller Elementhöhen, für die es gilt)
- Sie benötigen zu jedem Zeitpunkt insgesamt zwei Divs, einen für Elemente über dem sichtbaren Ansichtsfenster und einen für Elemente darunter.
- Behalten Sie den Überblick über das Ansichtsfenster, indem Sie auf Bildlauf- und Größenänderungsereignisse warten. Erstellen Sie die Divs und sichtbaren Elemente entsprechend neu
Hoffe das hilft.
