5b document.write scripts block in Firefox
This is the second of five quick posts about some browser quirks that have come up in the last few weeks.
Scripts loaded using document.write block other downloads in Firefox.
Unfortunately, document.write was invented. That problem was made a bzillion times worse when ads decided to use document.write to insert scripts into the content publisher’s page. It’s one line of code:
document.write('<script src="http://www.adnetwork.com/main.js"><\/script>');
Fortunately, most of today’s newer browsers load scripts in parallel including scripts added via document.write. But a few weeks ago I noticed that Firefox 3.6 had some weird blocking behavior in a page with ads, and tracked it down to a script added using document.write.
The document.write scripts test page demonstrates the problem. It has four scripts. The first and second are inserted using document.write. The third and fourth are loaded the normal way (via HTML using SCRIPT SRC). All four scripts are configured to take 4 seconds to download. In IE8, Chrome 4, Safari 4, and Opera 10.10, the total page load time is ~4 seconds. All the scripts, even the ones inserted using document.write, are loaded in parallel. In Firefox, the total page load time is 12 seconds (tested on 2.0, 3.0, and 3.6). The first document.write script loads from 1-4 seconds, the second document.write scripts loads from 5-8 seconds, and the final two normal scripts are loaded in parallel from 9-12 seconds.
The issues with document.write are getting more well known. Some 3rd party code snippets (including Google Analytics) are switching away from document.write. But most 3rd party snippets still use document.write to insert their code into the publisher’s page. Here’s one more reason to avoid document.write.
The five posts in this series are:
Derej Neter | 10-Feb-10 at 6:35 pm | Permalink |
Hi Steve,
The document.writes scripts test page you linked to appears to be password protected. Just wanted to let you know. Thanks for all the great blog entries!
Steve Souders | 10-Feb-10 at 8:18 pm | Permalink |
Fixed! Thanks, Derej.
Shamsh | 10-Feb-10 at 9:15 pm | Permalink |
Thanks Steve
Kirk Cerny | 11-Feb-10 at 8:52 am | Permalink |
Is this a step backwards?
Does Firefox 3.5.7 block on document.write
edvakf | 11-Feb-10 at 11:11 am | Permalink |
You must have tested with Opera’s Delayed Script Execution turned on.
Opera still doesn’t speculatively load scripts by default.
Theo | 14-Feb-10 at 1:06 pm | Permalink |
Thanks, this really explains some issues I’ve been having. I have a site which has seemed to block at random times while loading a particular script. It’s just been a nuisance and since it was intermittent I’ve more or less put it down to the idiosyncrasies of websites in general. Now I realize it’s all down to Firefox. I’ve switched a lot between Chrome, Safari and Firefox while testing it, and I just haven’t connected the dots — but now it’s obvious that it’s been blocking every time I’ve tested with Firefox, but not when I’ve tested with the other browsers.
Eric Bréchemier | 15-Feb-10 at 6:51 am | Permalink |
I surely wish advertisers such as Google Adsense stopped using document.write altogether…
In the meantime, I have developed an alternative method to load third party scripts making use of document.write dynamically, by replacing the document.write function while keeping a high level of compatibility with the expected browser behavior.
The code is open source and I have published a demo, loading three Google ads and the Amazon Recommendations Widgets dynamically:
http://bezen.org/javascript/demo/dynamic-script-loading-with-bezen-load.html
John Dousaitis | 15-Feb-10 at 10:13 am | Permalink |
Very good article Steve. Thanks!
Frank Thuerigen | 16-Feb-10 at 7:07 am | Permalink |
Here is another solution approach:
http://blog.phpbuero.de/?p=26