Topic: To optimise javscript file includes

Hi guys, I was just going over my project and noticed something that for some weird reason shouldn't be but unfortunately it is. I don't know why but anyway - I've created and included dozens of javascript files for use in my prpoject. Almost all of them are handlers for ajax calls and validation checks etc. However I noticed that on average in every page in my projject I'm including like an average of 15 to 20 javascript files.

Infact my document head is filled with javascript includes . I'm using the scriptaculous framework files and for that reason I'm including already 5 of the scriptaculous files in every single page plus theres my other javascript files. Is this the right way to do this? Or am I making a big mistake here

indeed - having a bunch of javascript is going to be a burden - each file is often one roundtrip to the server (provided it correctly returns '304, not modified'). On the other hand, including javascript you don't need isn't great either. Guess it depends on how often you actually switch pages in your application.

So I'd suggest you combine what you need on every page into one, compressed, javascript file (don't transmit 'straight javascript' - the browser doesn't care, and those compressors really pull out a fair percentage of bytes), and keep the rest in seperate files (with the appropriate caching headers sent by your webserver, of course).

I remember the dojo project having a clever solution about this... but it sure wasn't straight forward.

So long,

->Tyberius Prime

Version the scripts and set a loooong expiry date on them. The browser should not poke the server to see if the file changed until the expiry date. Another thing is to merge some files together to decrease the number of connections : browsers are slowly increasing the number of connections per domain but many are still limited to 2 and with 15-20 JS files, plus CSS plus images, you quickly hit the wall.

I never used a JS framework, my position is a bit special though, but are you sure you need the massive Prototype/Scriptaculous which weighs a mease 100+ kB GZip'ed ? Have you considered jQuery or Base2 which both float around the 10-15 kB GZip'ed.



(Edited by poi on 04-16-2008 09:57)

Now that you mentioned it - I have been finding the scriptaculous library a tad wee bit - uh big and missing out a lot of effects for which I seem to end up downloading patches or standalone js code. What other alternatives are there for scriptaculous that have ALL the effects and more plus come with less overheads...

the Dojo toolkit is seriously engineered... but then, switching after your project has started could be a bit of a drag...

Well the thing is that because my project is using a lot of code form different places - it slows down alot so I'm thinking of how to optimise it in whatever way possible. The Db end is fine - no isues there however what I've noticed is that I've included a loty of self standing mini project sinside my project.

Like for an example we have roundcubemail plus phpfreechat and I've also added a facility to include UWA widgets from remote locations - why - please don't ask its my bosses idea.

Plus not to mention the huge list of javascript files I have to include. The project is seriously bloatware at its best. Although I have tried my best to maintain some sort of structure - I seriously doubt it has worked.

Have you looked at Yahoo's Exceptional Performance stuff ? Lots of sound advices. Steve Souders & co. did quite a few talks on performance.

One problem with having many script files is that browsers halt parsing further into the HTML file until the file is downloaded completely, because the script may contain document.write calls. As an alternative behaviour, the browser could be parsing ahead but deferring further insertions into the document tree until the script has been executed instead of halting entirely. In this case, it could parallelise the requests but still demand strict order on the treebuilding. In any case, the result would be that you're putting a bigger block on incremental rendering than if you had used only a single or a smaller number of scripts.

--
var Liorean = {
abode: "http://codingforums.com/",
profile: "http://codingforums.com/member.php?u=5798"};

that's why the Yahoo performance people advice to place the SCRIPTs just before the closing BODY tag

Hmmm sound advice but in this case wouldn't this be problematic in the situation that lets say I have a function call somewhere in the middle of the page and all the function sripts are included in the bottom?

Paritycheck: Then don't do it that way. The script files should just declare and define those variables, functions and event handlers you need. The only script that should do any action is the last script on the page, or an event handler of the 'load' or 'DOMContentLoaded' types. If you avoid using document.write there's really no reason to do any work while the HTML is still being parsed. In fact, for loading speed reasons in ie, you should consider deferring the scripts.

--
var Liorean = {
abode: "http://codingforums.com/",
profile: "http://codingforums.com/member.php?u=5798"};