25 tips for effectively improving jQuery code efficiency

JQuery is a very good JavaScript framework. For more information about it, click here. Today, I have compiled some tips to improve jQuery efficiency and hope to help you.

1. Load jQuery from Google Code

Google Code has hosted a variety of JavaScript class libraries. Loading jQuery from Google Code is more advantageous than loading it directly from your server. It saves the bandwidth on your server and can quickly load JS class libraries from Google's Content Distribution Network (CDN. More importantly, if a user accesses a site published on Google Code, it will be cached.

This is meaningful. How many sites use the same jQuery copy that has not been cached, which is easy to do:

<Script src = "<SPAN> <A href =" http://www.google.com/jsapi "> http://www.google.com/jsapi </A>"> </script>

<Script type = "text/javascript">

// Load jQuery

Google. load ("jquery", "1.2.6 ");

Google. setOnLoadCallback (function (){

// Your code goes here.

});

</Script>

<Script src = "http://www.google.com/jsapi"> </script>

<Script type = "text/javascript">

// Load jQuery

Google. load ("jquery", "1.2.6 ");

Google. setOnLoadCallback (function (){

// Your code goes here.

});

</Script>

Alternatively, you can directly reference JS:

Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type = "text/javascript"> </script>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type = "text/javascript"> </script>

Here are detailed usage instructions

2. Use the memo form
Not only jQuery, but many programming languages also have similar memos. On an A4 paper, you can easily see the usage of each function. Fortunately, there are good guys who have made jQuery's memo sheet perfect:
Http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/

Http://colorcharge.com/jquery/

[Note]
JQuery 1.3 Cheat Sheet

3. Integrate all scripts and reduce them

Yes. This is a common JavaScript technique. However, a large project that uses jQuery may use many related jQuery plug-ins (easing, localScroll, lightbox, and preload are used on this site), so it is usually applicable. The browser cannot load JS scripts at the same time (in most cases), which means that if you load many scripts at the same time, the page loading speed will be slowed down. Therefore, if you need to load these scripts on each page, you should consider integrating these scripts into a slightly larger JS script before release. Some jQuery plug-ins have been minimized, but you should package your JS scripts and those that have not been reduced, which takes only a few seconds to complete.

Personally, I recommend Packer by Dean Edwards.

4. Use Firebug's excellent console logging tool
If you have not installed Firebug, you should install it. In addition to many other useful features (such as allowing you to check http Transmission Conditions and find your CSS problems), it also has excellent log commands that allow you to easily debug JS scripts.
Here is a detailed description of all Firebug features.
My favorite feature is "lele.info". You can use it to output information and variable values to the console without using alert; "console. time allows you to set a timer on a set of code to calculate the time spent running the JS script. It is easy to do this:

Console. time ('create list ');

For (I = 0; I <1000; I ++ ){
Var myList = $ ('. mylist ');
MyList. append ('this is list item' + I );
}

Console. timeEnd ('create list ');

• 6 pages in total:
• Previous Page
• 1
• 2
• 3
• 4
• 5
• 6
• Next Page