instead of a complete DOM-ready - use a targeted tag id or on load function not on the body can be an image or whatever to call the function.

also note that you can have JS includes anywhere in the document apply them as needed.

note: The header JS will only be slower on initial page load after it’s been cached, it’s faster to have it in the header. So it would be ideal to have ’some’ script in the header section.

as always with these type of ‘what is better answers’ - it depends on the app/ page itself.

The correct answer is to use JavaScript in the header and includes inside the document and sometimes both.

In the header initialize variables and functions that are essential for initial layout,
and only the ‘basic’ page functionality for your application. There are DOM-ready scripts that work.

The problem is that so many are trying to use these giant JS libraries.
These libraries for building RIAs are far from optimal and not nearly as modular as they should be. I would think best practice would be to include JS files as needed through out the document in the form of progressive loading and progressive execution. Only including the parts that are needed for the current loaded content, and interchanging loading XHTML and JavaScript only as it is needed.

Yes, statistics scripts should always be at the bottom, no matter what.

Morgan

Thanks for the tip! Interesting tool!

Diego,

Event delegation can be a good solution, and is in general the way to work with events. However, just as you say, many times people use a JavaScript library to apply events, and then that library need to be included before the event is applied anyway (unless one uses separate code for applying just that specific event, but then in turn, you have multiple places and ways to handle events, which isn’t good either).

So, I’m just not sure it’s the best solution either. It’s tough shit finding a good solution here.

When it comes to event delegation (and your IEContentLoaded solution and doScroll, which is funky stuff ), I know you have good code and ideas. I guess it all depends on what level you want to take event delegation too, but in general I do propose to people to have an event on the containing element, and then work with what element was the actual target.

Outtanames999,

To be honest, I don’t really know about their Flash files, but when it comes to HTML, CSS and JavaScript, I personally think their research has lead to a lot of great advice and practices.

In spite of the great deal of attention they have paid to optimizing HTML and JS and PHP, they are at the mercy of bloated Flash files and no amount of code text optimization can possibly counteract that, which Yahoo has all but admitted.

Anyway the best pratice for the “clicked to early” problem is to use event delegation, this allows avoiding to wait for an “onload” event so the event can be added as soon as
the script starts (dynamically bound to new elements as they enter the DOM).

As a last resort if I have to wait for the entire HTML to be completely loaded I use my “ContentLoaded.js” to correctly handle the missing method for IE. The “doScroll(’left’)” trick for IE is great for these situations.

There may be scripts that can be loaded later through asynchronous “lazy loading” if the complete framework is too big. This may also be a reason to load all the pieces at the time they are needed. However a core script is necessary in the head to allow for “early page enlivenment” and to let the users click on buttons as soon as they see them appear.

Robert you may have a look at my lab site for “Event Delegates” you may be tempted to add something like that to your powerful DomAssistant, sources are on Google Code.

Diego Perini

http://stevesouders.com/cuzillion/

My new favourite tool

I’ve looked at many of the videos from Yahoo Developer’s area. And they contridict themselves somewhat. But one should not blindly go with one side or the other, just use common sense is my advice.

In one video the guy said that splitting large Javascript-files into smaller logical parts. This would make the browsing experience better, because the user don’t need to download a lot of code that is useless on the current page.

In the next video another guy said that you should put everything in one large file, causing less HTTP-requests.

Personally, I use both, depending on situation and where it’s logical to have bigger or smaller files.

To stay on topic I usually put most scripts in the head, but when I can put them in the bottom of document - I do it. Specially if you use Google Analytics and similar on your site/app, they can make pages halt for several seconds.

One other thing; if you have scripts in smaller parts and you have a start page (after user logs in), then you can preload scripts by putting them in the bottom of the document.

Alternative cases might be sufficiently efficient if you compress all your JavaScript files into one, compress them and gzip them, and then include them in the head part of the document.

Paul, André,

I’m glad you liked the references in the post…

Splitting up the JS functions into a file that is necessary beforehand and one that can be loaded afterwards only results in an extra HTTP request on first hit so is also less than optimal.

As for JS optimization: we use HTTP compression and are considering minification although that will only squeeze an insignificant extra bytes out of the size on the wire. Using f.i. Dean’s packer is far less optimal and requires the client to ‘unpack’ the contents on every pageview which is actually more of a performance drain than a gain.

I’ve found this works particularly well for web applications, since users are most likely already used to having a loading screen while waiting for an application to load. You can even get fancy and update the loading”screen with relevant information, like a progress bar.

You, Rob, are definitely THE Rockstar!!!

Also, you _should_ put noscript-elements in the body-element. Otherwise no-one will ever see the contents of them.

Reason being, I was using swfobject to write a flash movie into the page and it looked awkward for the whole page to load with a ugly bare content area that was going to be replaced by the swf.

P.S. Dean’s packer is not exactly what I was talking about when I said optimized