Improve jQuery Performance With $().addClass()

When looking at things that make a website seem sluggish, you might assume that the most popular JavaScript framework out there always does things in the most efficient manner. However, as I have found, jQuery does not always produce the best performance due to it having to support many different browsers with version 1.x. As a general rule, instead of setting CSS attributes directly on the selected nodes, I prefer to instead add and remove classes on those nodes instead, as it seems to perform much better.

When adding classes to a node, I have typically used the default $().addClass(); function in jQuery. However, as part of some detailed performance tweaking, I have started to track the runtime of each of the functions. As a result, I found that if you only need to support Internet Explorer 8 or newer, you can cut the execution time in half or less in comparison to the more native JavaScript implementation below. You just need to make sure this is executed before you first call the $().addClass(); function.

(function($) {
        $.fn.addClassPM = function(cls){
            if(typeof cls !== 'undefined'){
                var length = this.length,
                i = 0,
                tokens = cls.split(" "),
                tokenLength = tokens.length,
                j = 0;
                for(;i<length;i+=1){
                    if(this[i].classList){
                        for(;j<tokenLength;j+=1){
                            this[i].classList.add(tokens[j]);
                        }
                    }
                    else{
                        this[i].className+=' '+cls;
                    }
                }
            }
            return this;
        };
    })(jQuery);
  };

The performance comparison can be seen here: Adding Classes with jQuery and JavaScript

comments powered by Disqus

Related Posts

Varnish and Magento Performance Mystery

One of the things that you think you will solve when you implement a Varnish caching server in front of a Magento website is performance problems. However, this is not necessarily the case. When I set Varnish up to cache content in front of my Magento website, I get what seems to be much improved performance. If I run a few tests in the developer tools of Chrome, it seems that the waterfall chart makes sense and the data is loaded appropriately and in a timely manner with the main HTML being downloaded in about 300ms.

Read More

Optimize Magento Time To First Byte

When looking at the performance of your site, waterfall charts are one of the first places you should investigate. The first thing that is represented on these charts is that the HTML for the website is the first resource that is downloaded every time. As a result of being the first resource downloaded every time, this is the logical first place to look to improve the performance of your Magento website.

Read More

Optimizing Website Load Time

Assuming you have already done a few things to improve the page load time of your website, such as using a Varnish caching server, GZipping your content in transit, minifying that same content, and turning on all caching options that Magento or your web platform of choice have available, there is still more you can do. When it comes to website performance, the 80/20 rule definitely applies. 80% of the performance tweaks that you perform will only provide a miniscule improvement to the site load time, while the 20% of things you do make a big difference.

Read More