jQuery und anfügen von großen Mengen von HTML
Ich bin gekommen, um zu finden, dass mithilfe von jQuery zu erstellen, die HTML-client-Seite können Sie einen enormen performance-booster-wenn es richtig gemacht wird. Ich benutze AJAX-Rückgabe JSON abrufen, dynamische Inhalte und dann Baue ich die relevanten HTML-und einfügen mit jQuery. Das erste mal, dass ich ein Durcheinander mit dieser Technik fand ich, dass der string concatenator im IE JavaScript erfolgt sehr langsam, so dass der Aufbau einer dynamischen Tabelle mit mehr als 50 Zeilen durchgeführt furchtbar.
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, die für die string-Verkettung, die alles verändert. Anstelle der Verwendung der sting += Betreiber arrays zu tun Verkettung;
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(''));Fand ich, dass die performance deutlich verbessert. Nun gibt es jedoch eine Obergrenze von etwa 100 Zeilen, bevor ich anfange zu sehen, der browser selbst den Kampf mit dynamisch einfügen, so viel Inhalt auf einmal. Hat jemand irgendwelche Hinweise oder Techniken, die verwendet werden können, um mir zu helfen erreichen die nächste performance-Schub für große Mengen von dynamischen HTML?
- Eine Beobachtung: In Ihrem Beispiel, Sie sind wirklich zu zeigen, eine Leistungssteigerung durch Javascript-native string-und array-handling, nicht jQuery.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gibt es ein performance-Problem mit jQuery und dem einfügen einer großen html-string der DOM, der aufgrund seiner $.trim-Funktion.
Finde ich manchmal die gute alte dom-scripting viel schneller als jquery. Versuchen Sie so etwas wie
Sich bewusst sein, dass oft die Geschwindigkeit Engpass ist nicht die Schaffung der DOM, aber einfügen der DOM. Dies ist vor allem auf IE mit komplizierten Formatvorlagen und wenn der neue content enthält viele Ebenen von verschachtelten tags.
Finden Sie unter: http://bitkickers.blogspot.com/2008/12/ajax-grid-performance-in-ie.html
Haben Sie sich überlegt mit Hilfe einer Template-Bibliothek? REIN hat eine sehr gute Leistung, zum Beispiel (ausprobieren der 500 Reihe Beispiel).
Ich denke, man kann html-split in viele Teile und fügen Sie Sie eins nach dem anderen.
$("table tr:last").after('<tr>...</tr>');Dokumenten-Linien in googleDocs
Versuchen, Klonen von teilen der DOM selbst, anstatt Ihre Erzeugung on-the-fly (d.h. Anhängen tatsächlichen DOMElements, so dass Sie nicht haben, um erstellt werden).
ich war Herumspielen mit Anhängen, die große Mengen von html-gestern. ich denke, das rendering auf der server-Seite einfügen und den Weg zu gehen, auch ich kann noch hinzufügen, dass nicht mit jquery ist schneller von 50-100ms in meinen tests, die sind hier:
http://programmingdrunk.com/playground
brauchen Sie, um firebug-Konsole, um die Geschwindigkeit sehen, Ergebnisse
Chase ist richtig, es ist egal, wie schnell Sie können die Generierung der HTML-Code über JavaScript, es ist der DOM einfügen, die Sie zu töten. Band alle Programmiersprachen mit DOM und es wird langsam.
Meine nur vorschlagen, ist, dass die Tabelle mit Seitenzahlen, so dass Sie nicht Last, so viele auf einmal, oder vielleicht auch nicht verwenden AJAX überhaupt.
In meinem Fall,zu dokumentieren.getElementById('id').innerHTML = myarray.join(") ist auch ein killer, da Arrays haben 10 HTMl-Zeichenfolgen. Die joins erstellen würde großen lange Schnur und nnerHTML Leistung variiert stark zwischen 100ms bis 1200ms auf IE 7.
jede cluses?
Würden Sie wahrscheinlich eine bessere Leistung erhalten, wenn Sie die HTML-Generierung auf der server-Seite, und verwenden Sie dann Ajax zum abrufen der html und fügen Sie es zu Ihrem DOM. (Ich nehme an, Sie sind immer alle Daten vom server per Ajax sowieso.)