Was ist besser - Ext.get () oder document.getElementById ()

7

Was ist der Unterschied zwischen Ext.get() und document.getElementById() in Bezug auf die Leistung? Wird Ext.get() langsamer sein, da intern document.getElementById() aufgerufen werden kann? Oder gibt es einen bestimmten Vorteil der Verwendung von Ext.get() ?

    
hop 31.12.2011, 16:35
quelle

6 Antworten

15

Der Hauptvorteil von Ext.get gegenüber getElementById besteht darin, dass es Ihnen eine Ext.Element-Instanz zurückgibt. Diese Instanz enthält nicht nur die DOM-Knotenreferenz, die getElementById Ihnen geben würde, sondern erweitert sie auch erheblich - sie bietet eine Reihe von Komfortmethoden, Ereignisnormalisierung und das Ausblenden von browserübergreifenden Unterschieden.

Auf der Oberfläche kann getElementById eine winzige Geschwindigkeitsverstärkung über Ext.get haben, einfach auf der Grundlage einer Funktion weniger, bevor es zu demselben fundamentalen DOM-Aufruf kommt. In Bezug auf die Gesamtleistung wird jedoch das, was Sie nach dem Abruf mit dem Element tun, wahrscheinlich viel mehr Auswirkungen haben als das Abrufen selbst. Den Ext.Element-Wrapper zur Hand zu haben, kann sich als sehr nützlich erweisen.

Vielleicht möchten Sie sich auch Ext.fly anschauen. Diese Methode ähnelt Ext.get mit der Ausnahme, dass sie eine Singleton-Ext.Element-Instanz zurückgibt. Es wird nicht gut sein, wenn Sie das Element für die spätere Verwendung speichern müssen, aber wenn Sie einfache, einmalige Operationen gegen eindeutige DOM-Knoten durchführen, ist es möglicherweise billiger als Ext.get.

    
owlness 31.12.2011, 22:15
quelle
3

document.getElementById() ist natives JavaScript und ist daher schneller als Ext.get()

Nun, warum Ext.get() überhaupt da ist,

document.getElementById() gibt ein DOM-Element zurück, während Ext.get() ein Ext -Objekt zurückgibt, das für Verkettungszwecke geeignet ist.

Und das ist auch der Grund, warum jQuery eine $("#elm_id") hat. Bitte beachten Sie, dass Ext.get() auch viel einfacher zu tippen ist:)

    
naveen 31.12.2011 16:49
quelle
3

Ext.get() ermöglicht die Verwendung einer String-ID, eines vorhandenen HTMLElement oder eines Ext.Element - so ist es ein bisschen flexibler. document.getElementById() akzeptiert nur die String-ID.

Das heißt, ich würde nur document.getElementById() verwenden, wenn es Ihren Bedürfnissen entspricht. Es ist nativ für den Browser und sollte ein wenig schneller sein - und es ist ein Aufruf weniger, dass Sie sich an ein bestimmtes JavaScript-Framework mit verketten.

    
ziesemer 31.12.2011 16:49
quelle
3

In Bezug auf die Leistung werden native JS-Funktionen immer schneller sein.

Allerdings sage ich nicht, dass ich JS Libraries nicht verwenden soll, sie sind großartig, wie sie:

  • reduzieren Sie die Zeit beim Schreiben Ihres Codes
  • es macht Ihren Code lesbarer
  • Sie schreiben weniger Code (Reduzierung der Dateigröße und Download-Zeit)

Und am Ende sparen Sie vielleicht sogar Zeit, weil weniger Code einen schnelleren Download bedeutet und in manchen Fällen sogar die Leistung übertrifft.

Also ja, es ist das gleiche, einen über dem anderen zu verwenden, da Sie in einer Hand Zeit durch Leistung sparen ("document.getElementById ()") und in der anderen Sie Dateigröße und Downloadzeit reduzieren ("Ext. get () ").

Sie können beide verwenden und es sollte keinen merklichen Unterschied geben.

    
ajax333221 31.12.2011 18:30
quelle
1

Wie anderen hier entgangen ist, hängt die verwendete Methode von der Notwendigkeit ab. Wenn Sie nur einen Verweis auf das dom-Element für einige nicht-externe Zwecke erhalten möchten, können Sie auch die native Funktion verwenden, aber wenn Sie Aktionen ausführen möchten das zurückgegebene Objekt in einem Ext-Kontext, dann gibt Ext.get Ihnen eine Element-Referenz zurück, die zusätzliche Methoden anbietet.

Ext.get ist Abkürzung für Ext.ComponentManager.get und obwohl es ein Aufruf an eine Bibliotheksfunktion ist und weniger effizient ist, sollte beachtet werden, dass es ~ 180 Methoden für Ext.Element gibt, wenn Sie diese benötigen Es kann sich lohnen, einen Wrapper-Aufruf einzubeziehen.

Wie bereits erwähnt, wird Ext.fly () entworfen, wenn Sie eine einzelne Funktion für ein Element ausführen müssen, z. Ext.fly("myDiv").hide(); , während Ext.get () gemeint ist, wenn Sie einen Verweis auf ein Element zur späteren Verwendung benötigen, z. var something = Ext.get("myDiv"); dann vielleicht something.sort(); something.badger(); return something;

    
dougajmcdonald 01.01.2012 01:08
quelle
0

Ich bin mit der Ext-Bibliothek nicht vertraut, aber mit Vanille-Javascript gibt es nur eine Handvoll Möglichkeiten, ein bestimmtes Element zu erhalten; Sie können es durch seine ID erhalten, suchen Sie danach, nachdem Sie alle Elemente durch einen Tag-Namen bekommen haben (so bekommt JQuery Elemente nach Klassennamen), oder, neu zu HTML5, erhalten Sie ein Element nach einem Klassennamen. Es gibt ein paar andere Möglichkeiten, wenn Sie kreativ werden;) Es ist am schnellsten, wenn Sie es nach ID bekommen, vorausgesetzt, Sie haben keine lokale Referenz gespeichert.

Also, wenn Sie nur versuchen, ein Element zu bekommen, ohne das zu tun, was Ext.js über diesen Funktionsaufruf tut, wird Vanille Javascript viel schneller.

    
Jeffrey Sweeney 31.12.2011 16:52
quelle