DEV Community

Laxman Nemane
Laxman Nemane

Posted on

1

Async vs Defer in JavaScript: Understanding the Difference

When it comes to loading scripts in HTML, there are three ways to do it: normally, asynchronously (async), and deferred (defer). In this post, we'll explore the differences between these three methods and how they impact your web page's performance.

Normal Script Loading

When you load a script normally, the browser will pause rendering the HTML document until the script has finished loading and executing. This can cause a delay in the page's load time, especially if the script is large or takes a long time to execute.

Async Script Loading

The async attribute allows the browser to continue rendering the HTML document while the script is loading. Once the script has finished loading, it will be executed immediately. This can improve the page's load time, but it can also cause issues if the script relies on other scripts or resources that haven't finished loading yet.

Defer Script Loading

The defer attribute is similar to async, but it allows the browser to continue rendering the HTML document while the script is loading. However, unlike async, defer scripts are executed only after the HTML document has finished parsing. This means that defer scripts will always be executed after the DOM has been loaded, which can be useful if the script relies on the DOM being present.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more