From 2016 onward we are noticing the wave of web application adaptation and rising of javascript. Every web application currently supports one form or another javascript.

A modern framework like ReactJS, Angular, VueJS is dominating the frontend industry as well as backend adaptation is high within the javascript language like ExpressJS, HapiJS, NodeJS.

Is Javascript really important!

The simple answer is yes! And we can not deny the growing popularity of javscript, not just as a web application language also as a desktop/mobile application language

Almost every major web functionalities have built-in javascript, like the button to search filter.

What to do!

Let’s take a look at some best practices when we are using javascript.

Compress & Combine

Compress/Minify JS files will eliminate unwanted attributes (whitespace, tab, etc.) and comments from the script. This will assist reduce the file making it smaller in size. There are various tools available online to assist minify JavaScript,

Google’s Closure Compiler
JsMin
UglifyJS
JSCompress

It is also suggested to combine multiple JS files so the file can be downloaded over a single connection decreasing server overhead. The browser can downloads a 50 KB file faster than a single connection instead of 10 separate files of 5 KB each from multiple connections.

Dodge Duplicate and Inline

HTML is never cached;
When we inject more and more javascript into HTML, it increases the total size of the page. The best place the JS code in an external file, this will allow the browser to cache the files trimming down the time taken to download and execute the required script.

Remember, embedding different versions of the same JS script or add the same script more than once, this can cause errors on the page and may even block the page from rendering properly. Also, it slows down the whole application.
When using JQuery or other JavaScript libraries and modules, it is important to use the latest version and avoid embedding duplicate script tags on the same page.

Using Async and Defer

A most useful way to load external API sources or data in javascript. Javascript is single-threaded but internal engine supports async aoperations. Use the to avoiding render-blocking. Another way is Defer the loading.

Async:  Loading the script asynchronously allows the rest of the webpage or application to execute while the script is downloaded in the background. The script is then executed once the download is completed.

Defer: Using Defer, the script can be forced to load and execute only after the page has completed loading. This ensures the script is not render-blocking.

Event Handlers

We can add custom handlers and manipulate page elements to provide a more responsive and interactive web application. However, when several event handlers are fired, its performance degradation can happen.
To avoid event handlers from using up browser resources, we must keep track of the number of event handlers being triggered along with unbinding event handlers when not in use.

Decrease DOM Manipulation

DOM manipulation is used to make web applications responsive but this results in re-rendering the HTML elements on the page; this process is called a Reflow. Reflow time can add up with every DOM manipulation and this can have an impact on the digital experience.

We must use JavaScript to edit DOM elements, then consider the DOM structure while coding the script to keep it concise and efficient. Remove unwanted <divs> and <spans> from the HTML and reduce the DOM “depth” so there are fewer node levels to traverse. Animations and style edits to the HTML must be done using CSS and not JavaScript this will greatly minimize interaction with DOM elements.

Happy Coding!