Javascript jquery向DOM中插入大数据

在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优化中还有什么可以尝试的吗

---

谢谢

尽可能缩小选择范围

$("#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);
    }
}

var chunks=[]；
var计数器=0；
chunks=breakapartdataintockunks（数据）；
setTimeout（函数（）{processChunk（chunks，counter）；}，0）；
函数processChunk（块、计数器）{
if（计数器

是否可能缩小选择器的范围

$("#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);
    }
}

var chunks=[]；
var计数器=0；
chunks=breakapartdataintockunks（数据）；
setTimeout（函数（）{processChunk（chunks，counter）；}，0）；
函数processChunk（块、计数器）{
if（计数器

我猜您返回的不是一大块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]));
}

//响应=['One Element'，'One Elmenet']
对于（变量i=0；i'）.html（response[i]）；
}

---

希望对您有所帮助

我猜您返回的不是一大块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]));
}

//响应=['One Element'，'One Elmenet']
对于（变量i=0；i'）.html（response[i]）；
}

---

希望它有帮助

数据有多大？看起来它必须是相当大的，或者有很多

ul

被发现，你可以得到大量的数据。只需为ajax调用和服务器端指定一个开始和结束，然后在完成当前块后执行回调以获取下一个块，因为只有一个ul。我记录了数据。长度和结果是2011684个字符。数据有多大？看起来它必须是相当大的，或者有很多

ul

被发现，你可以得到大量的数据。只需为ajax调用和服务器端指定一个开始和结束，然后在完成当前块后执行回调以获取下一个块，因为只有一个ul。我记录了数据。长度和结果是2011684个字符。嗯，我不太懂你的代码。我应该将数据分块到ajax的完成部分吗？如何将数据准确地插入到您的示例中？我会将您当前的响应分为几个部分，然后按照上面所示进行处理。因此，不要发出多个请求，而是将单个请求分解成一个块数组，然后将其发送到

processChunks（）

方法中。嗨，Gabe，谢谢你的回复。我在测试您的方法，唯一的问题是整个过程后面的代码应该在分块/插入过程完成后执行。如果我在setTimeout（function（）{processChunk（chunks，counter）；}，0）之后添加console.log（“1”）；此日志将在所有插入操作完成之前执行！还有，我认为html（）将无法工作，因为每个新的块都将替换现有的块。append更好，但是如果原始数据被分块放在注释字符串中，那么它就会断开。我接受你的回答，因为它有助于提高性能。嗯，我不太理解你的代码。我应该将数据分块到ajax的完成部分吗？如何将数据准确地插入到您的示例中？我会将您当前的响应分为几个部分，然后按照上面所示进行处理。因此，不要发出多个请求，而是将单个请求分解成一个块数组，然后将其发送到

processChunks（）

方法中。嗨，Gabe，谢谢你的回复。我在测试您的方法，唯一的问题是整个过程后面的代码应该在分块/插入过程完成后执行。如果我在setTimeout（function（）{processChunk（chunks，counter）；}，0）之后添加console.log（“1”）；此日志将在所有插入操作完成之前执行！还有，我认为html（）将无法工作，因为每个新的块都将替换现有的块。append更好，但是如果原始数据在注释字符串中被分块，那么它就会断开。我接受了你的回答，因为它有助于提高性能。感谢你的回复，我正在js中搜索快速解决方案，但你的解决方案也应该可以。感谢你的回复，我在js中搜索快速解决方案，但您的解决方案也应该有效。