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;
}[/cc]

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

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();
foo.concat(bar);[/cc]

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”);
$(“#demo”).html(“b”);
$(“#demo”).html(“c”);
$(“#demo”).html(“d”);[/cc]

but this is high performance code:

[cc lang=”javascript”]var demo = $(“#demo”);
demo.html(“a”);
demo.html(“b”);
demo.html(“c”);
demo.html(“d”);[/cc]

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;
}

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

console.time(‘jquery’);
$.each (array, function (i) {
array[i] = i;
});
console.timeEnd(‘jquery’);[/cc]

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

Angular 9 Next Versions: Ivy, Bazel and more

Angular 9 next versions are here. Besides updates to Ivy, the update includes three features for the Language Service and Service Worker and changes...

Google Releases Dart 2.5: Code Completion through Machine Learning

The latest version of Googles C-Alternative, Go 1.13, is barely released, as the JavaScript derivative of the Internet giant follows: Dart 2.5 is here!...

Laravel 6.0 is here: Support for Serverless Platform Laravel Vapor

A new update is available for the framework Laravel. Laravel 6.0 is compatible with Laravel Vapor, a serverless deployment platform. The development team has...

Microsoft’s FaaS service Azure Functions: Now with Python support

Azure Functions has received support for Python: Microsoft's FaaS service can host Python workloads for data science, machine learning, and more. So far, the...

On the way to Angular 9: Three bugfixes in Angular 9

With Angular 9.0.0-next.1 there is a second Next-Release available for Angular 9, which can now be tested. The number of changes to the version...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here