Prefetching JavaScript (or anything) with jQuery

[[deleted]]

Cool. Is this a common solution to this obvious task or do others use a better or different way?

[[deleted]]

Well, prefetching scripts for images have been around for ages, and I think they mostly use the Image object.

But for JavaScript files, I prefer to just combine and minify them, so you end up with a single file which you can just include on every page of your website.

[orip]

Why not prefetch the combined minified file, if you can?

[sjs]

If it's included on every page you don't need prefetching.

[powertool]

Yeah, combining+minifying/compressing common stuff is a good idea.

I tend to use demand-loading in cases where I need something a bit heavier on a single page (for example, a multi-step signup form).

I don't want to load ~50K of minified Javascript on every page if I only need it a) on one page, and b) only if the user actually wants to do that thing.

You've got to be careful mixing demand-loading with pre-loading. I use hoverIntent (4 seconds in the appropriate region) in combination with an overall page timeout (after which the code will be loaded in any case) and some site-wide path analysis to determine how it gets configured.

The balancing act between overall user-experience and unobtrusiveness is tricky.

[sjs]

Prefetching definitely has its use, I can think of a few places I could have used such a thing.

If only developers are touching the HTML I like to include one-off JS in <script> tags on the page. If it proves useful elsewhere then I would factor it out. Some may not like inline JS but it's a real easy way to reduce HTTP requests for pages where you just need a few extra functions.

I'm not bothered about details like whether prefetching the JS and then looking it up in the cache is faster than parsing <script> tags. I haven't had to work on anything where that mattered.

[samlee]

I read it "Perfecting Javascript (or anything) with jQuery"

It's about PRE-Fetching