jQuery und Anhänge große Mengen an HTML

Question

ich gekommen, um zu finden, dass jQuery HTML-Client-Seite erstellen kann eine große Leistung Booster sein, wenn es richtig gemacht. Ich verwende AJAX, das JSON zurückgibt, um dynamischen Inhalt abzurufen, und dann baue ich das relevante HTML und füge es mit jQuery ein. Als ich das erste Mal mit dieser Technik zu tun hatte, stellte ich fest, dass der String-Konkatenator in IEs JavaScript sehr langsam lief, so dass das Erstellen einer dynamischen Tabelle mit mehr als 50 Zeilen schrecklich war.

var shtml = '<table>'; 
for (var i = 0; i < 100; i++) { 
    shtml += '<tr><td>A bunch of content</td></tr>'; 
} 
shtml += '</table>'; 
$('#myTable').append(shtml); 

Dann fand ich eine Technik für String-Verkettung, die alles verändert. Anstatt den Stacheloperator += zu verwenden, verwenden Sie Arrays, um Verkettungen durchzuführen.

var shtml = ['<table>']; 
for (var i = 0; i < 100; i++) { 
    shtml.push('<tr><td>A bunch of content</td></tr>'); 
} 
shtml.push('</table>'); 
$('#myTable').append(shtml.join('')); 

Ich fand, dass die Leistung deutlich verbessert. Jetzt gibt es jedoch eine Obergrenze von etwa 100 Zeilen, bevor ich anfange zu sehen, dass der Browser selbst mit dem dynamischen Einfügen von so viel Inhalt auf einmal zu kämpfen hat. Hat jemand irgendwelche Zeiger oder Techniken, mit denen ich den nächsten Leistungsschub für große Mengen von dynamischem HTML erreichen kann?

Answer 1

Sie würden wahrscheinlich eine bessere Leistung, wenn Sie die HTML-Generierung auf der Server-Seite tun, und dann Ajax verwenden, um die HTML abrufen und an Ihren DOM anhängen. (Ich gehe davon aus Sie alle Daten von dem Server sind immer irgendwie mit Ajax.)

Answer 2

Haben Sie darüber nachgedacht eine Templat-Bibliothek? PURE hat zum Beispiel eine sehr gute Leistung (probieren Sie das Beispiel mit 500 Zeilen aus).

Answer 3

Ich habe gestern mit dem Anhängen großer Mengen von HTML rumgemacht. Ich denke, Rendering auf Server-Seite und Einfügen ist der Weg zu gehen, ich hinzufügen kann auch, dass nicht jquery mit von 50-100ms in meinen Tests schneller ist, die hier sind:

http://programmingdrunk.com/playground

brauchen Sie Aktivieren Sie die Firebug-Konsole, um Geschwindigkeitsergebnisse zu sehen

Answer 4

Beachten Sie, dass der Geschwindigkeitsengpass häufig nicht das DOM erstellt, sondern das DOM einfügt. Dies gilt insbesondere für IE mit komplizierten Stylesheets und wenn der neue Inhalt viele Ebenen verschachtelter Tags enthält.

See: http://bitkickers.blogspot.com/2008/12/ajax-grid-performance-in-ie.html

Answer 5

Versuchen Teile des DOM Klonen selbst, anstatt sie im Fluge zu erzeugen (das heißt tatsächliche DOMElements hängen, so dass sie müssen nicht erstellt werden).

Answer 6

Chase ist richtig, es ist egal, wie schnell Sie den HTML über JavaScript erzeugen kann, dann ist es das DOM Einfügung, die Sie töten. Verknüpfen Sie jede Programmiersprache mit dem DOM und es wird langsam.

Mein nur vorschlagen, die Tabelle Paginierung haben, so dass Sie nicht so viele auf einmal laden, oder vielleicht auch nicht AJAX zu verwenden überhaupt.

Answer 7

Es gibt ein Performance-Problem mit jQuery und eine große Reihe von html auf das DOM eingefügt aufgrund seiner $ .trim Funktion.

Ich finde manchmal einfache alte dom Scripting viel schneller als mit jquery. Probieren Sie etwas wie

document.getElementById('id').innerHTML = myarray.join('') 

Answer 8

In meinem Fall document.getElementById ('id'). Innerhtml = myarray.join ('') ist auch ein Killer seit Array 10 HTML-Strings haben.Die Joins würden eine große lange Zeichenkette erstellen und die nnerHTML-Leistung variiert zwischen 100ms und 1200ms bei IE 7.

irgendwelche Cluses?

Answer 9

Ich denke, Sie können HTML in vielen Teilen teilen und es einzeln anhängen.

$("table tr:last").after('<tr>...</tr>');

Wie Belegzeilen in googledocs