Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to improve the performance of JavaScript?
In today's world, almost every website uses JavaScript. Web applications are becoming more complex and more user-interactive, and this has caused performance issues. It results in a poor user experience, which is not desirable for any web application. Different factors cause poor performance, long loading times, and long response times.
In this tutorial, we will discuss all of these factors and how to resolve this issue and improve the performance of JavaScript.
Light and Compact Code
The first thing to improve the performance of JavaScript is to write light and compact code. The JavaScript code can have multiple modules and some unused functions or variables, which can be easily removed from the code. It will improve the compilation time of JavaScript, resulting in better performance. Also, using advanced algorithms to perform complex tasks will be very beneficial for improving performance.
Use Local Variables
JavaScript accesses the local variables faster than the global variables, so using local variables leads to improved performance of JavaScript. Whenever we access a variable, JavaScript searches for that variable in the local scope first and then looks up the global variables. If all the variables are defined in the local scope, it reduces the time to access it. Also, the local variables are destroyed after the completion of a function call, but the global variables hold their value in the memory. That can also cause memory issues.
// Local variables const id = 10 let value = 'Tutorialspoint' // Global variables var key = 'JavaScript'
Reduce DOM Access
Accessing the DOM and manipulating it is one of the most important features of JavaScript. But accessing the DOM too much unnecessarily causes huge performance issues. Whenever we manipulate some element in the DOM, the DOM is refreshed with an updated state, and if you keep updating the DOM elements every second, then every second, the DOM will be refreshed. So it is recommended to update the DOM when it is necessary. If the user needs to update an element several times, then it's better to store the element object in a variable and use that variable to update the DOM.
let element = document.getElementById('element_id')
element.innerHTML = 'Tutorialspoint'
Reduce loop Iterations
Loops are an easy way to do some repetitive tasks, but they also cause poor performance. Long iterative loops require lots of time to complete, so it’s better to avoid using long loops as much as possible. Instead, use small loops and do the minimum tasks in the loops. Also, don’t access the DOM in a loop; that will cause a huge performance issue because you are manipulating the DOM in every loop iteration.
let names = ['abc', 'xyz', 'mno', 'pqr'];
let element = document.getElementById('element_id');
// DON’T DO THIS
for(let index=0; i<names.length; i++){
element.innerHTML += names[index] + ' ';
}
// DO THIS
let str = '';
for(let index=0; i<names.length; i++){
str += names[index];
}
element.innerHTML = str;
Use Asynchronous Programming
Asynchronous programming is one of the best ways to improve the performance of a web application. In Asynchronous programming, the code execution is done asynchronously, so at the same time, multiple tasks can be performed easily. It results in fast loading of the data and quick response. In JavaScript, asynchronous operations are performed by AJAX which stands for Asynchronous Javascript And XML.
let http = new XMLHttpRequest()
http.open('GET', '...URL')
http.onload = function(){
console.log(this.response); // the response
}
Put JavaScript at Page’s Bottom
When JavaScript is placed at the top of the page, then it is executed at the page’s loading time, so it takes some extra time to load the whole page. It causes the slow loading of pages. To overcome this issue, the JavaScript should be placed at the bottom of the page so the JavaScript will start executing after loading the whole page.
Example
<html> <body> <div>Your Page Content</div> <div id='element'></div> <script> // JavaScript Code at Page's Bottom document.getElementById('element').innerHTML = 'Welcome to Tutorialspoint' </script> </body> </html>
Remove Memory Leaks
If the web application has memory leaks, then the application will allocate more and more memory, which causes a huge performance and memory issue. To overcome this problem, make sure there are no memory leaks in your application and also check whether the variables are taking excessive values or not. Users can observe the memory leaks in the Chrome dev tools.
Using Optimized Algorithms
The complex tasks in JavaScript can take a lot of time in general, which will cause performance issues, and using the optimized algorithm; we can reduce the time taken by the task to perform. Rewrite the algorithms in a more optimized way to get the best results. Also, avoid using long loops, recursive calls, and global variables.
Create and use Variables
In JavaScript, only create variables, which you will use and save values. Use the following and avoid unnecessary lines of code and variable declaration −
document.write(num.copyWithin(2,0));
Avoid the usage of with
The with keywords do not have a good impact on JavaScript speed. Avoid using it in your code.
Faster Looping
While using a loop, keep the assignment outside of the loop. This would turn the loop faster −
var i;
// assignment outside the loop
var j = arr.length;
for (i = 0; i < j; i++) {
// code
}
Use Other Tools to Find Problems
It may seem that your web application is working fine, but it may have several performance issues, and to find out the issues, some tools can be useful. The Lighthouse is a useful performance analysis tool for web applications. It helps to check the performance, best practices, accessibility, and SEO. Not only this tool but also other tools are available on the internet to check the performance of web applications, and we can simply see the problems and try to overcome those.
240 Views
To Continue Learning Please Login