Thursday, December 25th, 2008

A Christmas Wish: “I promise not to use document.write()” mode

<>p>While dosing off last night a few conversations stirred up in my semi-consciousness. They were of work arounds and layout issues. Too many were “We have to do this in case a script does a document.write somewhere in the future.”

It’s hard to tell of course. You may include a script that dynamically adds a script that does a document.write (ads anyone?).

The problem is that we are paying the price on every page that we work with. Optimizations can’t be made because of the chance of something that may not happen.

So, for Christmas, maybe we could have some way of telling the browser that you promise document.write() isn’t ahead, and error out if that happens.

But, back to the real thing (or whatever holiday fun you are having):

Bob Philips once said there are 3 stages of man:

  • He believes in Santa Claus,
  • He doesn’t believe in Santa Claus,
  • He is Santa Claus

Have a nice break, and catch you after!

Related Content:

Posted by Dion Almaer at 12:22 am
16 Comments

++++-
4.4 rating from 29 votes

16 Comments »

Comments feed TrackBack URI

What optimizations must you avoid due to potential document.writes?

Comment by LJHarb — December 25, 2008

Well, I dont prefer Zenism.

* He believes in Santa Claus,
* He doesn’t believe in Santa Claus,
* He is Santa Claus

So in true opensource fashion, here is my self-aggrandising fork of the above list – a more nuanced ( ;) ) list, if you permit fanboi(j)ism on XMas:

* He believes in Santa Claus v1.0
* He believes in Santa Claus v2.0
* He believes in Santa Claus Electric Branch v1.0
* He doesn’t believe in Santa Claus v1.0
* He doesn’t believe in Santa Claus v2.0
* He doesn’t believe in Santa Claus Electric Branch v1.0
* He tries to copy Santa Claus v1.0
* He tries to copy Santa Claus v2.0
* He is fanboje of Santa Claus v2.0 ( ;) )
* He is Santa Claus v1.0, v2.0 and more....

Merry Christmas!
And may the blessings of the Elves, Gnomes and Saint Nicholas be upon you and your peoples!

Comment by davesrc — December 25, 2008

@LJHarb: I needed to search for the same info (i’ve used domready for ages)
A direct quote from Yahoo’s “Best practices for speeding up your website

In some situations it’s not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page’s content, it can’t be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.

An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn’t support the DEFER attribute

This is still not very informative on WHY you can’t use document.write other than that a script could be writing info somewhere in the middle of the page, or possible scope issues (but i dont think there’ll be much scoping in a document.write situation)

Comment by SchizoDuckie — December 25, 2008

This is the simple solution to telling the browser you won’t use document.write, and ensuring no other scripts can:

document.write = document.writeln = function(){};

You can of course put whatever you like in the function. The above just makes the method a no-op.

Comment by lachlanhunt — December 25, 2008

There is no reason to use document.write anymore. Use the DOM. Browsers should just disable document.write by default.

The problem is that in most browsers, loading a script defers loading the subsequent HTML and all other included scripts, images etc. so all scripts (except those that need to be in HEAD) should be moved to the page bottom, which is of course not an option if the script wants to insert HTML at the current location. Appending content to a node after loading the document is less laggy and cleaner (OK, not visually…) plus it reduces the danger of tag nesting errors.

I’m not sure what the DEFER attribute means exactly. W3C says it tells the browser that “the script is not going to generate any document content” which seems to include DOM manipulation and AJAX, so it’s not an option in most cases. What would you need a script for if it’s not going to generate any content? Popping alerts and filling textareas? So 90s.

Comment by randomrandom — December 25, 2008

What law constrains you then? Do you listen to them or yourself? Surely you have. Or do you face judgment for what is good? I tell you this, face judgment for what is good, not many do it.

You see, doing what is good is the opposite. I wish i can just say, “you bitches need do do what is right”, but then i speak from my Self which is ignorance.

Do what is good. Start a design war. Tell your boss he Is wrong. Show them. face getting fired even in the hardest of time. Do what you need to to achieve purity. For anyone who perceives good cannot produce bad. And believe in how you feel about it or else it is from your Self. Achieve and meet perfection. What is time and Who invented these constraints when there isn’t any? These serve no purpose in your works but the one who has no purpose.

Are you a master craftsman? Then be who you are. There cannot be impurity.

Ad vendors have their goal. And you had no choice but to adhere to their standards even when bad. Ad vandors say “there is no other way”. There is.

And this is precisely the reason why no company has put forth the strength to go against their IE users, they fear losing their share. Those who guard their life will lose it, and those who lost it will gain it.

Comment by jaysmith — December 25, 2008

AJAX (AHAH) + document.write = dead page

Here examples of a full-functionality document.write in AJAX. Google Adsense and GoogleMap uses document.write, but examples work perfectly.
To create universal wrapper of document.write is not easy.

Comment by sirus — December 25, 2008

Browsers need to follow Opera’s suite and make document.write not block the page but still supporting the operations of document.write.

Comment by Jordan1 — December 25, 2008

if we shouldn’t use document.write and innerHTML is evil (and soon to be phased out) then what should we use?

suggestions? with sample code snips please?

Comment by trixjo — December 25, 2008

FWIW I have been working on this:
http://blog.phpbuero.de/?p=26
Watch 3 ads right and bottom load when hitting F5. Still needs improvements, but works with Google and Amazon.

Comment by FrankThuerigen — December 26, 2008

2 sirus: you’re cool!

Comment by alshur — December 26, 2008

Oh really? How to implement DOMContentLoaded for IE, without thousands of try..catches being run, without external behavior files AND without document.write?
Nice riddle…

Comment by LeaVerou — December 26, 2008

Lecture 20 from my Stanford class talks about the issue of document.write, ads, and workarounds. Using document.write in a lazy-loaded script can erase the entire screen in many browsers (FF) or simply not work (IE), as shown in this example: Delayed Script Execution. (Click on “Load Dynamically” when you get to the test page.) FrankThuerigen is onto something. Artur Bergman from Wikia showed me a similar technique used in WoWWiki for handling ads that might use document.write. Their library “TieDivLibrary” has the ad write into a hidden div that is then moved into position after the main page content is done loading. But Jordan1 is right: web developers shouldn’t have to jump through these hoops to make pages load fast and still work. I wish all browsers had a (stable) implementation of the SCRIPT DEFER attribute that mimicked Opera’s “Delayed Script Execution” option. As described in this blog post, Opera’s implementation allows scripts to be asynchronously loaded, and still preserve the behavior of document.write.

Comment by souders — December 26, 2008

@LeaVerou: http://javascript.nwbox.com/IEContentLoaded/

Comment by shadedecho — December 26, 2008

shadedecho: I also said “without thousands of try..catches being run”.

Comment by LeaVerou — December 27, 2008

@LeaVerou-fair enough. But, since that specific example try/catches every 50ms, and you are saying “thousands”… are you expecting your pages to take in multiples of 50 seconds to load (in IE)? If so, the yeah, it’d execute thousands of times. But I’d guess on most pages it executes maybe a couple dozen times… maybe 100 times if the page is pretty content heavy. But then again, if your pages are going to take 50 seconds (or 100 seconds, or more) to load, you probably have other concerns on resource usage than a few thousand “wasted” try/catch calls.
.
And btw, IMHO, this failed try/catch approach, especially on the smaller scale but even on the “thousands” scale you mention, is a pretty forgiving (performance-wise) tradeoff for IE to get a better DomContentLoaded type event, as opposed to document.write() and others.
.
Moreover, document.write() detection for IE domready has been shown to cause problems with dynamic/lazy library loading type techniques. Specifically, problems have been seen with SWFObject (or other projects which use SWFObject) and Dojo, among others, when both try to use such techniques. So anything that gets away from the TERRIBLE fatal browser freeze that such a conflict presents is good in my book, even if it’s slightly less performant than all the other well-mannered browsers.

Comment by shadedecho — December 29, 2008

Leave a comment

You must be logged in to post a comment.