Scribd Logo
Upload

Welcome to Scribd!

  • 17 views

    Async Vs Defer

    Uploaded by

    Santosh Khanal
    The document discusses the differences between using the async and defer attributes in <script> tags. Using async will load scripts asynchronously and execute them as soon as they are fetched, but not necessarily in the order defined. Defer will wait for HTML parsing to finish, load scripts in parallel, and execute them in the order defined. Both async and defer allow loading scripts without blocking HTML parsing, unlike putting scripts directly in the <head>.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Async Vs Defer

    Uploaded by

    Santosh Khanal
    17 views9 pages
    The document discusses the differences between using the async and defer attributes in <script> tags. Using async will load scripts asynchronously and execute them as soon as they are fetched, but not necessarily in the order defined. Defer will wait for HTML parsing to finish, load scripts in parallel, and execute them in the order defined. Both async and defer allow loading scripts without blocking HTML parsing, unlike putting scripts directly in the <head>.

    Original Description:

    Async vs defer

    Original Title

    Async vs defer

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses the differences between using the async and defer attributes in <script> tags. Using async will load scripts asynchronously and execute them as soon as they are fetched, but not necessarily in the order defined. Defer will wait for HTML parsing to finish, load scripts in parallel, and execute them in the order defined. Both async and defer allow loading scripts without blocking HTML parsing, unlike putting scripts directly in the <head>.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    17 views9 pages

    Async Vs Defer

    Uploaded by

    Santosh Khanal
    The document discusses the differences between using the async and defer attributes in <script> tags. Using async will load scripts asynchronously and execute them as soon as they are fetched, but not necessarily in the order defined. Defer will wait for HTML parsing to finish, load scripts in parallel, and execute them in the order defined. Both async and defer allow loading scripts without blocking HTML parsing, unlike putting scripts directly in the <head>.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 9

    rootlearn.

    com

    HTML 101
    async vs defer in <script> tags

    root
    Manish Poduval
    1/8 rootlearn.com

    What is it ?
    We’ll understand the difference in using the async and defer
    attributes in <script> tags in your HTML page
    ways to load JS files

    root
    <script src="...."></script>

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

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

    Manish Poduval
    2/8 rootlearn.com

    <script> tag in the <head>

    <html lang="en">

    <head>

    root
    <script src="./index.js"></script>

    </head>

    <body>

    Hey lo World!
    without async or defer
    </body>

    </html>

    parse load execute parse

    Blocks HTML parsing. User would see a blank page while it


    fetches the .js file

    Manish Poduval
    3/8 rootlearn.com

    <script> at the end of <body>

    <html lang="en">

    <head>
    without async or defer

    root
    </head>

    <body>

    Hey lo World! 

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

    </body>

    </html>

    parse load execute

    Waits for HTML DOM to be created. User might have to wait


    longer

    Manish Poduval
    4/8 rootlearn.com

    using async

    <html lang="en">

    <head>

    root
    <script async src="./index.js"></script>

    </head>

    <body>

    Hey lo World!

    </body>

    </html>

    load
    parse execute parse

    Loads it as it is parsing the HTML and executes it as soon


    as the script is fetched. Good for 3rd party libraries.

    Manish Poduval
    5/8 rootlearn.com

    Caveat using async

    <html lang="en">

    <head>

    <!-- takes 20 seconds to load -->

    root
    <script async src="./index1.js"></script>

    <!-- takes 5 seconds to load -->

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

    </head>

    <body>

    Hey lo World!

    </body>

    </html>

    load 2
    load 1
    parse execute 2 execute 1 parse

    Scripts are not executed in order

    Manish Poduval
    6/8 rootlearn.com

    using defer

    <html lang="en">

    <head>

    root
    <script defer src="./index.js"></script>

    </head>

    <body>

    Hey lo World!

    </body>

    </html>

    load
    parse execute

    Waits for DOM to be created. Executes script tags in the


    order you’ve defined them.

    Manish Poduval
    7/8 rootlearn.com

    multiple scripts using defer

    <html lang="en">

    <head>

    <!-- takes 20 seconds to load -->

    root
    <script defer src="./index1.js"></script>

    <!-- takes 5 seconds to load -->

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

    </head>

    <body>

    Hey lo World!

    </body>

    </html>

    load 2
    load 1
    parse execute 1 execute 2

    Scripts are executed in order that you define them


    Manish Poduval
    bit.ly/rootlearn

    Upskill yourself at Root

    HTML CSS Flexbox


    Lifecycle of a webpage Chéat Sheet

    t
    Manish Poduval

    View other posts

    JavaScript DNS GraphQL


    Sorting: Under the hood Behind the scenes A visual introduction

    1 2 3

    You might also like