Comment charger les données AJAX en arrière-plan, sans impact sur les performances?

Question

J'ai un très grand catalogue de produits, que j'essaye de charger dans des "Pages" de, disons, 10 articles à la fois.

Maintenant, si un utilisateur ouvre mon catalogue et passe 30 secondes à parcourir la première "page", je veux que mon application continue de charger les données du serveur - de sorte qu'au moment où l'utilisateur va sur une page différente, les chances sont élevés que ses données seront déjà chargées dans leur navigateur.

J'ai réussi à le faire avec un Ajax.Request récursif, qui après le chargement d'une page, charge la page suivante.

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) 
      }); 
} 

Malheureusement, cela est à l'origine des problèmes de performance - le navigateur répond à l'entrée utilisateur très slugglishly jusqu'à ce que l'ensemble du catalogue est chargé. (A ce stade, je peux aussi bien charger le catalogue entier, ou ne pas charger le fond).

Que puis-je faire pour implémenter le chargement en arrière-plan de basse priorité des données? Est-ce même possible? Devrais-je abandonner et juste faire un chargement paresseux?

Answer 1

Le problème n'est pas avec l'appel Ajax, cela ne devrait pas raccrocher l'utilisateur du tout. Le problème vient quand vous traitez ces données. De grandes boucles et de nombreuses écritures sur le DOM rendront le navigateur léthargique. Des boucles plus petites, utilisant setTimeout pour les boucles, et écrivant une fois dans le DOM le rendront plus réactif.

Sans voir le code de traitement, c'est autant d'aide que je peux donner.