Question

在js中我通过ajax调用服务器，服务器返回我应该插入到dom中的已处理数据。

$.fn.loadChildren = function() {
  var $li = $(this);

  ajaxQueue.add({
    url:     "myUrl.to",
    data:    "mydata",
    success: function(data) {

      $li.find("ul").html(data);
      ....

问题是数据可能是非常庞大的字符串，在这种情况下在FF中我收到错误信息 “此页面上的脚本可能正忙，或者可能已停止响应......”

我尝试使用replaceWith而不是html但我仍然遇到同样的问题。

我知道在每个浏览器中都有DOM插入的限制，但我想知道jQuery优化还有什么我可以尝试的。

由于

Answer 1

可能缩小选择器吗？

$("#myul").html(data);

尝试分块数据。这样的事情应该有助于提高性能。

var chunks = [];
var counter = 0;

chunks = breakApartDataIntoChunks(data);

setTimeout(function() { processChunk(chunks, counter); }, 0);

function processChunk(chunks, counter) {
    if (counter < chunks.length) {
        // insert this chunk into dom here
        $li.find("ul").append(chunks[counter]);
        counter++;
        setTimeout(function() { processChunk(chunks, counter); }, 1);
    }
}

Answer 2

我猜你所返回的内容并不是Html的一大块，但是很多元素，比如列表或表，你可以做的不是返回html，返回一个带有这些元素的JSON数组，以及逐个插入它们，如下所示：

//response = ['<div>One Element</div>', '</div>Another Elmenet</div>']
for(var i = 0; i < response.lenght; i++) {
     $('ul#myElement').append($('<li>').html(response[i]));
}

希望有所帮助

jquery将大数据插入DOM

2 个答案: