jquery: schnellste DOM Insertion?

Question

Ich habe dieses ungutes Gefühl, wie ich größere Mengen an HTML einfügen. Nehmen wir an, wir haben:

var html="<table>..<a-lot-of-other-tags />..</table>"

und ich möchte diese setzen in

$("#mydiv")

zuvor habe ich so etwas wie

var html_obj = $(html); $("#mydiv").append(html_obj);

Ist es richtig, dass jQuery Parsen html DOM-Objekte zu erstellen? Gut, das ist, was ich irgendwo gelesen (UPDATE: Ich meinte, dass ich gelesen habe, jQuery die HTML analysiert den gesamten DOM-Baum von Hand zu erstellen - seinen Unsinn rechts ) , so änderte ich meinen Code:

$("#mydiv").attr("innerHTML", $("#mydiv").attr("innerHTML") + html);

Man fühlt sich schneller, oder? Und ist es richtig, dass dies entspricht:

document.getElementById("mydiv").innerHTML += html? oder ist jquery im Hintergrund einige zusätzliche teure Sachen zu tun?

Würden Alternativen lieben und zu lernen.

Answer 1

innerHTML- ist bemerkenswert schnell, und in vielen Fällen werden Sie die besten Ergebnisse bekommen nur diese Einstellung (ich würde append nur verwenden).

Wenn es jedoch schon viel in „mydiv“ ist dann den Browser zwingt wieder alle diese Inhalte zu analysieren und machen (alles, was es vorher war, und alle neuen Inhalte). Sie können dies vermeiden, indem ein Dokumentfragment auf „mydiv“ statt anhängen:

var frag = document.createDocumentFragment();
frag.innerHTML = html;
$("#mydiv").append(frag);

Auf diese Weise nur Ihre neuen Inhalte analysiert werden (unvermeidlich) und die vorhandenen Inhalte nicht.

EDIT: Mein schlecht ... Ich habe entdeckt, dass innerHTML- nicht gut auf Dokumentfragmente unterstützt wird. Sie können die gleiche Technik mit jedem Knotentyp verwenden. Für Ihr Beispiel könnten Sie den Root-Tabellenknoten erstellen und die Innerhtml in das einfügen:

var frag = document.createElement('table');
frag.innerHTML = tableInnerHtml;
$("#mydiv").append(frag);

Answer 2

Versuchen Sie Folgendes:

$("#mydiv").append(html);

Die anderen Antworten, einschließlich der akzeptierte Antwort, sind langsamer von 2-10x : jsperf .

Die akzeptierte Antwort funktioniert nicht in IE 6, 7 und 8 , weil Sie nicht innerHTML eines <table> Element festlegen können, aufgrund eines Fehlers in IE: jsbin .

Answer 3

Was versuchen Sie zu vermeiden? „Ein schlechtes Gefühl“ ist unglaublich vage. Wenn Sie „das DOM langsam“ und beschlossen, „zu vermeiden, dass der DOM“ gehört haben, dann ist dies nicht möglich. Jede Methode von Code in eine Seite einfügen, einschließlich innerHTML- wird in DOM Ergebnisobjekte erstellt werden. Das DOM ist die Darstellung des Dokuments im Speicher Ihres Browsers. Sie wollen DOM erstellt werden Objekte.

Der Grund, warum die Leute sagen, „das DOM langsam ist“, weil Elemente mit document.createElement() zu schaffen, die Elemente für die Erstellung der offiziellen DOM-Schnittstelle ist, ist langsamer als die Nicht-Standard-Eigenschaft innerhtml in einigen Browsern. Dies bedeutet nicht, dass die Schaffung von DOM-Objekte ist schlecht, es ist notwendig erstellen DOM-Objekte, sonst wird Ihr Code würde überhaupt nichts tun.

Answer 4

Die Antwort über ein DOM-Fragment unter Verwendung ist auf dem richtigen Weg. Wenn Sie eine Reihe von HTML-Objekte, die Sie konstanten Einfügen in das DOM sind, dann werden Sie einige Verbesserungen in der Geschwindigkeit sehen das Fragment mit. Dieser Beitrag von John Resig erklärt es ziemlich gut: http://ejohn.org/blog/dom-documentfragments/

Answer 5

Der schnellste Weg Artikel anhängen

Der schnellste Weg zum DOM-Baum anzuhängen ist, alle Ihre append in zu einem einzigen DOM-Fragmente puffern, dann das dom Fragment auf das dom anhang.

Dies ist die Methode, die ich in meinem Spiel-Engine verwenden.

//Returns a new Buffer object
function Buffer() {

    //the framgment
    var domFragment = document.createDocumentFragment();

    //Adds a node to the dom fragment
    function add(node) {
        domFragment.appendChild(node);
    }

    //Flushes the buffer to a node
    function flush(targetNode) {

        //if the target node is not given then use the body
        var targetNode = targetNode || document.body;

        //append the domFragment to the target
        targetNode.appendChild(domFragment);

    }

    //return the buffer
    return {
        "add": add,
        "flush": flush
    }
}


//to make a buffer do this
var buffer = Buffer();

//to add elements to the buffer do the following
buffer.add(someNode1);

//continue to add elements to the buffer
buffer.add(someNode2);
buffer.add(someNode3);
buffer.add(someNode4);
buffer.add(someN...);

//when you are done adding nodes flush the nodes to the containing div in the dom
buffer.flush(myContainerNode);

Mit diesem Objekt ich in der Lage bin zu machen ~ 1000 Elemente auf den Bildschirm ~ 40-mal pro Sekunde in Firefox 4.

Hier ist ein Anwendungsfall.

Answer 6

Für den Anfang, ein Skript schreiben, das mal wie lange es dauert es 100 oder 1000 mal mit jeder Methode zu tun.

Um sicherzustellen, werden die Wiederholungen nicht irgendwie wegoptimiert - kein Experte auf JavaScript-Engine Ich bin - variieren die HTML Sie jedes Mal, sind das Einfügen, sagen, indem sie ‚0001‘ und dann ‚0002‘ und dann ‚0003‘ in einer bestimmten Zelle der Tabelle.

Answer 7

ich einen Riesen-String mit und dann diese Zeichenfolge mit jquery hängen. Funktioniert gut und schnell, für mich.

Answer 8

Sie erwähnen sind in Alternativen interessiert. Wenn man sich die Liste der sehen DOM-bezogenen jQuery Plugins finden mehrere, die programmatisch zu erzeugen DOM Bäume gewidmet sind. Siehe zum Beispiel SuperFlyDom oder DOM-Elemente Creator ; aber es gibt andere.