Tips for Novice: How to Speed-up JavaScript Code?

In this article, I shall talk about the good and bad practices that can make and break your code, in terms of performance. Therefore, if you are new to JavaScript programming, and following tutorials from here and there, you should consider the below-mentioned practices while writing your own JavaScript snippets. Let us talk about those practices that can enhance the performance of your JavaScript code one by one!

Avoid Unnecessary Variables

Most of the times, the beginner programmers in generals and novice JavaScript programmers in particular declare unnecessary variables. If you do not need certain data, do you store it in any of the variable. An example would help you understand this in more detail. So let us look at the following example of JavaScript:

<script type="text/javascript" language="javascript">
    var redundantPrintStatement = "Hello to JavaScript!"
    document.getElementById("tempHTMLElement").innerHTML = redundantPrintStatement;
</script>

In the above snippet of JavaScript, as you can see, the variable redundantPrintStatement contains a String, but after document.getElementById statement, we do you need that variable. It means you have uselessly declared the variable for just one String. The better way is as follow:

<script type="text/javascript" language="javascript">
        document.getElementById("tempHTMLElement").innerHTML = "Hello to JavaScript!";
</script>

In the above code shows that we directly used the data, which in this case is a String statement, instead of first storing it temporarily in a JavaScript variable.

Loop Optimization

There are various ways to optimize loops, especially for-loop, in JavaScript. I think example would be better to illustrate you the bad looping snippet first.

<script type="text/javascript" language="javascript">
    var counter;
    var myArray = [1,2,3,4,5];
    for(counter = 0; counter < myArray.length; counter++) {
        // Your code here
    }
</script>

In the above snippet, have you noticed that is the problem with the for-loop in terms of optimization? If not, let me explain!

First I have declared an Array named myArray, and after that I wrote down the loop, which would run five times, as the length of the array is five defined by myArray.length. The problem with the for-loop is that it actually calls myArray.length five times. Every time, whenever, the for-loop checks the condition, it calls myArray.length. Imagine if your loop run a thousand or even ten thousand times. Although you should not go for that big of a loop, but still if you have to run that many times, you are dead in the water. Your code, not you I mean. The correct way is:

<script type="text/javascript" language="javascript">
        var counter;
        var myArray = [1,2,3,4,5];
        var lengthOfArray = myArray.length;
        for(counter = 0; counter < lengthOfArray; counter++) {
            // Your code here
        }
 </script>

In the above snippet of JavaScript, as you can see, I have declared a separate variable for the length of Array. Now whenever the loop checks the condition, it does not need to find the length of the array every single time. The length is stored in the variable lengthOfArray instead.

Use .js File

Always use the separate JavaScript file. Do not intermingle HTML and JavaScript code together in the one file. It gets unmanageable when the application gets bigger. The most important benefit of making the separate .js file is that the browser caches the file first time, and if somehow you reload the page, browser will check the cache. If that file exists in that cache, you will get result instantly instead of loading the complete file again.

Use Primitive Functions

Use the primitive functions that are already available to you in the JavaScript. If you have made your own function, and the same functionality is available in the language itself, and you are unsure about your own code in terms its costs and optimization, prefer using the primitive functions. The primitive functions are not only programmers' friendly, but they are also optimized.

Summary

I have discussed the most common mistakes that the novice programmers commit without thinking about their repercussions. The list is of course in complete, and there are more than fifty mistakes I can mentions here, but for now make sure you use the loops, variables, primitive types and .js files optimally. That's it for this article!

AUTHOR

READ NEXT

Boostlog is an online community for developers
who want to share ideas and grow each other.

Delete an article

Deleted articles are gone forever. Are you sure?