Leistung zum Anhängen großer Element/Datasets an die Dom

Question

Ich angehängt große Mengen von Tabellenzeilenelementen auf einmal und einige große Engpässe erleben. Im Moment benutze ich jQuery, aber ich bin offen für eine javascriptbasierte Lösung, wenn es den Job erledigt.

Ich muss irgendwo von 0-100 Tabellenzeilen zu einem bestimmten Zeitpunkt anhängen (es ist tatsächlich potenziell mehr, aber ich paginieren etwas über 100).

Im Moment bin ich Anfügen jede Tabellenzeile individuell auf die dom ...

loop { 
    ..build html str... 
    $("#myTable").append(row); 
} 

Dann verblassen ich sie alle auf einmal in

$("#myTable tr").fadeIn(); 

Es gibt ein paar Dinge sind hier zu berücksichtigen. ..

1) Ich binde Daten an jede einzelne Tabellenzeile, weshalb ich von einer Massenanfügung zum Anfügen einzelner Zeilen an erster Stelle geschaltet habe.

2) Ich mag den Fade-Effekt. Obwohl es für die Anwendung nicht wesentlich ist, stehe ich sehr auf Ästhetik und Animationen (die natürlich nicht von der Anwendung ablenken). Es muss einfach ein guter Weg sein, um einen bescheidenen Fade-Effekt auf größere Datenmengen anzuwenden.

(edit) 3) Ein wichtiger Grund für mich, dies in der kleineren Brocken/rekursive Art und Weise nähern, die ich bestimmte Daten an jede Zeile binden muß. Binde ich meine Daten falsch? Gibt es eine bessere Möglichkeit, diese Daten im Auge zu behalten, als sie an ihre jeweiligen tr zu binden?

---

Ist es besser anzuwenden wirkt/dom Manipulationen in großen Stücken oder kleinere Stücke in rekursiven Funktionen?

Gibt es Situationen, in denen es besser ist, das eine oder das andere zu tun? Wenn ja, nach welchen Kriterien wählen Sie die geeignete Methode aus?

Answer 1

Werfen Sie einen Blick auf diese post by John Resig, es erklärt den Vorteil der Verwendung von DocumentFragments bei großen Ergänzungen des DOM.

Ein DocumentFragment ist ein Container, dem Sie Knoten hinzufügen können, ohne das DOM in irgendeiner Weise zu verändern. Wenn Sie bereit sind, fügen Sie dem DOM das gesamte Fragment hinzu, und dieses fügt seinen Inhalt in einem einzigen Vorgang in das DOM ein.

auch tun $("#myTable") auf jede Iteration wirklich nicht zu empfehlen - tut es einmal vor der Schleife.

Answer 2

ich vermute, dass Ihre Leistungsprobleme sind, weil Sie das DOM mehrmals in Ihrer Schleife ändern.

Versuchen Sie stattdessen, es einmal zu ändern, nachdem Sie alle Zeilen erhalten haben. Browser sind wirklich gut bei innerHTML ersetzt. Probieren Sie etwas wie

$("#myTable").html("all the rows dom here"); 

Anmerkung Sie konnten mit den genauen Wählern spielen zu verwenden, den dom an der richtigen Stelle zu bekommen. Aber die Hauptidee ist, innerHTML zu verwenden und es so oft wie möglich zu verwenden.