2 Stimmen

Wie füge ich einen HTML-String mit vielen Knoten direkt zu einem vorhandenen DOM-Element hinzu, wobei die Leistung oberste Priorität hat?

Meine Frage ist, ob jemand Ideen hat, wie man eine HTML-Zeichenkette, die viele Knoten enthält, mit höchster Leistung direkt an ein vorhandenes DOM-Element anhängen kann.

Lassen Sie mich erklären, was ich mache. Ich erstelle ein Javascript-Vorlagen-Skript. Im Moment ist es wahnsinnig schnell. Ich kann 40.000 mehrdimensionale Elemente aus JSON als HTML-Knoten in das DOM in etwas mehr als 3 Sekunden rendern (Chrome 16 läuft auf einem OSX Macbook Pro).

Nachdem ich die Zeichenfolge analysiert habe, füge ich sie über .innerHTML in ein neu erstelltes span-Tag ein und hänge dieses span-Tag dann an das DOM an. Es ist verdammt schnell, effizient und schick, aber verdammt, es funktioniert einfach nicht. Warum? Weil es die Knoten mit einem überflüssigen Tag umschließt und dies wird zweifellos in einigen Fällen mit CSS und Gott weiß was noch, stören. Also müssen multiple neu erstellte DOM-Knoten direkt unter einem vorhandenen HTML-Tag angehängt werden können.

Also bin ich vom Anhängen des span-Tags (zusammen mit all seinem über innerHTML zugewiesenen HTML) zum Durchlaufen jedes Kindknotens dieses Spans und zum separaten Anhängen davon übergegangen. Aber, Mann, ist es viel langsamer! Es dauert fast 20 Sekunden, um 40.000 Einträge zu rendern, im Vergleich zu 3 Sekunden.

Und ich halte mich für dieses spezielle Projekt von jQuery fern. Und nein, ich rechne nie damit, dass in einer realen Situation 40.000 Elemente auf einer Seite gerendert werden. Ich mache das nur, um die Geschwindigkeit zu testen. Ich möchte, dass das Skript absolut so schnell wie möglich ist.

0 Stimmen

Warum als SPAN? Alle diese Knoten sind inline? Ein DIV wäre hier die generische Wahl.

4voto

gilly3 Punkte 83450

Verwenden Sie document.createDocumentFragment(). (Dokumente: msdn, mdn)

var span = document.createElement("span");
span.innerHTML = html;
var frag = document.createDocumentFragment();
while (span.childNodes.length) {
    frag.appendChild(span.childNodes[0]);
}
document.body.appendChild(frag);

Lesen Sie, was John Resig (Autor von jQuery und Sizzle) über die Leistungsverbesserungen durch die Verwendung von document.createDocumentFragment() zu sagen hatte.


Der IE unterstützt element.removeNode(false), das das Element aus dem DOM entfernt und seine Kindknoten im DOM belässt. Das hilft Ihnen jedoch nicht viel bei anderen Browsern.

3voto

vitaliydev Punkte 370

Um HTML-String mit vielen Knoten direkt an ein vorhandenes Element anzuhängen, können Sie:

  1. insertAdjacentHTML (IE4, Ch1, FF8, Op7). Es ist die beste Option und sehr einfach.

  2. append, prepend, after, before, replaceWith (Ch54, FF49, Op39). Bequeme API, funktioniert aber nur in neuen Browsern.

  3. Vorübergehender Knoten mit outerHTML (IE4, Ch1, FF11, Op7). Bevor Sie outerHTML ändern, sollten Sie Ihren Knoten an einen anderen Knoten anhängen.

  4. Vorübergehender Knoten mit innerHTML (alle Browser), aber Sie können diesen Knoten nicht aus dem DOM löschen, sodass dies die schlechteste Option ist.

  5. Analysieren Sie den HTML-String mit innerHTML oder etwas anderem und hängen Sie die resultierenden Knoten einzeln an das benötigte Element an (oder alle auf einmal mit den unten beschriebenen Methoden). Dies ist möglicherweise nur für FF7 erforderlich, das insertAdjacentHTML nicht unterstützt. Aber niemand verwendet eine so alte Version.

Um viele Knoten (keinen String) auf einmal anzuhängen, können Sie:

  1. append, prepend, after, before, replaceWith (Ch54, FF49, Op39).

  2. DocumentFragment (alle Browser). Dies ist ein temporärer Container für Knoten. Wenn Sie den Container an einen anderen Knoten anhängen, werden die Kindknoten angehängt, nicht der Container. Danach enthält der Container 0 Kinder. Es sieht so aus, als würde der Container aus dem DOM verschwinden.

  3. appendChild oder insertBefore mehrmals (alle Browser). Es hat die schlechteste Leistung.

  4. Berechnen Sie das outerHTML jedes Knotens, fügen Sie die Ergebnisse zu einem String zusammen und hängen Sie diesen String unter Verwendung der obigen Methoden an. Die Leistung ist unbekannt, daher nicht empfohlen.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X