Jquery performance optimization Guide (2)

4. restrict direct Dom operations The basic idea here is to create what you really want in the memory and then update the Dom. This is not a jquery best practice, but it must be used for effective JavaScript operations. Direct Dom operations are slow.

For example, if you want to dynamically create a group of list elements, do not do this, as shown below:

VaR top_100_list = [...], // assume there are 100 unique strings $ mylist = $ ("# mylist"). // select <ul> element for (VAR I = 0, L = top_100_list.length; I <L; I ++) {$ mylist. append ("<li>" + top_100_list [I] + "</LI> ");}

We should create all the element strings before inserting them into the Dom, as shown below:

VaR top_100_list = [...], $ mylist = $ ("# mylist"), top_100_li = ""; // This variable is used to store the list element for (VAR I = 0, L = top_100_list.length; I <L; I ++) {top_100_li + = "<li>" + top_100_list [I] + "</LI>" too many rows mylist.html (top_100_li );

Note: I remember a friend wrote this before. Code :

For (I = 0; I <1000; I ++ ){

VaR $ mylist = $ ('# mylist ');

$ Mylist. append ('this is list item' + I );

}

You should have seen the problem. Since the # mylist loop is obtained 1000 times !!! 5. Bubble

Unless in special circumstances, every JS event (such as click, Mouseover, etc.) will bubble to the parent node.
This is useful when we need to call the same function for multiple elements.

Instead of listening to this inefficient multi-element event, you only need to bind it to their parent node once.

For example, we need to bind a form with many input boxes to add a class when the input box is selected.

The traditional method is to directly select input and bind focus, as shown below:

$ ("# Entryform input "). BIND ("Focus", function () {$ (this ). addclass ("selected ");}). BIND ("Blur", function () {$ (this ). removeclass ("selected ");});

Of course, the above Code can help us complete the corresponding tasks, but if you want to find a more efficient method, please use the following code:

$ ("# Entryform "). BIND ("Focus", function (e) {var $ cell = triggers (e.tar get); // e.tar get captures the triggered target element $ cell. addclass ("selected ");}). BIND ("Blur", function (e) {var $ cell = values (e.tar get); $ cell. removeclass ("selected ");});

You can perform operations on the target element by obtaining the focus and losing the focus in the parent listener.
In the code above, the parent element plays the role of a dispatcher, which can bind events based on the target element.
If you find that many elements are bound to the same event listener, you must know what is wrong. Similarly, we can use this method to improve the Code during table operations: the common method:

$ ('# Mytable TD'). Click (function () {comment (this).css ('background', 'red ');});

Improvement Method:

$ ('# Mytable'). Click (function (e ){

VaR $ clicked = require (e.tar get );

Export clicked.css ('background', 'red ');

});

Suppose there are 100 TD instances. When using the common method, you bind 100 events.

In the improvement method, you only bind one event to one element. As a result, the efficiency of 100 events is high, and the efficiency of one event is high. I believe you can also identify it on your own. 6. Delay to $ (window). Load

Jquery is a very attractive thing for developers to hook anything to $ (document). Ready.
Although $ (document). Rady is indeed useful, it can be executed before other elements are downloaded during page rendering.
If you find that your page is always in the loading status, it is probably caused by the $ (document). Ready function.

You can bind the jquery function to the $ (window). Load event to reduce the CPU usage during page loading.
It will be executed after all HTML (including <IFRAME>) are downloaded.

$ (Window). Load (function () {// jquery function initialized after the page is fully loaded .});

Some special effects, such as drag-and-drop, visual effects and animations, and pre-loading hidden images, are suitable for this technology. 7. Compress Javascript Compress and minimize your JavaScript files. Online compressed address: http://dean.edwards.name/packer/
Before compression, make sure that your code is normalized. Otherwise, JavaScript errors may fail. The jquery performance optimization Guide (2) ends now. Guide (3) is in progress... I believe you have your idea. Please share it with us. Email: cssrain@gmail.com http://www.artzstudio.com/2009/04/jquery-performance-rules/chinese translation :http://rlog.cn/350 & http://cssrain.cn