multiple versus single script tags

Question

Is there any difference (performance, best practices, etc) between using a single script tag with embedded code in it, or using multiple script tags with the same code spread all over the HTML?

For example:

<script>     foo(); </script> ... <script>     bar(); </script> 

versus:

<script>     foo();     bar(); </script> 

Thanks

Answer 1

With inline script like what you quoted, there's unlikely to be much difference; however, every time the browser's HTML parser encounters a script tag, it:

• Comes to a screeching halt
• Builds up a string of the the text in the tag up until the first time it sees the string "</script>"
• Hands that text off to the JavaScript interpreter, listening for output the interpreter sends it when you do a document.write
• Waits for the interpreter to finish
• Inserts the accumulated output received into the parsing stream
• Continues its parsing

So increasing the number of times this sequence has to occur can, in theory, increase your page load time. It also affects the degree to which the parser can "look ahead" in the token stream, which may make it less efficient.

All of which sounds really dramatic, but you'd have to profile a real page in the various browsers you care about to determine whether it had a real-world impact.

So in summary, combine them as much as you reasonably can. If you can't reasonably combine a couple, don't worry about it too much until/unless you see a real-world problem.

The above is for inline script. Naturally, if you have several script tags referring to a bunch of external JavaScript files, you'll also have the issue that each of those files has to be downloaded, and initiating an HTTP request is an expensive thing (comparatively) and so it's best, in a big way, to combine those into a single file.

Some other things to consider:

• Having lots of script tags scattered throughout your HTML may make it difficult to do maintenance on the script
• Separating your HTML and script into separate files helps you limit the degree to which they're coupled, again aiding maintenance
• Putting script in a separate file makes it possible to run that file through minifiers/compressors/packers, minimizing the size of your code and removing comments, thus leaving you free to comment in your source code knowing those comments will be private
• Putting your scripts into external files gives you the opportunity to keep things separated by functionality, and then combine them into a single file for the page (compressed/minified/packed) for efficient delivery to the browser

More:

• YUI's "Best Practices for Speeding Up your Web Site"
• Google's "Web Performance Best Practices"

Answer 2

Combining your scripts as much as possible is better in my opinion. Some browsers have to pause rendering while executing script blocks. Check out answer at: Javascript Performance: Multiple script blocks Vs single bigger block