Also habe ich eine große Anzahl von Divs (4000-5000) [jede enthält Spannen, Anker, Bilder usw.] innerhalb eines Container-Divs und grundsätzlich setze ich ihre Anzeige auf keine oder blockiere basierend auf einer Bedingung. Das braucht etwas Zeit.
Bei meiner Suche nach etwas schnellerem stieß ich auf diese Seite Ссылка und die Lösung, die es zu entfernen gibt Der Container div vom DOM und iteriert die enthaltenen Elemente nach getElementsByTagName.
%Vor%Das Problem ist, dass ich die gelieferte Lösung nicht verwenden kann, weil ich auf die Child-Elemente über ihre IDs zugreifen muss und das kann ich nicht, da die Elemente aus dem DOM entfernt werden. Gibt es einen Weg, dies zu erreichen?
Ich habe auch versucht, den Container div zu entfernen und ihn an ein Dokumentfragment anzuhängen, aber ich kann immer noch nicht auf die 5000 Elemente mit ihrer ID zugreifen, wenn sie sich im Dokumentfragment befinden
Schließlich habe ich das auch versucht:
%Vor%weil ich gehofft hatte, dass es nicht für jede Iteration einen Reflow auslöst, aber dies schien keine Verbesserung der benötigten Zeit zu bieten.
Hat jemand darüber irgendwelche Gedanken?
Anzeige keine / Block ist teuer. Von meinen Tagen der Verbesserung der Leistung auf dem Handel von Web-Plattformen, eine Technik, die ich empfehlen kann, die besonders bei älteren Browsern glänzen wird, ist die Verwendung der relativen Position und das Entfernen vom Bildschirm mit einem negativen linken Wert. Abhängig von Ihrer Implementierung möchten Sie vielleicht auch die Höhe auf 0px setzen oder Möglichkeiten mit absoluter Position betrachten. Das Kernkonzept besteht immer noch darin, dass Sie das Element einfach vom Bildschirm reißen. Eine gute Nachricht ist, dass die versteckten Elemente immer noch im DOM sind und Sie auf sie zugreifen können.
%Vor%Sieh dir diese zwei Fiddles an, sie erstellen 10K Zeilen und schalten (hide / show) die ungeraden Zeilen um:
FIDDLE mit Display none / block
Chrome verarbeitet 100 K dieser Zeilen im Handumdrehen und es ist schwierig, eine signifikante Leistungsverbesserung zu sehen, während ich für Firefox die Anzahl der Zeilen auf 10 K reduzieren musste und der Leistungsgewinn viel offensichtlicher ist.
Ich werde versuchen, Quellen wie gewünscht bereitzustellen.
Erste Lösung - am besten
Nach dieser Seite: JavaScript Grid mit einer Million Aufzeichnungen
Sie können einige wichtige Dinge lernen:
Also, ich würde Ihnen empfehlen, ein Array zu erstellen, um Ihre Elemente schnell handhaben zu können.
Zweite Lösung
Eine andere Lösung aus dieser Website: Verarbeitung großer Datenmengen in JavaScript
wäre ein Timeout zu verwenden (so seltsam es auch klingt), um die Geschwindigkeit des Handlers zu erhöhen.
Die Idee kommt von Buch: Geheimnisse des JavaScript Ninja
Wenn Sie nur anzeigen / ausblenden möchten, ohne etwas im div-DOM zu ändern, und Sie alle IDs kennen, denke ich, dass die beste (schnellste) Möglichkeit wäre, <style /> element vorzubereiten und anzufügen zu DOM. Style el sollte alle IDs und die richtige Anzeige enthalten. Iterate durch IDs und füge sie der CSS-Zeichenkette hinzu, dann erzeuge <style /> -Element und füge ihr eine Zeichenkette hinzu. Dies sollte für Sie arbeiten.
Erstellen Sie zuvor eine ID-zu-Element-Map / Hash-Tabelle:
%Vor% wobei ids eine Liste von Element-IDs ist. (Wenn Sie 5000 Elemente anhand ihrer IDs benötigen, nehme ich an, dass Sie eine Liste haben oder eine erstellen können.)
Wenn Sie dann das Containerelement aus dem DOM entfernen, können Sie die Karte verwenden, um Elemente anhand ihrer IDs zu finden.
Die folgenden beiden Anweisungen sind äquivalent (der zweite Ansatz erfordert # , ist aber für alle Elemente verfügbar, nicht nur für das Dokument).
Sie können also element.querySelector('#theId') verwenden, um anhand der ID zu einem untergeordneten Element zu gelangen (auch wenn das übergeordnete Element element derzeit von DOM getrennt ist).
Beachten Sie, dass querySelector () in IE 7 nicht unterstützt und älter ist
Tags und Links javascript html dom