Report the order in which all script tags were executed on a page.
Just add the bookmarklet below to your bookmarks bar.
Delete the cache before executing the bookmarlet
A UI will be shown on the page like this.
![Script Breakdown] (https://raw.githubusercontent.com/vigneshshanmugam/script-order/master/breakdown.png)
You can also check devtools console tab to see the order.
- External Sync (async=false, defer=false)
- External Async (has async attribute set)
- External Defer (has defer attribute set)
- Dynamic (loaded via JS, can be async/defer)
- Module (Not covered)
Behaviour of each script types
inline- Blocking, Ordered
External Sync- Synchronous, Ordered and parser blocking
External Async- Asynchronous, Unordered and non-blocking
External Defer- Non-blocking, but will be executed before DOMContentLoaded event
Dynamic- Not identified by speculative/lookahead parser.
- Works only if
Resource Timing APIis available (since we need to interleve sync/async/defer scripts execution with timing information).
- Scripts that are blocked(Ad blockers), CSP and Mixed contents are pushed to the end(because PerformanceTimingEntry Object will be empty for them).
- Not tested Server Push as well.