Post
Ask Question

How to Speed up Your JavaScript Code Performance

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 search 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
    1. <html>    
    2.    <body>    
    3.       <p id="dom"></p>    
    4.       <script>    
    5.          var obj;    
    6.          obj=document.getElementById("dom");    
    7.          obj.innerHTML="Hello JavaScript..!!";    
    8.       </script>    
    9.    </body>    
    10. </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
    1. <p id="dom"></p>    
    2.    <script>    
    3.       var fullName=firstName+""+lastName;    
    4.       fullName=document.getElementById("dom");    
    5.       fullName.innerHTML=fullName;    
    6.    </script>  

     
    After reduction or optimization
    1. <p id="dom"></p>    
    2. <script>    
    3.    document.getElementById("dom").innerHTML=firstName+""+lastName;    
    4. </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” on 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.
    1. <script>    
    2.    window.onload = downScripts;    
    3.     
    4.    function downScripts() {    
    5.       var element = document.createElement("script");    
    6.       element.src = "myScript.js";    
    7.       document.body.appendChild(element);    
    8.    }    
    9. </script>   
  • Avoid using “with” keyword
     
    Always avoid using the “with” keyword. It has a negative impact on speed and also clutters up the JavaScript scopes. It is also not allowed in JavaScript “strict mode”.


Similar Articles