Skip to content
Find the order in which all script tags were executed on a web page.
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
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

You can’t perform that action at this time.