Ext. Get () and Ext. Fly ()

Ext. Get () and Ext. Fly ()

We can see ext from the very beginning. the fly function, I thought it was similar to Ext. there is no difference in get. In addition, I had a superficial understanding of JS performance-related issues at the time, and I had never been concerned about the difference. In Learning extjs, I saw a dedicated Ext. fly is particularly strong

We can see ext from the very beginning. the fly function, I thought it was similar to Ext. there is no difference in get. In addition, I had a superficial understanding of JS performance-related issues at the time, and I had never been concerned about the difference. In Learning extjs, I saw a dedicated Ext. fly emphasizes the following:

This isn't exactly a speed tip, but is more about conserving memory by using something called a "flyweight" to perform simple tasks, which results in higher speed by not clogging up the browser's memory
The general meaning is that Ext. Fly uses the flyweight mode to share the memory of all the fly elements, which can increase the program execution speed and reduce memory usage.

This section aroused my interest in this function. After all, I have been engaged in JS performance optimization problems recently and are very sensitive to the word "Memory. After reading the ext source code to implement get and fly, I checked some information on the Internet and finally got a deeper understanding of the similarities and differences between them. Official ext developers provide the following explanations:

Ext. Element wraps a lot of functionality around Dom element/node, for example functions like hide, show, all animation stuff, dimensions getting and setting function and a lot more.

Ext. element keeps reference to Dom element it is wrapped around und in DOM property. once you have an ext. element (e.g. you call ext. get ('some-id') It is an instance of element class and you can work with it as such.

Now, imagine that you need to hide 1000 DOM nodes, you call 1000 times Ext. get ('some-one-of-1000-id '). hide () So you create 1000 instances of element just to call one function: Hide.

Ext. fly is one instance of Ext. element with "Replaceable" dom node it is wrapped around. if you call 1000 times Ext. fly ('ssome-one-of-1000-id '). hide () You 1000 times replace DOM property of one instance of Ext. element.

Result: higher performance, lower memory usage.

You only need to keep in mind that you cannot keep element returned by Ext. Fly for later use as it's Dom will sooner or later gets replaced by another one.

In this section, the general meaning is as follows:

Ext. element is a powerful encapsulation of DOM elements by Ext. It encapsulates many interfaces for convenient Dom operations (and references the corresponding DOM elements through the DOM attribute of element ), therefore, each element creation consumes a lot of memory (mainly a large amount of operation interface consumption ), therefore, if too many element elements are created, the memory usage will increase dramatically and the system performance will decrease.

Ext. get and ext. fly returns an element object, but Ext. get returns an independent element and has its own independent operation interface encapsulation. It can save the returned value to the variable for future call operations, which makes reuse easier. However, one of its major drawbacks is memory consumption. If Ext. Get (ID) is called 1000 times, 1000 independent elements will be created in the memory, and its memory usage can be imagined. However, in many cases, we may just execute a simple operation on the DOM element, such as hiding (hide). If we create an independent element in the memory every time, it is a huge waste of memory, so when we only need to perform one operation or a very simple operation, we use Ext. get seems unreasonable. Ext. Fly is designed to solve this problem. It saves memory by enabling a set of Operation interfaces in the shared memory of each created element.

Next let's take a look at the Ext. Fly implementation code (I added some notes ):

VaR flyfn = function () {}; flyfn. prototype = el. prototype; VaR _ CLS = new flyfn (); // put all operation interfaces of element in _ Cls. // Dom is optional el. flyweight = function (DOM) {This. DOM = Dom ;}; // only contains the object El of a DOM attribute. flyweight. prototype = _ CLS; // copy the operation interface to the element Instance Object el. flyweight. prototype. isflyweight = true; // indicates that the element is a flyweight object el. _ flyweights ={}; // flyweight object cache container el. fly = function (El, named) {named = named | '_ Global'; El = ext. getdom (EL); // gets the DOM object if (! El) {return NULL;} If (! El. _ flyweights [named]) {el. _ flyweights [named] = new El. flyweight (); // calls Ext. create a flyweight object and cache} el. _ flyweights [named]. DOM = El; // point the DOM attribute of the flyweight object to this El return El. _ flyweights [named];};

From the code above, it is not difficult to see that only the first call of Ext. fly creates a flyweight object (this object contains all the operation interfaces of the element) and caches it. All subsequent fly operations only modify the DOM attribute of the flyweight object, the results returned by fly every time are shared with the same flyweight object. In this way, each element returned by fly reduces the creation of a large number of Operation interfaces for each element compared to Ext. Get. All fly objects share a set of element operation interfaces. The memory usage is naturally much less, and the execution speed is also improved. In a large number of creation operations, the effect is more obvious.

Due to the fly operating principle, we cannot save the fly returned results in variables for reuse, because each fly operation may change the DOM orientation of the variable. The following code is incorrect:

VaR my_id = ext. fly ('My _ id'); Ext. fly ('another _ id'); // at this time, the DOM reference of my_id has changed to another_id my_id.highlight ('ff000000'. {// The operation here will be the operation endcolor for the another_id element: '0000ff', Duration: 3 });

In future use, ext. Get and Ext. Fly must be used properly to avoid misuse of Ext. Get, a "heavyweight" method.

Source: ext
Address: http://cms.17ext.com/html/Ext_Form/2009/0420/ext-get-and-ext-fly.html