jquery Performance Optimization

Cache a jquery Object

Caching jquery objects is about telling us to get into the habit of caching jquery objects into variables.

var $active _light = $ ("#traffic_light Input.on"); $active _light.bind ("click", Function () {  }), $active _light.css ("Border", "1px dashed yellow"), $active _light.css ( "Background-color", "orange"); $active _light.fadein ("slow");

Remember, never let the same selector appear multiple times in your code. The above code can be improved using jquery's chained operation

var $active _light = $ ("#traffic_light Input.on"), $active _light.bind ("click", Function () {  })                     . css ("Border", " 1px dashed yellow ")                     . CSS (" Background-color "," orange ")                    . FadeIn (" slow ");

restrict direct DOM operations

The basic idea here is to build what you really want in memory and then update the DOM. The direct DOM operation is slow.
For example, if you want to create a list of elements dynamically, do not do so, as follows:

Original code

var top_100_list = [],//Suppose here are 100 unique strings $mylist = $ ("#mylist"); JQuery selection to <ul> element for (Var i=0, l=top_100_list.length; i<l; i++) {   $mylist. Append ("<li>" + top_100_l Ist[i] + "</li>"); Executed 100 times Append}

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

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>"; 100 operations are variables in the operation, regardless of the DOM, the speed is very much faster} $mylist. html (TOP_100_LI);

bubbling
Except in special cases, each JS event (for example: click, mouseover, etc.) Will bubble to the parent node.
This is useful when we need to invoke the same function for multiple elements. Instead of this inefficient multi-element event listener, you only have to bind to their parent node once. For example, we want to bind to a form that has many input boxes: Add a class to it when the input box is selected
The traditional approach is to select input directly, then bind focus, and so on, as follows:
Original code

$ ("#entryform input"). Bind ("Focus", function () {     $ (this). AddClass ("selected");}). Bind ("Blur", function () {     $ (this). Removeclass ("selected");});

New Code

$ ("#entryform"). Bind ("Focus", function (e) {     var $cell = $ (e.target);//E.target snaps to the triggering target element     $cell. addclass (" Selected "); }). bind ("Blur", function (e) {     var $cell = $ (e.target);    $cell. Removeclass ("selected");});

Similarly, in table operations, we can also use this approach to improve the code:
The normal way:

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

ways to improve

$ (' #myTable '). Click (function (e) {     var $clicked = $ (e.target);      

Assuming there are 100 TD, you are bound to 100 events when using the normal way. In the improved mode, you only have 1 events bound for one element.

Deferred to $ (window). Load
jquery is a tempting thing for developers to hook anything up to $ (document). Although $ (document). Rady is really useful, it can be executed when the page is rendered and other elements have not been downloaded. If you find that your page has been loaded in the state, it is likely that $ (document). The Ready function is causing the.

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

$ (window). Load (function () {    

compressing JavaScript
Compress and minimize your JavaScript files.

Online compression Address:

http://dean.edwards.name/packer/

Try to use ID instead of class
Original code

Create a Listvar $myList = $ (' #myList '); var mylistitems = ' <ul> '; for (i = 0; i < i++) {mylistitems +     = ' <li class= ' listItem ' + i + ' ">this are a list item</li> '; The class} Mylistitems + = ' </ul> ' is used here; $myList. HTML (mylistitems); Select each Li for (i = 0; i < i++) {     

At the end of the code, it took a total of 5066 milliseconds, more than 5 seconds, to select each li.
Then we make a comparison with the ID instead of class:

New Code

Create a Listvar $myList = $ (' #myList '); var mylistitems = ' <ul> '; for (i = 0; i < i++) {mylistitems +     = ' <li id= ' listItem ' + i + ' ">this are a list item</li> '; The id} mylistitems + = ' </ul> ' is used here; $myList. HTML (mylistitems); Select each Li for (i = 0; i < i++) {     

In the previous code, selecting each Li took a total of 61 milliseconds, nearly 100 times times faster than class.

jquery Performance Optimization