2011-12-31 16 views
7

¿Cuál es la diferencia entre Ext.get() y document.getElementById() en términos de rendimiento? ¿Será Ext.get() más lento ya que internamente puede llamar al document.getElementById()? ¿O hay alguna ventaja específica de usar Ext.get()?Cuál es mejor - Ext.get() o document.getElementById()

+0

'document.getElementById() == Ext.get(). Dom' – Jaider

Respuesta

15

La ventaja principal de Ext.get sobre getElementById es que le devuelve una instancia de Ext.Element.Esta instancia no solo contiene la referencia de nodo DOM que getElementById le daría, sino que también la amplía de manera significativa, ofreciendo un conjunto de métodos de conveniencia, normalización de eventos y un planchado de diferencias entre navegadores.

En la superficie getElementById puede tener una ganancia de velocidad minúscula sobre Ext.get simplemente sobre la base de una función menos antes de llegar a la misma llamada DOM fundamental. Sin embargo, en términos de rendimiento general, lo que haga con el elemento después de la recuperación probablemente tendrá mucho más impacto que la recuperación misma. Tener la envoltura de Ext.Element a mano puede ser muy beneficiosa.

Es posible que desee echar un vistazo a Ext.fly también. Este método es similar a Ext.get, con la excepción de que le devuelve una instancia de Ext.Element singleton. No servirá de nada si necesita almacenar el elemento para usarlo más adelante, pero si realiza operaciones sencillas y únicas contra nodos DOM exclusivos, puede ser más económico que Ext.get.

3

document.getElementById() es nativo de JavaScript y así será más rápido que Ext.get()

Ahora, ¿por Ext.get() es allí en absoluto,

document.getElementById() devuelve un elemento DOM, mientras Ext.get() devuelve un objeto Ext que es apto para encadenar propósitos.

Y esta es también la razón por la cual jQuery tiene un $("#elm_id"). Tenga en cuenta que Ext.get() también es mucho más fácil de escribir :)

3

Ext.get() permite utilizar un String ID, un HTMLElement existente o un Ext.Element, por lo que es un poco más flexible. document.getElementById() solo acepta la Id. De cadena.

Dicho esto, solo usaría document.getElementById() si satisface sus necesidades. Es nativo del navegador y debe ser un poco más rápido, y es una llamada menos a la que te estás encadenando a un marco de JavaScript específico.

0

No estoy familiarizado con la biblioteca Ext, pero con Javascript vainilla, solo hay un puñado de maneras de obtener un elemento en particular; puedes obtenerlo por su ID, buscarlo después de obtener todos los elementos por un nombre de etiqueta (así es como JQuery obtiene los elementos por nombre de clase, creo) o, nuevo en HTML5, obtener un elemento por un nombre de clase. Hay algunas otras formas si se vuelve creativo;) Solo obtenerlo por ID es el más rápido, asumiendo que no guardó una referencia local.

Por lo tanto, si todo lo que intenta hacer es obtener un elemento sin hacer lo que Ext.js hace a través de esa llamada de función, vainilla Javascript será mucho más rápido.

3

En términos de rendimiento, las funciones JS nativas siempre serán más rápidas.

Sin embargo, no estoy diciendo que no usar JS Bibliotecas, son grandes, ya que:

  • reducen el tiempo al escribir el código de
  • que hacen que el código sea más legible
  • se escribe menos código (reduciendo el tamaño del archivo y el tiempo de descarga)

Y al final, tal vez incluso ahorre tiempo porque menos código significa una descarga más rápida y en algunos casos podría incluso superar el rendimiento.

Así que sí, es lo mismo usar uno sobre el otro, ya que en una mano se ahorra tiempo por rendimiento ("document.getElementById()") y en la otra se reduce el tamaño del archivo y el tiempo de descarga ("Ext .obtener()").

Puede usar ambos y no debe haber ninguna diferencia notable.

1

Como otros han eludido aquí, el método utilizado depende de la necesidad, si solo desea obtener una referencia al elemento dom para algún propósito no Ext, también puede usar la función nativa, pero si tiene la intención de realizar acciones en el objeto devuelto en un contexto Ext, Ext.get le devolverá una referencia de Elemento que ofrece métodos adicionales.

Ext.get es la abreviatura de Ext.ComponentManager.get y aunque es una llamada a una función de biblioteca y puede ser menos eficiente, debe tenerse en cuenta que hay ~ 180 métodos disponibles en Ext.Element, por lo que si necesita estos puede valer la pena incluir la llamada contenedora.

Como owlness ha mencionado, Ext.fly() está diseñado cuando necesita realizar una sola función en un elemento, por ej. Ext.fly("myDiv").hide(); mientras que Ext.get() está destinado cuando necesita obtener una referencia a un elemento para su uso posterior, por ejemplo. var something = Ext.get("myDiv"); luego quizás something.sort(); something.badger(); return something;

Cuestiones relacionadas