How async and defer Impact Page Rendering
How script loading attributes affect HTML parsing and page rendering.
How async and defer Impact Page Rendering
Without async/defer (Blocking)
HTML parsing stops when a script tag is encountered. The browser downloads the script, executes it, then resumes parsing. This blocks rendering and makes the page feel slow.
With async
HTML parsing continues while the script downloads. When the script is ready, parsing pauses briefly to execute it. The page may render partially before the script runs. Scripts execute in download order, not declaration order.
With defer
HTML parsing continues while the script downloads. The script executes only after the entire HTML is parsed. The page renders fully before any deferred script runs. Scripts execute in declaration order.
DOMContentLoaded
- Normal: fires after all scripts download and execute.
- async: fires regardless of async scripts (may fire before they complete).
- defer: fires after all deferred scripts execute.
Best Practice
Use defer for all non-critical scripts at the bottom of <head>:
<head> <script src="app.js" defer></script> <script src="vendor.js" defer></script> </head>
This downloads scripts early (in parallel with HTML parsing) but executes them in order after parsing.
The Takeaway
Normal blocks parsing and rendering. async allows parallel download but briefly blocks for execution (unordered). defer allows parallel download and executes after parsing (ordered, non-blocking). Use defer for most scripts in the head.
It blocks HTML parsing and rendering. The browser stops parsing, downloads the script, executes it, then resumes. This makes the page feel slow, especially for large scripts.
Only briefly. async downloads in parallel (no blocking). But when the script is ready, it pauses parsing to execute. The pause is brief but can cause a janky render.
No. defer downloads in parallel and executes only after all HTML is parsed. The page renders fully before deferred scripts run. This is the most non-blocking option.
After all deferred scripts execute. DOMContentLoaded waits for defer scripts. This means deferred scripts are guaranteed to run before DOMContentLoaded.
In the <head>. This starts the download early (in parallel with HTML parsing) while deferring execution until after parsing. This is faster than placing scripts at the bottom of <body>.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.