Performance of JavaScript code
There are ways to speed up your JavaScript code performance.
- Reduction of activities in loops
In our programming we often use loops for iteration.
For each iteration of the loop, every statement inside a loop is executed.
The statements or assignments that are to searched can be placed outside the loop.
- Reduction of DOM Access
As compared to other JavaScript statements, accessing the HTML DOM is very slow.
If you want to access the DOM element several times then, access it once and use it as a local variable.
This is how you can access your DOM element easily as many times you want.
Example
- <html>
- <body>
- <p id="dom"></p>
- <script>
- var obj;
- obj=document.getElementById("dom");
- obj.innerHTML="Hello JavaScript..!!";
- </script>
- </body>
- </html>
Output
![]()
- Reduction of DOM size
In HTML DOM, use only a small number of elements.
This will always make faster page loading and speed up rendering (page display) especially on a small device.
Each attempt to search the DOM like “getElementByTagName” will benefit from a smaller DOM.
- Avoid Unnecessary variables
Avoid creating new variables that are not of use to save any value.
This will unnecessarily create a loading problem.
You can replace your code by optimized code.
Example
- <p id="dom"></p>
- <script>
- var fullName=firstName+""+lastName;
- fullName=document.getElementById("dom");
- fullName.innerHTML=fullName;
- </script>
![]()
After reduction or optimization
- <p id="dom"></p>
- <script>
- document.getElementById("dom").innerHTML=firstName+""+lastName;
- </script>
- Delay JavaScript loading
When you put your JavaScript code at the bottom of the page, then the browser will load the page first.
While a script is downloading, the browser will not start any other downloads. In addition all parsing and rendering might be blocked.
Note: The HTTP specification defines that the browsers should not download more than two components in parallel.
There is an alternative to use defer=”true” in your script page. This attribute specifies that the script should be executed before the page has finished the parsing, but it only works for external scripts.
You can also add your script by the code given below.
- <script>
- window.onload = downScripts;
-
- function downScripts() {
- var element = document.createElement("script");
- element.src = "myScript.js";
- document.body.appendChild(element);
- }
- </script>
- Avoid using “with” keyword
Always avoid using the “with” keyword. It has negative impact on speed and also clutters up the JavaScript scopes. It is also not allowed in JavaScript “strict mode”.