Do multiple inline JS scripts slow down loading time of a page?

Question

I'm trying to optimize the loading time of a site that has a lot of JS spaghetti code. Some of it actually looks like this:

<script>var x="foo";</script>
<script>var y="bar";</script>

Instead of the sane-programmer code:

<script>
    var x="foo";
    var y="bar";
</script>

So I was wondering whether this kind of thing actually does harm? Aside from the aesthetics, would combining the scripts into a single script tag bring any loading time benefit?

Answer 1

When a browser encounters a script element during the parsing of a page's HTML the following happens:

1. The browser pauses processing of the HTML.
2. The browser initiates an instance of its JavaScript interpreter.
3. The JavaScript interpreter compiles the JavaScript and adds it to the current page's global JavaScript pool.
4. The browser continues parsing the HTML, repeating 2. and 3. as many times as there are script elements in the HTML.

So, having multiple script elements will slow down rendering of the page. The fewer script elements present in the HTML the faster the page will render.

If your document is including scripts via the src attrbute (e.g. <script src="http://example.com/myscript.js">) then you can use the async attribute to delay script processing. This is a feature supported in newer browsers (e.g. Firefox 3.6 and Webkit based browsers released since September 2010). But inlined scripts will still block parsing until they have been interpreted.

Answer 2

Insofar as there are more bytes to download, the first example is slower.

However, I'm certain that you will never be able to differentiate between the negligible micro-optimization of the latter example and the former example. Other than organization, there's no reason to bother.

That said, for the sake of organization, I would definitely bother! Keeping your code organized will speed development time. Keeping all of your JavaScript in one place will prevent you from running around searching for a snippet.

I would strive to move as much code first into an external file, and anything else into the foot of your document.

1. You will garner the most speed benefit by using an external file (due to browser caching) than anything else.
2. You will allow your markup to be rendered by the browser before downloading or executing your JavaScript if you move the <script> tags to the footer of the page. This will create the illusion of a faster download.

Incidentally, (and just as trivially) the most optimized version of your script (aside from using an external file) would be:

<script>
    var x='foo', y='bar';
</script>