If you are a javascript programmer, you must be familiar with these two terms: async and defer. Today we will be discussing what these two terms mean and how are they different from each other.

History:

In HTML4 and it's predecessors the execution of javascript was blocking in nature. To put it simply if you have two or more scripts loaded in your HTML, then they are executed sequentially. In essence, the script loaded later cannot start execution before the ones that are loaded earlier has terminated.

Async:

The async attribute makes the script non-blocking. It means that a script is independent of other scripts that are loaded and the dom. Since the browser does not block on async scripts, other scripts loaded after async scripts need not wait for async scripts to complete before they can start execution.

Synchronous Blocking javascript execution was a limitation for javascript developers and frameworks that do dom-manipulation as well since they could not perform any background tasks like location services and notification services.

Since modern browsers can use multiple threads, HTML5 introduced the concept of "async" and "defer" of javascript. Let us understand them in more detail.

DOMContentLoaded and async scripts do not wait for each other. Async scripts start executing as soon as it is loaded, before or after the DOMContentLoaded event.

In short async scripts are fully independent scripts that run when loaded.

Defer:

The defer attribute instructs the browser not to wait for the script. The browser will continue to process the HTML, build DOM. The script loads in the background and then execute when the DOM complete.

Similar to async scripts defer scripts never block the page rendering. They execute when the DOM is ready but before the DOMContentLoaded event. The DOMContentLoaded event handler executes after all deferred scripts are downloaded and executed.

Just like regular scripts, deferred scripts keep their relative order as well during execution.

Stay tuned to finocontrol for more exciting content.

credits

knowledgebooster