CODEWITHSUNDEEP
javascripthtmlajaxcachingxmlhttprequest
pyramation
pyramation

Reputation: 1671

prefetching HTML content on initial HTML page for future requests

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?

Upvotes: 1

Views: 547

Answers (1)

Halcyon
Halcyon

Reputation: 57729

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.

Upvotes: 2

Related Questions