Category Archives: JavaScript

4 tricks to optimize your jQuery site’s performance.

What’s a masterfully crafted responsive GUI good for if the user experience is ruined by a site’s horrible performance? You are right: nothing. At all.

“jQuery is hogging resources.”

“Don’t use jQuery if you want your site to be fast on iPads.”

Opinions like these can be heard more and more lately in the developer world – jQuery is said to be a heavy-weight library and its reputation is slowly decreasing. But what if you’re working on code that mostly deals with DOM elements? And you really would benefit from using jQuery? Use it! jQuery is still one of the best libraries to even out browser bugs and inconsistencies and making DOM manipulation easy. But make sure you use jQuery in a way that adds as little to your page weight as possible. There are quite a few steps that can be taken to ensure your site is as fast as can be although jQuery is part of it.

1. Use (minified!) jQuery 2.x if possible.

jquery.com currently offers two versions of jQuery on their download page: 1.x and 2.x. Their API is the very same. Their difference lies in browser support…and file size! If you don’t absolutely need to support Internet Explorer 6, 7, and 8, go with jQuery 2.x. Comparing the minified versions of 1.11.3 and 2.1.4, this saves you 12 KB.

Speaking of minified – make sure that you’re loading the minified script, no matter what version you are using. This saves over 150 KB.

2. Load it at the end of your page.

When loading a page, your browser traverses the source code from top to bottom. When hitting a <script>, it reads through the entire code even of external JS-files before going on with the rest of the page. While it does that, contents that are located below the <script>  in your code can not be displayed yet.

To prevent scripts from blocking site rendering, it is a good practice to move them to the end of your html code, right before your closing </body>  tag. This way your contents are displayed, so the user can already look at them, and functionality is added with a slight delay.

3. Customize jQuery with grunt.

Think you’ve done everything you can to reduce file size by using the latest minified version of jQuery? It gets much better. You can now build your own jQuery and simply leave out modules that you don’t need (or just add them as needed). It’s easier than you might think.

Grunt makes it possible. If you are not familiar with this JavaScript task runner you should definitely have a closer look at it, it can save you tons of precious time when developing websites. What modules exist within jQuery and how to exclude them is described on jQuery’s GitHub page. It’s a piece of cake, especially if you are already familiar with using grunt.

4. Cache selectors in a variable.

By taking the first three steps, you have done quite a bit to improve your page weight and your site will show up faster in your browser. But what about jQuery itself – some of its functions are executed slower than vanilla JavaScript? This is true but it is quite the effort to test and research which functions are slow in which browser and if you can live without them but still support all browsers in your system specification.

However, a golden rule to follow is to store selectors in a variable instead of using them over and over. Every time you are using a jQuery selector such as $(“#element”) , jQuery will work through the DOM to find the element. By assigning it to a variable and reusing that, it only has to find the element once.

 
// So instead of using this
$('#element').width('100px');
$('#element').show();

// always do this
var $element = $('#element');
$element.width('100px');
$element.show();

It is surprising how often even more advanced developers use the same jQuery selector over and over in their code – even in loops. The impact on page performance is for example examined in this jsperf test.

 

[mc4wp_form]

What to learn first – jQuery or plain JavaScript?

Trying to figure out the right starting point on how to tackle JavaScript? jQuery seems tempting but all JavaScript pros you know keep telling you it’s important to start from scratch? Understanding the purpose and capabilities of jQuery is the key to figuring out the right time where to dig deeper.

The most important fact to realize is what John Resig, the creator of jQuery, himself tweeted a while back:

Tweet by John Resig

 

So, jQuery can not substitute JavaScript. It is a framework that helps manipulating the DOM. Nothing more or less. Due to its underlying logic, it enables selecting, sorting, and working with HTML elements with a short snippet of code that works across various browsers. Because of browser specific differences, bugs, and lack of functions in the original DOM API, this normally would require many lines of code. To write it yourself as a newbie will most probably be a frustrating experience because much research and testing has to be done for little outcome.

If you are working on a website that heavily relies on DOM manipulation, starting out using jQuery and looking behind its curtains once you have a more thorough understanding of JavaScript will most definitely be the more rewarding way to go. This still means that you will have to learn to use vanilla JavaScript for all non-DOM operations such as calculations and business logic.

But, if you find yourself using jQuery commands only for a few operations or develop for modern browsers only, it can be a good idea to scratch the framework, which adds quite a bit to your page weight, and walk the extra mile for the sake of performance. Pages like youmightnotneedjquery.com help you to replace jQuery functions with plain JavaScript.

 

[mc4wp_form]