javascript - 如何在不影响性能的情况下在后台加载 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 并写入 DOM 一次将使它的响应速度更快。

没有看到处理代码，这是我所能提供的最大帮助。