如何在后台加载AJAX数据，而不会影响性能？

Question

我有一个非常大的产品目录，我试图在“页面”中加载，例如，一次10个项目。

现在，如果用户打开我的目录，并花30秒浏览第一个“页面”，我希望我的应用程序继续从服务器加载数据 - 这样当用户进入不同的页面时，其可能性很高数据已经加载到他们的浏览器中。

我已经设法使用递归的Ajax.Request，在加载页面后，加载下一页。

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

不幸的是，这会导致性能问题 - 浏览器会非常缓慢地响应用户输入，直到加载整个目录。 （此时，我也可以加载整个目录，或者不加载后台加载）。

我该怎么做才能实现数据的低优先级后台加载？ 它甚至可能吗？ 我应该放弃，只是懒惰加载？

Answer 1

问题不在于Ajax调用，根本不应该挂断用户。 处理该数据时会出现问题。 大型循环和对DOM的许多写入将使浏览器变得迟缓。 较小的循环，使用setTimeout for循环，并写入DOM一次将使它更具响应性。

没有看到处理代码，这是我能给予的帮助。