Async Script Execution Order Test

Results for your browser:

If a page contains multiple scripts that are loaded asynchronously, it's faster if those scripts are executed immediately as soon as they are downloaded. However, some browsers preserve the execution order of async scripts depending on how they're loaded. This is bad because if an async script takes a long time to download, all the async scripts that follow are blocked from executing.

Here's the most popular way for loading scripts asynchronously across browsers:

var sNew = document.createElement("script");

sNew.type = "text/javascript";

sNew.async = true;

sNew.src = "http://yourdomain.com/main.js";

var s0 = document.getElementsByTagName('script')[0];

s0.parentNode.insertBefore(sNew, s0);

The key to getting async scripts to execute immediately is found in the third line: Setting the "async" property to "true" ensures that async scripts are executed immediately and don't block each other. Without this line, some browsers preserve the execution order of scripts loaded using this async technique resulting in a slower page.

This page tests the execution order of async scripts to nail down which browsers require setting "async" to "true". The test contains two scripts that are loaded using the async technique above but do NOT have "async" set to "true". The first script takes 5 seconds to download, while the second script takes 1 second to download. The onload time is recorded for each script. Since both scripts are loaded asynchronously, the second script arrives first (because it only takes 1 second versus 5 seconds). If the browser executes async scripts immediately, the second script is executed first. If the browser preserves the execution order of async scripts, the second script is executed last. The test is repeated but this time the two scripts DO have "async" set to "true" to verify that the fix works.

The results for your browser are shown above. Results for other browsers can be found here: Browserscope user test results.