Question

我有一个ajax调用，会给我500行返回。每一行都将创建一个将添加到DOM的HTML对象。这一切都很好，但速度很慢。

我想添加20，然后渲染完成的内容，然后继续添加最后的480.但是，我无法弄清楚如何强制渲染。

代码是这样的：

for (i = 0; i < 500; i += 1) {
     $(newdata[i]).insertAfter('#object');
}

newdata是texttring，例如

"<p>hello world</p>"

修改

我可能在帖子中遗漏了一些重要信息。不按顺序插入节点。它是一棵树，每个节点都有我所知道的父节点。并且每个父节点都保证在节点之前插入。所以我不能只是在彼此之后附加节点，因为它们可能位于不同的分支中。

Answer 1

此时停止插入一个节点，而是插入节点集合这不是循环慢，它的DOM操作很慢，而且当时一个节点插入500个DOM节点会很慢。

var nodes = $();

for (i = 0; i < 20; i++) {
    nodes.append(newdata[i])
}

$('#object').after(nodes);

var more_nodes = $();

for (i = 20; i < 500; i++) {
    more_nodes.append(newdata[i])
}

$('#object').after(more_nodes);

如果你这样做，它可能会快10倍，你不必插入20，然后480等。

Answer 2

让渲染代码有时间运行。写几行，调用setInterval()让其他代码运行，然后继续：

function renderLines(newdata) {
  var len = newdata.length;
  var sofar = 0;
  var obj = $('#object');

  var renderSome = function() {
    for ( var i = 0; (i < 20) && ((i + sofar) < len); ++i )
    {
      $(newdata[i + sofar]).insertAfter(obj);
    }

    sofar += 20;

    if (sofar < len)
      setTimeout(renderSome, 10);
  };

  setTimeout(renderSome, 10);
}

强制开始使用javascript渲染

修改

2 个答案: