Question

I’m told that document.write should be avoided in web page since it hurts web page performance. But what is the exact reason?

Answer 1

document.write() itself doesn’t seem to be very harmful to page performance in most browsers. In fact, I ran some tests at DHTML Kitchen and found that in Firefox, Opera and Chrome, document.write() was actually faster on the first load, and comparable in speed of standard HTML on subsequent refreshes. Internet Explorer 8 was the exception, but it was actually faster than the other browsers at rendering the HTML (surprisingly).

As Guffa’s answer points out, and what I was building up to, the actual performance issues come from inline scripts themselves. Content rendering can only continue when an inline script has finished executing, so if you have a complexe routine inside an inline script you can noticeably halt your page’s loading for the end user. That’s why waiting for onload/DOMReady and using DOM manipulation is preferred.

It’s especially unwise to use document.write() after the document has finished loading. In most browsers, using document.write() after document load also implies document.open(), which will wipe the current HTML off the screen and create a new document.

That doesn’t mean that document.write() doesn’t have its uses, it’s just that most developers use it for the wrong reasons. Real problems with document.write() include:

• You can’t use it in documents served as XHTML (for browsers that correctly parse XHTML as XHTML).
• Overwrites the entire page when used after DOM parsing has completed.
• Adds content to the page that isn’t accessible to browsers with JavaScript disabled (although <noscript> is sometimes a valid workaround here).
• More difficult to maintain than static HTML.