Tips for Maximizing jQuery

Posted on - Last Modified on

jQuery is a very popular and powerful framework.  To get the most out of it and increase performance across the board, use these simple tips.

 

·         Make sure that you're using the latest version

 

jQuery is constantly being updated, with improvements and enhancements happening almost daily.  In order to stay on top of things without having to download the library over and over, you can make use of Google.  Google has a large number of Ajax libraries that you can choose from.

 

·         Combine your scripts

 

Most of the browsers in use today can only process one script at a time, so they cue them up, resulting in increased load times.  If you make the assumption that scripts are loaded on every page of your web site, you should put all of your scripts in one file and compress them with any one of the available compression tools to speed up load times.

 

·         Use IDs instead of classes

 

Part of the power of jQuery is the selection of DOM elements. Using classes is just as easy as selecting elements with an ID, but it is better to select by ID if possible since jQuery uses the native method of your browser and does not use any of its own DOM transversal.  This makes it much faster.

 

·         Use Cache liberally

 

Novice users of jQuery often make the mistake of reusing selectors over and over again.  An experienced jQuery user will cache those in a variable.  When done in this manner, the DOM does not have to find your elements over and over again, resulting in a big increase in performance.

 

·         Create your own selectors

 

jQuery has many built-in selectors for selecting elements by way of tag, attribute, class, ID, and more.  If you come upon a situation where you need to select an element based on something that jQuery does not have an element for, jQuery has the ability to let you create your own selector.  Here is a block of code that illustrates this:

 

$.extend($.expr[':'], {

 over100pixels: function(a) {
 return $(a).height() > 100;

 }

});

 

$('.box:over100pixels').click(function() {

alert('The element clicked is over 100 pixels high');

});

 

The very first block of code here shows how to create a selector that will find an element that's more than 100 pixels in height.  The next block of code adds click handlers to all of the elements.  This is a very powerful tool to have, and if you want to learn more about the subject, you can Google “custom jQuery selector” and get more powerful examples.

 

When jQuery is used correctly, it can add functionality and performance improvements to your webpages.  When it is not used in the correct manner, it can blog down the performance of your pages and make them slow to load.  Use these tips to get the most of out of your Web pages.

Posted 10 April, 2015

Happymarli

Proofreader, Editor, Writer and App Developer

Do you need a professional editor and writer to proofread your technical documents, thesis, novel, statement of purpose, personal statement, resume, cover letter, manuscript, essay, short story, textbook content, or articles? Do you want to make sure that your marketing material content is flawless and appealing to readers? I can do any of that! I am a professional editor (academic, copy, line/su...

Next Article

How to Make Your Own Searchable Database