Browser script loading roundup
How are browsers doing when it comes to parallel script loading?
Back in the days of IE7 and Firefox 2.0, no browser loaded scripts in parallel with other resources. Instead, these older browsers would block all subsequent resource requests until the script was received, parsed, and executed. Here’s how the HTTP requests look when this blocking occurs in older browsers:
The test page that generated this waterfall chart has six HTTP requests:
- the HTML document
- the 1st script – 2 seconds to download, 2 seconds to execute
- the 2nd script – 2 seconds to download, 2 seconds to execute
- an image – 1 second to download
- a stylesheet- 1 second to download
- an iframe – 1 second to download
The figure above shows how the scripts block each other and block the image, stylesheet, and iframe, as well. The image, stylesheet, and iframe download in parallel with each other, but not until the scripts are finished downloading sequentially.
The likely reason scripts were downloaded sequentially in older browsers was to preserve execution order. This is critical when code in the 2nd script depends on symbols defined in the 1st script. Preserving execution order avoids undefined symbol errors. But the missed opportunity is obvious – while the browser is downloading the first script and guaranteeing to execute it first, it could be downloading the other four resources in parallel.
Thankfully, newer browsers now load scripts in parallel!
This is a big win for today’s web apps that often contain 100K+ of JavaScript split across multiple files. Loading the same test page in IE8, Firefox 3.6, Chrome 4, and Safari 4 produces an HTTP waterfall chart like this:
Things look a lot better, but not as good as they should be. In this case, IE8 loads the two scripts and stylesheet in parallel, but the image and iframe are blocked. All of the newer browsers have similar limitations with regard to the extent to which they load scripts in parallel with other types of resources. This table from Browserscope shows where we are and the progress made to get to this point. The recently added “Compare” button added to Browserscope made it easy to generate this historical view.
While downloading scripts, IE8 still blocks on images and iframes. Chrome 4, Firefox 3.6, and Safari 4 block on iframes. Opera 10.10 blocks on all resource types. I’m confident parallel script loading will continue to improve based on the great progress made in the last batch of browsers. Let’s keep our eyes on the next browsers to see if things improve even more.
Lionel Pointet | 08-Feb-10 at 12:31 am | Permalink |
Hi ! I think this is very important, even if more and more efforts are made to launch JS at the bottom or to combine all the scripts in only one.
I have a little question : do you have some doc on how browsers behave in general? For example, is it more interesting to include an image with width and height in the CSS file or in the HTML tag itself?
Thank you (and also for rock music!).
Gleb Arestov | 09-Feb-10 at 2:54 am | Permalink |
opera 10.5 ;)
|| script script = yes
|| script Stylesheet = yes
|| script Image = yes
|| script Iframe = yes
Simon Proctor | 10-Feb-10 at 7:30 am | Permalink |
See if we could just get rid of document.write then it would work fine. You could run scripts without blocking the page.
Of course all the ad scripts would get very confused.
PHPGangsta | 14-Feb-10 at 1:34 pm | Permalink |
Thank you very much for that information, the comparison is very interesting and the Browserscope website is a very cool resource.
Janghou | 24-Feb-10 at 3:23 am | Permalink |
Opera has a config setting to allow parallel loading of scripts:
opera:config#Extensions|DelayedScriptExecution
It’s off by default, but enabling it gives the score as indicated by Gleb for Opera 10.10 as well.
I think you’re statement that Opera 10.10 blocks on all resource types, is therefore not completely right.
Steve Souders | 25-Feb-10 at 9:56 am | Permalink |
@Janghou: Yes, you can read more about Opera and their support for deferring scripts that do document.write here: https://stevesouders.com/blog/2008/09/11/delayed-script-execution-in-opera/
However, since this is off by default and documentation says “Primarily for low bandwidth devices, not well-tested on desktop” it’s fairer to say Opera doesn’t support parallel script loading.
lnielsen | 11-Mar-10 at 11:28 am | Permalink |
Is there any way to force the newer browser versions to disable parallel script loading?
I have a webpage that I use for performance testing that loads several small scripts and then one large, taking timings for both the small set and the large file, I need them to all use the same TCP session. (opens the TCP congestion window and then slams the network with 64KB)This works for IE7 but not FF3.5
Janghou | 19-Mar-10 at 10:37 pm | Permalink |
@Steve: So Opera invented it, but doesn’t use it by default. Strange guys those Norwegians.
The Opera documentation you’re referring to is quite old. < 9.6*
The explanation Hallvord Steen gave in your comments against enabling it by default, https://stevesouders.com/blog/2008/09/11/delayed-script-execution-in-opera/#comment-255 should be applicable to other browsers as well.
Are you aware of any real world examples in which parallel loading actually breaks the website as Hallvord pointed out the danger for and which is a theoretical possibility not only in Opera?
Have you seen it break in Opera and work in another browser?
When that's not the case, it would say Opera does support it, but doesn't enable it by default, because theoretically it can break (badly designed) websites.