jQuery performance

jQuery is written in Javascript. jQuery is the fastest Javascript library for Web use but is still slow due to Javascript. You need to limit your jQuery to the essentials.

HTML restructure example

Your Web pages have a little bit of HTML the wrong shape. You add a couple of lines of jQuery to change the HTML. jQuery is blindingly fast for that type of change.

Then someone asks you to change the HTML in the cells of a table. There are only three cells in each row of the example table and only five rows. jQuery is still fast.

Then customers complain and management jumps on you for your stupid change. It is your fault customers are complaining. You then find out the customers are browsing a table with fifty columns and thousands of rows. You should not have used jQuery.

jQuery provides a quick way to demonstrate changes to your HTML and some should be converted back into changes to your HTML creation code. In Drupal you might change a .tpl file in your theme or work back further into a module. There are equivalents in other content management systems.

When should you avoid jQuery?

There are three deciding factors in jQuery. Download time, complexity, and processing overhead.

We looked at the example of a table jumping from five rows to thousands. Try to find the most extreme examples of processing then test on slower older computers.

Complexity is simple. You make a major change to a page using jQuery then you try to make another change to the same area but the second time around you are working with the theoretical construction from the first part of the code. You will probably lose track of what is happening before you try to add a third change. A good approach is to model a change using jQuery then, when everyone is happy, work the change back into your HTML generation code on the server. In the case of Drupal 7, reordering content is really easy and should be be done in Drupal, not jQuery.

Complexity can also be adding an accordion effect on top of a lightbox, something I did today. The change is really easy once you have a few months experience with jQuery, the accordion code, and the lightbox code, although some code will never work together even if you supply free beer and pizza. before i started on the combination, I moved some previous jQuery changes into the HTML generation code so the HTML would arrive in a stable order with the right ids and classes.

The download time of the jQuery code is generally not significant. If you have lots of little jQuery files, consider merging them or loading them at the end of the web page instead of at the start. Many browsers will load four files in parallel than wait before loading the next files. If you have eight files and merge them into four or less, you speed up the page download. There are also CSS files and image files so consider merging all your jQuery files into one.

Avoid searches

jQuery has an excellent selection system because it is similar to the CSS selection system you are already using. One big difference between good jQuery and bad jQuery is the use of searches. When you search for an element more than once, you waste resources. The best approach is to find the element once then save it in a variable and reuse it.

Selection by id is faster than a combination of selections by other characteristics. If you have to find something several times in different code, you can find it once then assign a unique id then find it again using the unique id. take the example of a footer that is identified by the class footer. The first time you find it, you might add the id footer then find by id in all other code.

Make the example more complicated. You might have the class footer on several footer elements. The search might be something like jQuery('.footer').first(). You could start with jQuery('.footer').first().attr('id', 'footer') then change all subsequent searches for footer into selections by id, jQuery('#footer').

jQuery is not secure

You can use jQuery to validate data in the Web browser and it does help your customers enter the right information. They can easily bypass all Javascript, including jQuery, and the data should not be trusted. Validate all data again on your server. Use jQuery to make life easier for your customers, not to make anything secure.

Conclusion

jQuery is the best choice from all the Javascript libraries for working on web pages in the Web browser. Over use of jQuery is not good and you should move processing back to the Web server where practical.