ASYNC vs DEFER

ASYNC vs DEFER

This article will explore an interesting Javascript topic. async and defer are attributes used when including external JavaScript files in HTML documents. They affect how the browser loads and executes the script. Let's learn about them in detail.

Default Behaviour

We generally connect our HTML page with external javascript with <script> tag. Traditionally, JavaScript <script> tags were often placed in the <head> section of the HTML document. However, doing so means that the parsing of the HTML is blocked until the JavaScript file is fetched and executed, leading to slower page load times. Nowadays, we mostly prefer to keep the <script> tag after all the contents of the <body> element to the page get loaded first.

<script src="example.js"></script>
        

Here's how HTML parsing and script execution takes place

Async

When we include a script with the async attribute, it tells the browser to download the script asynchronously while parsing the HTML document. The script is downloaded in the background without blocking the HTML parsing process.

Once the script is downloaded, it's executed asynchronously, meaning it can run at any time, even before the HTML document has finished parsing.

<script src="example.js" async></script>
        

Defer

If multiple scripts are loaded asynchronously, they will execute as soon as they finish downloading, regardless of their order in the document. It is useful when the script doesn't depend on the DOM being fully loaded or other scripts.

When we include a script with the defer attribute, it also tells the browser to download the script asynchronously while parsing the HTML document. However, the execution of the script is deferred until after the HTML document has been parsed.

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

Scripts with the defer attribute will execute in the order they appear in the document. It is useful when the script relies on the DOM being fully parsed or when script execution order is important.

Conclusion

Both async and defer allow the HTML parsing process to continue without waiting for the script to be downloaded.

The difference lies in when the script is executed: With async, the script executes as soon as it's downloaded, potentially before the HTML document is fully parsed. With defer, the script executes only after the HTML document is fully parsed, but before the DOMContentLoaded event.

One of the important things to note is, that we should only use async when we have scripts that can run independently and don't rely on the DOM structure, and we use defer when we need to maintain script execution order or depend on the DOM structure.

要查看或添加评论,请登录

Fahad Kazmi的更多文章

  • The Concept of Gas and Gas Fees on the Ethereum Blockchain

    The Concept of Gas and Gas Fees on the Ethereum Blockchain

    If you have been in the Web3 space, whether as a developer, a user of blockchain technologies, or because curiosity has…

  • Git Merge vs. Rebase: Key Differences

    Git Merge vs. Rebase: Key Differences

    Maintaining an organized and effective project history is essential for developers managing code repositories. This is…

  • Why Next.js is a Top Choice for Frontend Development

    Why Next.js is a Top Choice for Frontend Development

    Next.js is a top choice for frontend development due to its powerful features like server-side rendering, static site…

  • What is dead zone in Javascript?

    What is dead zone in Javascript?

    What is a Dead Zone? In JavaScript, a dead zone refers to a phase during the execution of your code where a variable…

  • Fluid animations with GSAP ScrollTrigger

    Fluid animations with GSAP ScrollTrigger

    Add beautiful animations ? to your components as you scroll through your website. Here's a basic example of what you…

    1 条评论
  • Implement and understand usePrevious hook

    Implement and understand usePrevious hook

    How come useRef in React can be used to keep track of the previous value? You've probably seen the pattern where is…

  • Create a Form with React Hook Form & Next.js??????

    Create a Form with React Hook Form & Next.js??????

    When building a Next.js app , or any type of web app, there’s a pretty decent chance that a form will eventually be a…

社区洞察

其他会员也浏览了