Script downloading in Chrome
Yesterday I was testing the performance penalty of loading jQuery in the
Compare these two test pages using Steve Souders Cuzillion tool. According to Chrome’s Developer Tools network inspector, it appears there’s no difference between having 1 script in the
head or having all the scripts in the
head. Tested in 13.0.782.107 stable and 15.0.842.0 canary, both on a Mac.
No difference at all.
But then if we look at how Chrome downloads scripts when they’re all in the bottom of page we see this:
Chrome still requests the scripts first but the image resources in the
body are not blocked.
With one more example that uses a script in the
body with a longer request duration we can see what really happens when you have only a single script request in the
Resources are blocked only while the one script in the
head downloads, just as we’d expect. In the Cuzillion environment, with its precise request lengths, Chrome’s pre-downloading of scripts only made it appear as if something nefarious was going on.
So that all makes sense. No anomalous behavior. What I didn’t realize previously is that Chrome attempts to download all external scripts up front. I knew Chrome/WebKit can download scripts in parallel with other resources but I thought the requests were kicked off in the order in which they appeared in the document.
Is this a goal of WebKit’s preload scanner? Download all JS as soon as possible and then execute in document order (assuming no defer/async)?
Update (11/12/2011): Nothing’s changed but rereading this post it’s clear to me that I did not word this very well. Here’s a quick summary of my conclusions about what happens in WebKit:
- An external JS file in the head blocks the parser. This kicks off the PreloadScanner, which attempts to download all other scripts and stylesheets — but not images.
- Preloaded scripts do not block images and other assets. They’re only blocked on the script in the head. See example 4 above.
- Read Tony Gentilcore’s comment below and this WebKit bug thread for details about why this happens.