Good one Sanchit. I have also picked things from the comment section so far.

Sanchit Also.... since we are talking about best practices use ES6 features like const, let and template literals.

Here bad code have to access the length property of array each time until the loop is iterated.

This was performance bottleneck with very old browsers. All modern browsers no longer have any prob with such loops now a days.

Here's the results that be seen on Chromium 84.

By doing this optimizations you are only getting a performance benefit of a fraction of a single millisecond. That is unnecessary.

Lastly.... if performance is your main concern, then you're better of using lower level langs or WebAssembly. Unnecessary JS optimization isn't a good practice. You should prefer readability over performance unless you really need that performance. This is what Google Dev Advocates had to say about this topic ->

Useful tips! I also recommend using defer for reading external scripts only after the page loads:

<script src="main.js" defer></script>

Thanks for sharing!