Which is better - Ext.get () or document.getElementById ()

Question

What is the difference between Ext.get() and document.getElementById() in terms of performance? Will Ext.get() slower since it can internally call document.getElementById() ? Or is there any specific advantage to using Ext.get() ?

Answer 1

The main advantage of Ext.get over getElementById is that it returns an instance of Ext.Element to you. This instance not only contains the DOM node link that getElementById will receive, but also significantly expands it - offering a set of convenient methods, normalizing events, and smooth differences between browsers.

On the surface, getElementById can have some minimal increase in speed according to Ext.get, simply based on one smaller function, before moving on to the same main DOM call. However, in terms of overall performance, what you do with the item after the extraction is likely to have a much greater effect than the extraction itself. Having an Ext.Element cover on hand can be very useful.

You might also want to take a look at Ext.fly. This method is similar to Ext.get with the exception that it returns you a single-instance instance of Ext.Element. It will not be good if you need to save the element for later use, but if you do simple one-time operations against unique DOM nodes, it can be cheaper than Ext.get.

Answer 2

document.getElementById() is native JavaScript and therefore will be faster than Ext.get()

Now, why is Ext.get() at all,

document.getElementById() returns a DOM element, and Ext.get() returns an Ext object that is suitable for chaining.

And that is also the reason jQuery has $("#elm_id") . Note that Ext.get() also much easier to type :)

Answer 3

Ext.get() allows you to use a String ID, an existing HTMLElement or Ext.Element - so it's a little more flexible. document.getElementById() accepts only the row id.

However, I would use document.getElementById() if it suits your needs. It is native to the browser and should be a little faster - and this is another call that you bind to a specific JavaScript structure with.

Answer 4

In terms of performance, JS built-in features will always be faster.

However, I am not saying that I am not using JS libraries, they are great because they are:

• reduce code writing time
• it will make your code more readable
• you write less code (reducing file size and loading time)

And in the end, you might even save time, because less code means faster loading, and in some cases it can even beat performance.

So yes, it’s the same as using one on top of the other, because in one hand you save time in performance ("document.getElementById ()"), and in the other you reduce the file size and load time ("Ext. Get ( ) ").

You can use both and there should be no noticeable difference.

Answer 5

As others have escaped here, the method used depends on the need, if you just want to get a reference to the dom element for some non Ext purpose, you can also use the built-in function, but if you intend to perform actions on the returned object in the Ext context, then Ext .get will return you a link to an element that offers additional methods.

Ext.get is a shorthand for Ext.ComponentManager.get, and although it is a library function call and may be less efficient, it should be noted that there are ~ 180 methods on Ext.Element, so if you need these, you can include a wrapper.

As co-compatibility said, Ext.fly () is designed when you need to perform one function for an element, for example. Ext.fly("myDiv").hide(); whereas Ext.get () is intended when you need an element reference for later use, for example. var something = Ext.get("myDiv"); , then maybe something.sort(); something.badger(); return something; something.sort(); something.badger(); return something;

Answer 6

I am not familiar with the Ext library, but with vanilla Javascript there are only a few ways to get a specific element; you can get it by its identifier, find it after receiving all the elements by the tag name (this is how JQuery gets the elements by the class name, which I suppose), or, new to HTML5, get the element by the class name. There are several more ways if you are creative;) Just getting it by ID is the fastest if you have not saved the local link.

So, if all you are trying to do is get the element without executing what Ext.js does through this function call, javascript with javascript will be much faster.