将大型元素/数据集附加到dom的性能

我一次追加大量的表格行元素，并遇到一些主要瓶颈。目前我正在使用jQuery，但如果它完成了这项工作，我将开放给基于JavaScript的解决方案。将大型元素/数据集附加到dom的性能

我需要在给定的时间追加0-100表行的任何地方（它实际上可能更多，但我会分页超过100）。

现在我单独追加每个表行的DOM ...

loop { 
    ..build html str... 
    $("#myTable").append(row); 
}

然后我淡出他们都在一次

$("#myTable tr").fadeIn();

有几件事情需要考虑。 ..

1）我绑定数据到每个单独的表行，这就是为什么我从一个大规模追加切换到附加单独的行首先。

2）我非常喜欢淡入淡出效果。虽然对于应用程序来说不是必不可少的，但我对美学和动画非常重要（当然，这不会分散对应用程序的使用）。对于大量数据应用适度的淡入淡出效果，必须有一个好方法。我需要将特定的数据绑定到每一行，这主要是因为我需要将特定的数据绑定到每一行。我绑定我的数据是否错误？有没有更好的方法来跟踪这些数据，而不是绑定到它们各自的tr？

是更好地运用影响/在递归函数大块或小块DOM操作？

有没有哪种情况下最好做一个或另一个？如果是这样，选择合适方法的指标是什么？

来源

2010-12-20 Derek Adair

“绑定”是什么意思？您是否将数据属性添加到您的tr或每行的绑定事件？ – Jaime 2010-12-20 17:49:07

我绑定数据属性w/jQUERY .DATA api。 – 2010-12-21 14:05:53

看看这个post by John Resig，它解释了在做大量DOM添加时使用DocumentFragments的好处。

DocumentFragment是一个容器，您可以添加节点而无需以任何方式实际更改DOM。准备好后，将整个片段添加到DOM中，并将其内容放入DOM中。

而且，这样做对$("#myTable")真的不建议每个迭代 - 做循环之前曾经。

来源

2010-12-20 18:29:05

这是一篇非常有趣的文章！ – 2010-12-21 14:02:04

DocumentFragments是我的新朋友=） – 2010-12-23 15:21:25

我怀疑你的性能问题是因为你在循环中多次修改DOM。

取而代之，请在获取所有行后尝试修改它。浏览器非常擅长innerHTML替换。尝试类似

$("#myTable").html("all the rows dom here");

注意到你可能有确切的选择发挥使用，以获得DOM在正确的位置。但主要想法是使用innerHTML，并尽可能少地使用它。

来源

2010-12-20 17:44:35 hvgotcodes

将大型元素/数据集附加到dom的性能

回答

相关问题