Script Loading Visualizer (Async vs Defer)
See on a timeline how async and defer change HTML parsing and script execution
A visual learning tool for diagnosing script loading performance. Drag the sliders to change HTML parse, download, and execution times, and watch exactly where each loading strategy blocks the parser.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Drag the sliders to set HTML parse time, script download time, and script execution time.
- Compare how a plain script behaves depending on placement — inside <head> versus at the bottom of <body>.
- Watch the parser-blocking timeline change live across the three options: Standard, Async, and Defer.
FAQ
- What's the real difference between async and defer?
- Both download the script in parallel with HTML parsing. The difference is when it runs: async pauses the parser and executes the moment the download finishes, while defer waits until HTML parsing is completely done.
- What should I use when scripts must run in order?
- Use defer. Async scripts execute in whatever order they finish downloading, which breaks any dependency between them. Defer guarantees execution in the order the tags appear in your HTML — which is what you want for libraries and the code that depends on them.
- How does a script loaded with type='module' differ from the async/defer settings?
- Browsers treat module scripts as deferred by default — they don't block parsing, and execution waits until the document has finished parsing, just like the defer attribute. If you also add the async attribute, a module script will instead run as soon as it finishes downloading, just like a regular async script.