Tips to improve jQuery performance for websites

Some people say that spending time for jQuery performance is not worth it because when upgrading hardware is often a cheaper alternative. But when we know how to optimize the code, it will save many times more than the new hardware upgrade.

Let’s see some ways to improve JavaScript performance for the Website

1. Always use the latest version

jQuery is always developing and improving, so make sure you are using the latest version to improve the jQuery performance of the program.

2. Optimize the loop

Loops like for, while, by while are often used a lot in JavaScript. If we optimize all loops, the page loading speed will be significantly improved.

The loop is used to repeat the execution of a code many times, if the loop contains complex statements, the execution speed will slow down. Therefore, in order to increase execution speed, it is recommended to replace complex statements with simpler statements.

For example, the code has low performance:

[cc lang=”javascript”]for (var i = 0; i < arr.length; i++){
arr[i] = i;

For example, high performance code:
[cc lang=”javascript”]var n = arr.length;
for (var i = 0; i < n; i++){
arr[i] = i;

3. Processing string

Take a look at some of the following simple concatenation methods

[cc lang=”javascript”]var foo = “”;
foo = foo + bar;
foo += bar;
[foo, bar].join();

and compare results

jquery performance charts

As you can clearly see above [] .join () shows the best average result. So next time write code, you can use it

[cc lang=”javascript”]var veryLongMessage = [ ‘This is a long string of segments including ‘ , 123, ‘ lorem ipsum sit’].join();[/cc]

instead of

[cc lang=”javascript”]var veryLongMessage = ‘This is a long string of segments including ‘ + 123 + ‘ lorem ipsum sit’;[/cc]

4. Restrict access to HTML elements

The commands that access HTML elements have a very slow execution speed. If you want to access the same element multiple times, you should access it once and then save it to a variable for reuse.

For example, the code has low performance:

[cc lang=”javascript”]$(“#demo”).html(“a”);

but this is high performance code:

[cc lang=”javascript”]var demo = $(“#demo”);

5. Use for or while instead of each

Let’s see the following example

[cc lang=”javascript”]var array = new Array ();
for (var i=0; i<10000; i++) {
array[i] = 0;

var l = array.length;
for (var i=0;i<l; <span=”” class=”hiddenGrammarError” pre=”” data-mce-bogus=”1″>i++) {</l;>
array[i] = i;

$.each (array, function (i) {
array[i] = i;

and results

jquery loop results

Here are some tips to optimize the JavaScript code. If you have more ideas please contact us so the next post will contain your tips and your name.

Recent Articles

5 tips for effective remote pair programming

Home office is a challenge where people work and communicate closely together. Pair programming, i.e. working together on a source code, also lives from...

What are the Reasons You Should Play Online Bingo?

Online bingo is fast becoming popular among the masses. It uses unique bingo software to bring fun to you without you having to go somewhere to...

Most in-demand IT jobs from last decade

Uber for travel, Netflix for leisure and Google for everything is the ideal routine that we all wish to follow, of course with Instagram...

The finest text editor for professional bloggers

It is a fact that blogs have replaced books and magazines due to increasing popularity of the online world. Serious readers subscribe to blogs...

Angular 9 final release released

Angular 9 final is here! The new version was released a little late. Ivy is of course one of the new features, but that's...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here