Lazy loading and dependency resolution

Question

some time ago, I was reading an article(a library built by some guy) about how his library can do

1. lazy loading of JS
2. resolve dependencies between JS (typically encountered when trying to "include" one js from another)
3. include files only once. thought specified multiple times regardless of how they are called (either directly specifying it as file or specifying it as one of the dependencies)

I forgot to bookmark it, what a mistake . Can some one point me to something which can do the above. I know DOJO and YUI library have something like this, but I am looking for something which I can use with jQuery

I am probably looking for one more feature as well.

• My site has asp.net user controls (reusable server side code snippets) which have some JS. Some of them get fired right away, when the page is loading which gives a bad user experience. Yahoo performance guidelines specify that JS should be at the bottom of the page, but this is not possible in my case as this would require me to separate the JS and the corresponding server side control into different files and maintenance would be difficult. I definitely can put a jQuery document.ready() in my user control JS to make sure that it fires only after the DOM has loaded, but I am looking for a simpler solution.

Is there anyway that I could say "begin executing any JS only after DOM has loaded" in a global way than just writing "document.ready" within every user control ?

Answer 1

Microsoft Research proposed a new tool called DOLOTO . It can take care of rewriting & function splitting and enable the on-demand js loading possible.

From the site..

Doloto is a system that analyzes application workloads and automatically performs code splitting of existing large Web 2.0 applications. After being processed by Doloto, an application will initially transfer only the portion of code necessary for application initialization. The rest of the application's code is replaced by short stubs -- their actual function code is transferred lazily in the background or, at the latest, on-demand on first execution.

Answer 2

OK I guess I found the link

http://ajaxian.com/archives/usingjs-manage-javascript-dependencies http://www.jondavis.net/techblog/post/2008/04/Javascript-Introducing-Using-%28js%29.aspx

I also found one more, for folks who are interested in lazy loading/dynamic js dependency resolution

http://jsload.net/

Answer 3

About the lazy-loading scripts thingy, most libraries just adds a <script> element inside the HTML pointing to the JS file to be "included" (assynchronously), while others like DOJO, fetches it's dependencies using a XMLHttpRequest and then eval's its contents, making it work synchronously.

I've used the YUI-Loader that is pretty much simple to use and you don't need the whole library to get it working. There are other libraries that gives you just this specific funcionality, but I think YUI's is the safe choice.

About your last question, I don't think there's something like that. You would have to do it yourself, but it would be similar to using document.ready .

Answer 4

i did in my framework a similar thing:
i created a include_js(file); that include the js file only if it isn't included reading and executing it with a synchronous ajax call. Simply put that code in top of the page that needs dependencies and you're done!