best techniques to optimize javascript loading

[Alex]

just started off at a new company and i inherited js-heavy work in progress.

the original version relied heavily on 'standard' javascript loading (for packed jquery and a jquery plugin) and apparently there were enough performance issues to warrant a look at alternative approaches.

what was done was implement lazy loading to append the <script src> into the DOM dynamically, and recursively check until it was fully loaded, at which point it loaded the second and third external scripts and so on.

the problem with this was excessive load on our (shared) server.

that's when the programmer called it quits and when i come in.

in the brief conversation he had with me he suggested i dynamically generate the js server-side and implement some sort of caching mechanism but that only really confused me.

so, basically, here's where i stand:

we have a banner that will be inserted into many sites. the banner relies on jquery and a jquery plugin + some custom js to do its thing.

how can this be optimized so that each individual user acessing each individual site won't create unnecessary server overload (we currently cant afford a dedicated server)?

thx!

Alex

 

[puffpio]

were these performance issues on the server? or performance issues on the client's web browser?

 

[Alex]

Originally posted by: puffpio
were these performance issues on the server? or performance issues on the client's web browser?

on server...

as far as client-side goes lazy-loading does the trick nicely, its just the endless requests for the same files that kills us

its only really ~60K of JS that needs to be downloaded but the thing is its so many different requests at the same time

 

[puffpio]

the cheapest solution server wise is to just transfer a plain old JS file w/ no processing (since it's basically just transferring plain text)

ie the original version is the best way

if u dynamically generate the JS server side, that is more CPU time eaten up that you couldn't afford in the first place. even if that dynamically generated code is then cached in RAM....well so is the the original solution too...the web server SHOULD cache those JS files in memory unless it hasnt been reuqested for in a while, or a newer version exists...

so..on your server, is the slowdown CPU related? disk IO? network IO?

 

[puffpio]

a possibliity it to point your packed jquery on to another server? the download link for jquery goes to "http://jqueryjs.googlecode.com...es/jquery-1.2.6.min.js"
can you just point to that? i dunno if that is not what googlecode intended.....but it may work

 

[NiKeFiDO]

I like puffpio's idea.

While you're not supposed to rely on other servers for code like that, you can most likely depend on Google and large companies to have that code available. Get that server load off your own server

Also, is this bandwidth or actual server load (RAM / CPU ?) (as puffpio asked)

 

[troytime]

we keep a lot of our static files on cachefly.net, it works out very nicely

 

[Alex]

Originally posted by: puffpio
the cheapest solution server wise is to just transfer a plain old JS file w/ no processing (since it's basically just transferring plain text)

ie the original version is the best way

if u dynamically generate the JS server side, that is more CPU time eaten up that you couldn't afford in the first place. even if that dynamically generated code is then cached in RAM....well so is the the original solution too...the web server SHOULD cache those JS files in memory unless it hasnt been reuqested for in a while, or a newer version exists...

so..on your server, is the slowdown CPU related? disk IO? network IO?

i was actually discussing this with someone earlier in the day

Originally posted by: troytime
we keep a lot of our static files on cachefly.net, it works out very nicely

seconded for the win!

i always noticed how live jquery plugin examples always pointed to "jquery.com/latest/jquery.js" or something like that

i guess a combination of smart lazy-loading and using cachefly (to control exactly what versions and packedness are up) would be ideal and if i wanted to be really paranoid i could add an extra clause in the lazy loading function that would use OUR server as a backup should say cachefly AND googlecode fail (ie: hopefully never!)

thanks!

i feel a lot more confident now to tackle this stuff!

 

[troytime]

i have yet to see cachefly fail (with millions of page views per day)

 

[Alex]

sweet

 

[DannyBoy]

1) Used packed JS files
2) If your JS is written well (modular / OO-centric) load only the specific portions / objects you need (e.g. using $.getScript with jQuery)
3) Cache properly

 

[Alex]

Originally posted by: DannyBoy
1) Used packed JS files

2) If your JS is written well (modular / OO-centric) load only the specific portions / objects you need (e.g. using $.getScript with jQuery)

2) If your JS is written well (modular / OO-centric) load only the specific portions / objects you need (e.g. using $.getScript with jQuery)
3) Cache properly

hey dude, thanks for the input!
actually been a while since the original post and i've gotten tons of feedback already so here's my 2 cents in case this helps anyone:

1) Used packed JS files

Despite being a smaller initial download, minified performs better overall: says John the man himself

2) If your JS is written well (modular / OO-centric) load only the specific portions / objects you need (e.g. using $.getScript with jQuery)

good one! wasnt aware of it too!

3) Cache properly

[/quote]

yup, and also, don't forget to force redownloading the cache if you change your scripts!