jQuery-Clone-Leistung

Habe ich gelesen, dass javascript das einen spürbaren performance-Vorteile von der änderung der off-dom. Heute früh Las ich die Klon-Dokumentation:

"Beachten Sie, dass bei Verwendung des .clone () -
Methode, die wir ändern können, die geklont
Elemente oder deren Inhalte vor
(wieder-)einführen in die
Dokument."

Ist die Konsequenz dann, dass wenn ich 1000 LI ist und ich eine änderung vornehmen möchten über alle von Ihnen, die effektivste Methode wäre, um zu Klonen, ändern Sie den Klon, das original zerstören, und legen Sie die Klon?

Wie würden Sie gehen über die diese änderung auf die effizienteste Weise?

  • Sie können eine benchmark-selbst - versuchen, jeden Ansatz in einer loop (1000 mal) und die Zeit, jede option.
InformationsquelleAutor Matrym | 2010-06-25
  1. 3

    Die detach () - Methode ist die Methode, entworfen für genau das, was Sie zu tun versuchen:

    http://api.jquery.com/detach/

    Edit: Es ist eine Erwähnung Wert, dass jeder seine eigene Profilierung/tests, was gut ist, gesunden Menschenverstand Beratung. Plus, es macht Spaß zu sehen, die lächerliche performance-Gewinne, die Sie erhalten. 🙂

    Meine Faustregel ist diese:
    Wenn Sie Manipulationen auf viele Elemente, die beinhaltet das hinzufügen oder entfernen oder verschieben Elemente um Sie herum, sollten Sie unbedingt verwenden .detach(), wenn du etwas tust, wie addClass, nicht trennen.

    Wenn Sie sich unsicher sind, spezielle Griffe oder wie viele qualifiziert sich als 'viele', sollten Sie einen test durchführen.

    Hier ist ein einfacher Vergleich, die ich in dieser Frage die Debatte:
    http://jsbin.com/uwode3/5 vs http://jsbin.com/uwode3/4

    • detach() ist nur ein wrapper für remove() mit einem zusätzlichen parameter zu behalten, jQuery Daten an. github.com/jquery/jquery/blob/master/src/manipulation.js#L298 Wie wirkt sich diese Antwort OP ' s Frage zu performance?
    • Oh, ich wusste gar nicht, dass doch im Grunde alle anderen schon erwähnt .detach() bereits. Die .detach () - Methode hilft bei der Herstellung von DOM-Manipulationen aus DOM, die gleiche Idee wie .clone(). Nur .detach() ist sicherer/lessbraincycles zu verwenden als .entfernen().
    • schauen Sie sich auch den 1.4 release-notes, die erwähnen, das genaue Anwendungsfall für trennen. jquery14.com/day-01/jquery-14 Suche nach trennen.
    • Nur ein Hinweis: wenn Sie möchten, erstellen Sie JavaScript-performance-test-Fällen einfach, verwenden Sie einfach jsPerf.
    InformationsquelleAutor Mark
  2. 7

    Tatsächlich, die Implikation ist, dass es effizienter wäre, zu ändern geklonten Elemente vor dem einfügen in den DOM, als legen Sie die geklonten Elemente in das Dokument und dann ändern Sie. Ob oder nicht Klon-ändern-ersetzen Sie effizienter ist als eine einfache änderung der Elemente in-place wird wahrscheinlich von einem viel auf, welche änderungen Sie machen wollen... Wie immer Profil Ihren code und wählen Sie dann die option, die am besten Ihren Bedürfnissen entspricht, basierend auf realen Daten.

    ...Und wenn du schon dabei bist... kannst Du "trennen" ein DOM-element direkt: rufen Sie einfach removeChild() (oder, da Sie mit jQuery, detach()) - das element existiert noch, wie lange behalten Sie einen Verweis auf Sie, und Sie können es wieder eingefügt, nachdem Sie fertig sind änderungen vorzunehmen.

    ...Oh, und unabhängig davon, welche Technik Sie am Ende mit, werden Sie fast sicher sehen, bessere Ergebnisse bei der Beseitigung der übergeordneten UL als von entfernen jeder der 1K-Kind-LI-Elemente, ein zu einer Zeit...

    • Wie diese? --------- var $ul = $(ul); $ul.removeChild(); $ul.appendTo("body");
    • ach ja, richtig, jQuery... benutzen Sie Einfach remove() dann: var ul = $("ul").remove(); /* modifications to children of ul ... */ ; ul.appendTo("body"); Beachten Sie, dass jQuery funktioniert Prima auf freistehende Elemente - können Sie immer noch suchen und filtern Sie die Nachkommen der Liste im normal Mode.
    • .remove() löscht jQuery Daten, die den Knoten zugeordnet, wie z.B. Veranstaltungen. Es würde mehr Sinn machen, zu verwenden .detach(), wie ich vorgeschlagen habe in meiner Antwort.
    InformationsquelleAutor Shog9
  3. 2

    Gibt es eine weitere effiziente Methode: .detach() Sie von dem Baum, ändern und anschließend wieder einsetzen.

    Allerdings, wenn Sie nur das ändern der Eigenschaften der DOM-Objekte, und Sie nicht Lesen, Sie sollte nicht auslösen reflow (das ist der langsame operation) wie auch immer, zumindest nicht im firefox (von dem, was ich gelesen habe). Obwohl abnehmen und Wiederanbringen stellt sicher, dass gibt es höchstens zwei fließt.

    InformationsquelleAutor Mewp
Schreibe einen Kommentar