High Performance Web Sites

Scripts Block Downloads

The benefits of downloading components in parallel are clear. However, parallel downloading is actually disabled while a script is downloading—the browser won't start any other downloads, even on different hostnames. One reason for this behavior is that the script may use document.write to alter the page content, so the browser waits to make sure the page is laid out appropriately.

Another reason that the browser blocks parallel downloads when scripts are being loaded is to guarantee that the scripts are executed in the proper order. If multiple scripts were downloaded in parallel, there's no guarantee the responses would arrive in the order specified. For example, if the last script was smaller than scripts that appear earlier on the page, it might return first. If there were dependencies between the scripts, executing them out of order would result in JavaScript errors. The following example demonstrates how scripts block parallel downloads.

Scripts Block Downloads

http://stevesouders.com/hpws/js-blocking.php

This page contains the following components in this order:

1. An image from host1

2. An image from host2

3. A script from host1 that takes 10 seconds to load

4. An image from host1

5. An image from host2

Given the description of how browsers download in parallel, you would expect that the two images from host2 would be downloaded in parallel, along with the first two components from host1. Figure 8-4 shows what really happens.

Figure 8-4. Scripts block downloads

In both ...