2011-12-31 3 views
7

В чем разница между Ext.get() и document.getElementById() с точки зрения производительности? Будет ли Ext.get() медленнее, так как он может внутренне звонить document.getElementById()? Или есть какое-то конкретное преимущество использования Ext.get()?Что лучше - Ext.get() или document.getElementById()

+0

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

ответ

15

Основным преимуществом Ext.get over getElementById является то, что он возвращает экземпляр Ext.Element.Этот экземпляр не только содержит ссылку на узел DOM, которую получит getElementById, но также значительно расширяет его - предлагая набор удобных методов, нормализацию событий и гладкость различий между браузерами.

На поверхности getElementById может иметь некоторое минимальное увеличение скорости по Ext.get просто на основе одной меньшей функции, прежде чем перейти к одному и тому же основному вызову DOM. Однако с точки зрения общей производительности то, что вы делаете с элементом после извлечения, скорее всего, будет иметь гораздо больший эффект, чем само извлечение. Наличие обертки Ext.Element под рукой может оказаться весьма полезным.

Возможно, вы также захотите взглянуть на Ext.fly. Этот метод аналогичен Ext.get с исключением, что он возвращает вам одноэкземплярный экземпляр Ext.Element. Это не будет хорошо, если вам нужно сохранить элемент для последующего использования, но если вы выполняете простые одноразовые операции с уникальными узлами DOM, это может быть дешевле, чем Ext.get.

3

document.getElementById() является родным JavaScript и так будет быстрее, чем Ext.get()

Теперь почему Ext.get() там вообще,

document.getElementById() возвращает DOM элемент, в то время как Ext.get() возвращает Ext объект, который является подходящим для цепочки целей.

И это также является причиной того, что у jQuery есть $("#elm_id"). Обратите внимание, что Ext.get() также гораздо проще набрать :)

3

Ext.get() позволяет использовать String ID, существующий HTMLElement или Ext.Element, поэтому он немного более гибкий. document.getElementById() принимает только идентификатор строки.

Тем не менее, я бы просто использовал document.getElementById(), если он соответствует вашим потребностям. Он является родным для браузера и должен быть немного быстрее - и это еще один вызов, который вы привязали к определенной структуре JavaScript.

0

Я незнаком с библиотекой Ext, но с ванильным Javascript есть только несколько способов получить определенный элемент; вы можете получить его по его идентификатору, найти его после получения всех элементов по имени тега (это как JQuery получает элементы по имени класса, которые, как я полагаю), или, новое для HTML5, получить элемент по имени класса. Есть несколько других способов, если вы получите творческий подход;) Просто получить его по ID является самым быстрым, если вы не сохранили локальную ссылку.

Итак, если все, что вы пытаетесь сделать, это получить элемент, не выполняя то, что делает Ext.js через этот вызов функции, ванильный Javascript будет намного быстрее.

3

С точки зрения производительности, встроенные функции JS всегда будут быстрее.

Однако, я не говорю, чтобы не использовать JS библиотеки, они являются большими, как они:

  • сократить время при написании кода
  • это сделать код более читаемым
  • вы пишете меньше код (сокращение размера файла и времени загрузки)

И, в конце концов, возможно, вы даже сэкономите время, потому что меньше кода означает более быструю загрузку, и в некоторых случаях это может даже побить производительность.

Так что, одно и то же, чтобы использовать один над другим, поскольку в одной руке вы экономили время по производительности («document.getElementById()»), а в другом вы уменьшаете размер файла и время загрузки («Ext .получить()").

Вы можете использовать оба и не должно быть заметной разницы.

1

Как и другие, которые не ускользнули отсюда, используемый метод зависит от необходимости, если вы просто хотите получить ссылку на элемент dom для некоторой цели не Ext Ext, вы можете также использовать встроенную функцию, но если вы намереваетесь выполнять действия на возвращаемом объекте в контексте Ext, тогда Ext.get вернет вам ссылку на элемент, которая предлагает дополнительные методы.

Ext.get является сокращением для Ext.ComponentManager.get, и хотя это вызов функции библиотеки и может быть менее эффективным, следует отметить, что на Ext.Element существует ~ 180 методов, поэтому, если вам нужно это может стоить, включая вызов обертки.

Как указано в соборе, Ext.fly() разработан, когда вам нужно выполнить одну функцию на элементе, например. Ext.fly("myDiv").hide();, тогда как Ext.get() предназначен, когда вам нужна ссылка на элемент для последующего использования, например. var something = Ext.get("myDiv");, а затем, возможно, something.sort(); something.badger(); return something;