Async vs Defer
When you include JavaScript in an HTML page, the way it loads and runs can significantly affect how fast your page appears and works. Two helpful attributes for controlling script behavior are async and defer. Let's dive into what they do and why they are useful.
Without async and defer
When the browser finds a <script> tag without async or defer, it stops loading the rest of the page until the script is fully loaded and executed. This can make the page appear slower because the browser has to wait for the script to finish before continuing to load other content.
?? Solution: Placing <script> at the End of HTML
To avoid blocking the page content, you can place the <script> tag at the end of the HTML document, just before the closing </body> tag. This way, the browser loads and renders all the HTML content first and then loads and executes the JavaScript.
Using async
When you use the async attribute, it changes how the script loads and runs:
? Non-blocking Loading
With async, the script loads in the background while the browser continues to load the rest of the page. This means the script's loading process does not interfere with the loading of other HTML content.
? Independent Execution
Scripts with async run as soon as they are ready. This means that the execution order can be different from the order they appear in the HTML. This can lead to issues if scripts depend on each other.
?? When you place an async script in the <head> tag, it loads in the background without blocking HTML parsing. The script runs immediately once loaded, which can speed up page load time but may cause issues if it depends on other scripts or elements not yet available.
Using defer
The defer attribute changes how the script loads and runs, offering both non-blocking loading and ordered execution.
领英推荐
? Non-blocking Loading
Like async, the script with defer loads in the background while the browser continues to load the rest of the page. This means the script's loading process does not interfere with the loading of other HTML content.
? Ordered Execution
Unlike async, scripts with defer will run in the order they appear in the HTML, but only after the entire page has finished loading. This ensures that scripts that rely on each other will execute in the correct order.
?? When you place a defer script in the <head> tag, it loads in the background without blocking HTML parsing. The script executes in order after the entire HTML document is fully loaded and parsed.
Conclusion
? Without async and defer: Scripts block page loading, slowing down the page.
? Placing <script> at the End: Executes JavaScript after HTML loads, preventing blocking.
? Using async
? Using defer
Meanwhile what you all can do is, Like and Share this edition among your peers and also subscribe to this Newsletter so that you all can get notified when I come up with more content in future. Share this Newsletter with anyone who might be benefitted from this content.
Until next time, Dive Deep and Keep Learning! ??
Aspiring Cloud Support Engineer | Full Stack Developer | Proficient in React.js & Node.js | 300+ Problems @LeetCode (200+ Day Streak) | Participant @Flipkart Grid & Folonite Winter Internship | Hackathon Enthusiast
8 个月Good point with nice explanation ??