Can JavaScript be used to prefetch external CSS and JS files, ready for the next page on same website?

Question

I am in the process of optimising a website, with the main aim of improving the overall download times of web pages. I have been applying as many of the techniques recommended by the Yahoo Developer Network's "Best Practices for Speeding Up Your Web Site".

Now, the stats show that we have a lot of visitors that first access the website via:

the stand-alone search engine page HTTP error handlers - i.e. our custom "404 Not Found” page other miscellaneous stand-alone pages

Please note that these so-called "stand-alone pages” exist independently from the template system which is responsible for the layout and structure of the pages from the website proper. They have their own style sheet(s) and scripts (and therefore exist independently of the template system's CSS and JS files also).

Now, these page types are more intermediary pages than content pages. A good example of their general purpose would be that of a reference landing page. I thought that it would be a good idea to use a technique like post-onload to “prime” the user's cache ready for their next move (which will nearly always be part of the main template system).

The script by Steve Sounders is:

post-onload.php:

<script>
function doOnload() {
    // Do the downloading awhile AFTER the onload.
    setTimeout("downloadComponents()", 1000);
}

window.onload = doOnload;

// Download external components dynamically using JavaScript.
function downloadComponents() {
    downloadCSS("http://stevesouders.com/hpws/testsm.css?t=1388138263");
    downloadJS("http://stevesouders.com/hpws/testsma.js?t=1388138263");
    downloadJS("http://stevesouders.com/hpws/testsmb.js?t=1388138263");
    downloadJS("http://stevesouders.com/hpws/testsmc.js?t=1388138263");
}

// Download a stylesheet dynamically.
function downloadCSS(url) {
    var elem = document.createElement("link");
    elem.rel = "stylesheet";
    elem.type = "text/css";
    elem.href = url;
    document.body.appendChild(elem);
}

// Download a script dynamically.
function downloadJS(url) {
    var elem = document.createElement("script");
    elem.src = url;
    document.body.appendChild(elem);
}
</script>

What I would like to know is this:

Is it possible to re-write the two functions that perform basically the same thing as downloadCSS(url) and downloadJS(url), __without__ it actually being applied to the containing web page?

In effect, I am looking for downloadCSS(url) / downloadJS(url) functions that acts as a pre-load for the next web page's external CSS/JS files, which will behave much like the way the HTML5 spec intends the @prefetch attribute to be implemented). I basically want the files downloaded via post-onload to be in the cache ready.

If not, any other suggestions on how to perform the same task would be amazing!

Thanks in advance!

Answer 1

if you using ?t=1388138263 you cannot preload at all, because every time you will load a new version..

with jquery you can do something like:

$.ajax('script.js',{cache: true, dataType:'script'});
//or
$.getScript('script.js')
$.ajax('styles.css',{cache: true});

or you can create invisible iframe and load in to it html page which load all js and css files

hope this help