JQuery Performance Tuning Guide (2) _jquery

4, restrictions on direct DOM operations

The basic idea here is to create what you really want in memory, and then update the DOM.

This is not a jquery best practice, but it must be a valid JavaScript operation. The direct DOM operation is slow.

For example, if you want to create a set of list elements dynamically, do not do so, as follows:

var top_100_list = [...],//Suppose this is a 100 unique string

$mylist = $ ("#mylist"); JQuery selection to <ul> elements

For (Var i=0, l=top_100_list.length i<l; i++) {

$mylist. Append ("<li>" + top_100_list[i] + "</li>");

}

We should create the entire set of element strings before inserting them into the DOM, as follows:

var top_100_list = [...], $mylist = $ ("#mylist"), Top_100_li = ""; This variable will be used to store our list elements.

For (Var i=0, l=top_100_list.length i<l; i++) {

Top_100_li + + "<li>" + top_100_list[i] + "</li>";

}

$mylist. HTML (TOP_100_LI);

Note: I remember seeing a friend who had written this code before:

for (i = 0; i < 1000; i++) {

var $myList = $ (' #myList ');

$myList. Append (' This is List item ' + i);

}

Oh, you should have seen the problem. Since the #mylist cycle was captured 1000 times!!!

5, bubbling

Unless in exceptional circumstances, otherwise each JS event (for example: click, mouseover, etc.) Will bubble to the parent node.
This can be useful when we need to call the same function for multiple elements.

Instead of this inefficient, multiple-element event listener, you only have to bind to their parent node once.

For example, we want to bind a form that has a lot of input boxes to do this: Add a class to it when the input box is selected

The traditional approach is to select input directly, and then bind the focus, and so on, as follows:

$ ("#entryform input"). Bind ("Focus", function () {

$ (this). AddClass ("selected");

}. Bind ("Blur", function () {

$ (this). Removeclass ("selected");

});

Of course the code above can help us with the task, but if you're looking for a more efficient approach, use the following code:

$ ("#entryform"). Bind ("Focus", function (e) {

var $cell = $ (e.target); E.target captures the target element of the trigger

$cell. AddClass ("selected");

}. Bind ("Blur", function (e) {

var $cell = $ (e.target);

$cell. Removeclass ("selected");

});

The target element is manipulated by listening for the focus and losing the focus at the parent level.
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 you have a lot of elements bound to the same event listener, now you must know what is wrong.

In the same way, we can use this method to improve the code when the table is in operation:

The normal way:

$ (' #myTable TD '). Click (function () {

$ (this). CSS (' background ', ' red ');

});

How to Improve:

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

var $clicked = $ (e.target);

$clicked. CSS (' background ', ' red ');

});

Assuming there are 100 TD, you bind 100 events when using the normal way.

In the improved mode, you have only 1 events bound for one element,

As for the efficiency of the 100 events or the high efficiency of the 1 events, I believe you can tell them by yourself.

6, deferred to $ (window). Load

jquery has a tempting thing for developers to hang anything up to $ (document). Ready.
Although the $ (document). Rady is really useful, it can be performed when the page is rendered and the other elements are not finished downloading.
If you find that your page has been in the loading state, it is likely to be $ (document). The Ready function causes.

You can reduce the CPU usage when the page is loaded by binding the jquery function to the $ (window). Load event method.
It will be executed after all HTML (including <iframe>) is downloaded.

$ (window). Load (function () {

The jquery function that is initialized when the page is fully loaded.

});

Some special effects, such as drag and drop, visual effects and animations, preload hidden images and so on, are suitable for this technology.

7, compressed JavaScript

Compress and minimize your JavaScript files.

Online compression address: http://dean.edwards.name/packer/
Before compressing, please ensure that your code is normative, otherwise it may fail, resulting in a JS error.

jquery Performance Tuning Guide (2) This concludes, the Guide (3) is in progress ....

I believe you also have your idea, please share it out. Email:cssrain@gmail.com

Original English: http://www.artzstudio.com/2009/04/jquery-performance-rules/

Chinese translation: http://rlog.cn/350 & http://cssrain.cn