How to speed up the website with my JavaScript code in the server?

How to do the fast execution of the JavaScript code in a server? What things we need to keep in mind before deploying my code in a server?

Last updated:7/20/2021 12:39:44 AM

1 Answers

Ethan Karla
Ethan Karla

Fast execution of JavaScript should be important for the developers as well as the user. So the things we should keep in mind before writing JavaScript code are as follows:

1.) Reduce Activity in Loops

Loops are the basics which are used in programming. So before each statement in a loop, including the for statement, is executed for each iteration of the loop.

Statements or assignments that can be placed outside the loop will make the loop run faster.

Bad:

for (let i = 0; i < arr.length; i++) { }

Better Code:

let l = arr.length;
for (let i = 0; i < l; i++) { }

2.)Reduce DOM Access

Accessing the HTML DOM is very slow, compared to other JavaScript statements.

If you expect to access a DOM element several times, access it once, and use it as a local variable:

const obj = document.getElementById('selector');
obj.innerHTML = 'Hello World!';

3.) Reduce DOM Size

Keep the number of elements in the HTML DOM small.

This will always improve page loading, and speed up rendering (page display), especially on smaller devices.

Every attempt to search the DOM (like getElementsByTagName) will benefit from a smaller DOM.

4.) Avoid Unnecessary Variables

Don't create new variables if you don't plan to save values.

Often you can replace code like this:

let fullName = firstName + ' ' + lastName;
document.getElementById('demo').innerHTML = fullName;

With this:

document.getElementById('demo').innerHTML = firstName + ' ' + lastName;

5.) Delay JavaScript Loading

Putting your scripts at the bottom of the page body lets the browser load the page first.

While a script is downloading, the browser will not start any other downloads. In addition all parsing and rendering activity might be blocked.

The HTTP specification defines that browsers should not download more than two components in parallel.

An alternative is to use defer='true' in the script tag. The defer attribute specifies that the script should be executed after the page has finished parsing, but it only works for external scripts.

If possible, you can add your script to the page by code, after the page has loaded:

Example

<script>
window.onload = function() {
  const element = document.createElement('script');
  element.src = 'myScript.js';
  document.body.appendChild(element);
};
</script>

Hope this information will be helpful for you in enhancing the performance of your JavaScript code.

Happy Coding!

Answer