Find the order in which all script tags were executed on a web page.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
breakdown.png
order.js

README.md

script-order

Report the order in which all script tags were executed on a page.

Just add the bookmarklet below to your bookmarks bar.

javascript:(function(d){var el=d.createElement('script');el.type='text/javascript';el.src='//vigneshh.in/script-order/order.js';d.getElementsByTagName('body')[0].appendChild(el);})(window.document);

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.

Types

  • Inline
  • 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.

Gotchas

  • Works only if Resource Timing API is 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.

Issues

Check here