Measuring Script Load Performance With the Navigation Timing API

Each of these pages loads 5 scripts. One at the top, one at the bottom, one using async, one using defer and one with a simulated 1s delay. We experiment with different ways of loading the slow script and see how they affect the loading of the other scripts.

1. The first two examples ares the only ones where the slow script is actually executed last!
2. The Async JS example uses the 3rd party script loading example described in this post: Async script loading of 3rd party JS.
3. Don't bother comparing the numbers too much, the iframe loading is probably screwing things up a bit.
4. timeToScript below is Date.now() - performance.timing.navigationStart.
5. Putting the slow script at the bottom still means any scripts below it have to wait!
6. Using defer on a slow script is similar to putting it at the bottom of the page.
7. In the slowtop example the first script on the page doesn't have access to the DOM when the 2nd script blocks for 1 second (see the console.)