Javascript Performance: Multiple script blocks Vs single bigger block

I have observed a weird behavior on IE8(not seen on FF 3.5). I created 2 sample web pages with only some JS in it. Page1: 3 JS blocks ( tags) with very small inline JS in them. Page2: Same JS as above, but all 3 scripts combined in one block.

I opened the page using dynatrace and observed that for page1, each of the script took ~27-30ms time for parsing/execution. Total time is ~80ms. For Page2, the combined JS took ~30ms. Can someone please ex开发者_如何学JAVAplain the reason behind this? Is it better to combine the smaller chunks of JS into one?

PS: For all the scripts, the instrumentation time added by dynatrace is negligible. Firefox 3.5 did not show this behavior. Also the execution time on FF was ~1ms for each of the smaller JS block and ~3ms for the combined JS.

When a browser encounters a script block it has to pause rendering the page while it executes the script in that block.

I'm not sure why this would be so pronouced for IE8 over FF. It could be that the context switch is especially costly in IE8, or that FF may do some work behind the scenes to combine your blocks if it determines it can (I'm only guessing here)

Script blocks also block parallel downloads. If you're downloading images from multiple hostnames, this can happen in parallel, unless you are executing a script block.

In general, I would say that it is best practice to combine your script blocks. Personally, I would recommend you move them into a separate file.

Incidentally, what happens with your metrics when you do move it to another file?

See Best Practices for Speeding Up Your Web Site at Yahoo Developer.