How can I load AJAX data in the background, without a performance impact?

Question

I have a very large product catalog, that I'm trying to load in "Pages" of, say, 10 items at a time.

Now, if a user opens my catalog, and spends 30 seconds browsing the first "page", I want my app to keep loading data from the server - so that by the time the user goes to a different page, odds are high that its data will be already loaded to their browser.

I've managed to do so with a recursive Ajax.Request, that after a page is loaded, loads the next page.

Controller.prototype.loadVarieties = function(varietyNames){
    //Loads varieties from the catalog, checks if more varieties need to be loaded, and keeps loaded them.
    new Ajax.Request("../GetVarieties.php", {
                method: 'get',
                parameters: {'varietyNames': varietyNames.toJSON()},
                onSuccess: function (response) {
                    this.model.parseCatalog(response.responseText);
                    var varietyNames = this.model.getVarietiesToLoad();
                    if(varietyNames.length != 0){
                        this.loadVarieties(varietyNames);
                    }
                }.bind(this)
            });
}

Unfortunately, this is causing performance problems - the browser responds to user input very slugglishly until the entire catalog is loaded. (At which point, I may as well either load the entire catalog, or not do background loading).

What could I do to implement low-priority background loading of the data? Is it even possible? Should I give up and just do lazy loading?

Answer 1

The problem is not with the Ajax call, that should not hang up the user at all. The problem comes when you are processing that data. Large loops and many writes to the DOM will make the browser sluggish. Smaller loops, using setTimeout for loops, and writing to the DOM once will make it more responsive.

Without seeing the processing code, that is as much help as I can give.