prefetching HTML content on initial HTML page for future requests

Question

I'm creating an app that requests a lot of content from the server. I installed timers from click to render throughout the app at each stage, AJAX request, DOM Injection, and Rendering. I found that the requests are completely unpredictable, and on average I've recorded they can take up 43% of the click-to-render pipeline.

I wanted to minimize these requests to optimize the UX, and my solution was to create a hash table using a JS variable. I've also tried using localStorage in the same manner.

 MyRequest.prototype.sync = function(r) {

    if (this.storage[r.path]) {
        return this.storage[r.path];
    } else {

        this.req = new XMLHttpRequest();
        this.req.open('GET', r.path, false);
        this.req.send(null);

        if (this.req.status === 200) {  
           this.storage[r.path] = this.req.responseText;
           return this.req.responseText;  
        } else {
           return null;
        }
    }
};

Other solutions I've thought of is keeping content in the DOM tree as DOM elements shoved off the viewport or display:none to not affect the render tree. And grabbing the content from the DOM when needed.

** What is the best practice for prefetching content, preferably on the initial HTTP request of the html page, that will eventually be requested? Is this method a decent solution?

What is the nature of the content? Are there a lot of images? — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Feb 8, 2012 at 20:06
@Diodeus, lots of images for sure. Generally it could be HTML content of any form. — pyramation
– pyramation, Commented Feb 8, 2012 at 21:20

Halcyon · Accepted Answer · 2012-02-08 20:14:18Z

2

If you can do this right you will make millions :)

Pre-fetching is all about fetching stuff before the user knows (or indicates) he wants it.

There are several strategies:

Load content in with the original request

Let's say the first page that loads has 6 buttons. If it's very likely the user will click on button1 and button3, then it might be worthwhile to send those pages along immediately.

The downside is that your initial result will be large so it will take longer to download and process.

Fetch pages in the background

If you're in a 'funnel' situation where it's likely the user will click 'next' to the next page, load the page in the background. When the user clicks next the page is already there.

Don't unload anything

If you're in a situation where the user will switch back and forth often between several pages, don't unload the pages. Keep the data in memory, or even the whole HTML structure in the DOM (display:none and such).

Fetch pages as they are needed

This is your 'fallback' and probably what you're currently using.

Getting pre-fetching right is very hard. It depends on the way your users use your website. The way they use it can change over time. The way a single user uses it can change over time.

It's up to you to find the right balance for these techniques.

answered Feb 8, 2012 at 20:14

Halcyon

57.8k10 gold badges93 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pyramation Over a year ago

what do you think about DOM display:none VS. storing in a JS var?

Halcyon Over a year ago

It depends on the memory characteristics. Storing in the DOM might give faster 'switch' (render) time, but might make the overall experience more sluggish. Storing in JS will likely take less memory, but gives a longer 'switch' time. These characteristics can vary widely across different platforms, especially on mobile. I suppose as a rule of thumb: don't store too much in memory, and least of all in the DOM but you might decide to keep it there once you've rendered it ("don't unload anything").

Collectives™ on Stack Overflow

prefetching HTML content on initial HTML page for future requests

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related