Dev.to

Master of HTML? Prove It with async and defer

Every web developer proudly claims to be proficient in HTML. But… do you really know the difference between async and defer in ? These attributes are common in modern frontend web applications but are often overlooked. Let's summarize first. In HTML, a tag can be used in three ways, which will be explained one by one below: Default sequential execution: Execute immediately after download: Execute after the document is fully parsed: Explanation When a browser encounters a default tag while parsing an HTML document: It blocks parsing of the remaining HTML. It loads the JavaScript script, and once the script is fully loaded, it executes immediately. After execution, HTML parsing resumes. Consider the following example: console.log('First script'); Page content 1 Execution order: Logs console.log("First script"); Downloads and executes the external script Chart.min.js Downloads and executes moment.min.js Downloads and executes vue.min.js Displays text content: Page content 1 Note A default executes scripts in order. If one script takes too long to execute, the subsequent scripts will be queued, and HTML parsing will be paused. This can result in a white screen until execution completes. Explanation When the browser encounters a tag with the async attribute: It does not block HTML parsing but asynchronously fetches the JavaScript script. Once the script finishes downloading, it immediately executes, pausing HTML parsing at that moment. After execution, HTML parsing resumes. Consider the following example: console.log('First script'); Page content 2 Execution order: Logs console.log("First script"); Asynchronously downloads Chart.min.js, moment.min.js, and vue.min.js while HTML parsing continues. Once a script is downloaded, it immediately executes, pausing HTML parsing. HTML parsing resumes after script execution. Note Scripts with async pause HTML parsing during execution but not during download. If the HTML structure is simple, it may fully load before scripts execute, meaning "Page content 2" appears first, then scripts run. If the HTML structure is complex and takes longer to parse, parsing may be interrupted when scripts execute. Explanation When the browser encounters a tag with the defer attribute: It does not block HTML parsing but asynchronously fetches the JavaScript script. Once the script finishes downloading, it does not execute immediately. The script executes only after the entire HTML document has been fully parsed. Consider the following example: console.log('First script'); Page content 3 Execution order: Logs console.log("First script"); Asynchronously downloads Chart.min.js, moment.min.js, and vue.min.js while HTML parsing continues. Scripts do not execute immediately; they wait until HTML parsing completes and "Page content 3" is displayed. Executes the downloaded scripts in order. Note If multiple defer scripts are present, the browser downloads them in parallel. Regardless of download speed, execution order follows the sequence in the HTML document. Mixed Usage In real-world scenarios, different methods can be combined. Consider the following example: console.log('First script'); Page content 4 Execution order: Logs console.log("First script"); Asynchronously downloads Chart.min.js, moment.min.js, and vue.min.js. Because the HTML is simple, it fully loads before script execution, displaying "Page content 4" first. moment.min.js executes immediately after downloading. Chart.min.js and vue.min.js execute after HTML parsing completes. Summary Default blocks HTML parsing and executes scripts in sequence. defer does not block HTML parsing, ensures scripts execute in document order, and runs scripts after HTML parsing completes. async may block HTML parsing but executes scripts in download order, which is unpredictable. Best Practices If a script is independent and does not rely on other scripts or resources, async is a good choice (though it may block parsing temporarily). If scripts depend on each other, use defer to ensure order. If both async and defer are present, async takes priority. We are Leapcell, your top choice for hosting Node.js projects. Leapcell is the Next-Gen Serverless Platform for Web Hosting, Async Tasks, and Redis: Multi-Language Support Develop with Node.js, Python, Go, or Rust. Deploy unlimited projects for free pay only for usage — no requests, no charges. Unbeatable Cost Efficiency Pay-as-you-go with no idle charges. Example: $25 supports 6.94M requests at a 60ms average response time. Streamlined Developer E

Feb 11, 2025 - 22:09
 0
Master of HTML? Prove It with async and defer

Cover

Every web developer proudly claims to be proficient in HTML. But… do you really know the difference between async and defer in

  • Execute immediately after download:
  • Execute after the document is fully parsed:

    • Page content 1

    Execution order:

    1. Logs console.log("First script");
    2. Downloads and executes the external script Chart.min.js
    3. Downloads and executes moment.min.js
    4. Downloads and executes vue.min.js
    5. Displays text content: Page content 1

    Note

    A default Page content 2