将大型元素/数据集附加到 dom 的性能
我一次附加大量表行元素并遇到一些主要瓶颈。目前我正在使用 jQuery，但如果它能完成工作，我愿意接受基于 javascript 的解决方案。
我需要在给定时间附加 0-100 个表行（实际上可能更多，但我将对超过 100 行的任何内容进行分页）。
现在我正在将每个表行单独附加到dom...
loop {
..build html str...
$("#myTable").append(row);
}
然后我立即将它们全部淡入
$("#myTable tr").fadeIn();
这里有几件事需要考虑...
1）我将数据绑定到每个单独的表行，这就是为什么我从批量追加切换到首先追加单独的行。
2）我真的很喜欢淡入淡出效果。虽然对于应用程序来说不是必需的，但我非常注重美学和动画（当然，这不会分散应用程序的使用注意力）。必须有一种好方法将适度的淡入淡出效果应用于大量数据。
（编辑） 3）我以较小的块/递归方式处理这个问题的一个主要原因是我需要将特定数据绑定到每一行。我的数据绑定错误吗？有没有比将数据绑定到各自的 tr 更好的方法来跟踪这些数据？
在递归函数中应用影响/dom操作是大块还是小块更好？
在某些情况下，最好选择其中之一吗？如果是，选择合适方法的指标是什么？
I am appending large amounts of table row elements at a time and experiencing some major bottlenecks. At the moment I am using jQuery, but i'm open to a javascript based solution if it gets the job done.
I have the need to append anywhere from 0-100 table rows at a given time (it's actually potentially more, but I'll be paginating anything over 100).
Right now I am appending each table row individually to the dom...
loop {
..build html str...
$("#myTable").append(row);
}
Then I fade them all in at once
$("#myTable tr").fadeIn();
There are a couple things to consider here...
1) I am binding data to each individual table row, which is why i switched from a mass append to appending individual rows in the first place.
2) I really like the fade effect. Although not essential to the application I am very big on aesthetics and animations (that of course don't distract from the use of the application). There simply has to be a good way to apply a modest fade effect to larger amounts of data.
(edit)
3) A major reason for me approaching this in the smaller chunk/recursive way is I need to bind specific data to each row. Am I binding my data wrong? Is there a better way to keep track of this data than binding it to their respective tr?
Is it better to apply affects/dom manipulations in large chunks or smaller chunks in recursive functions?
Are there situations where the it's better to do one or the other? If so, what are the indicators for choosing the appropriate method?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
看看这篇 John Resig 的帖子，它解释了在处理大型文件时使用 DocumentFragments 的好处添加到 DOM。
DocumentFragment 是一个容器，您可以向其中添加节点，而无需以任何方式实际更改 DOM。准备好后，您可以将整个片段添加到 DOM 中，然后通过一次操作将其内容放入 DOM 中。
另外，确实不建议在每次迭代中执行
$("#myTable")- 在循环之前执行一次。Take a look at this post by John Resig, it explains the benefit of using DocumentFragments when doing large additions to the DOM.
A DocumentFragment is a container that you can add nodes to without actually altering the DOM in any way. When you are ready you add the entire fragment to the DOM and this places it's content into the DOM in a single operation.
Also, doing
$("#myTable")on each iteration is really not recommended - do it once before the loop.我怀疑你的性能问题是因为你在循环中多次修改 DOM。
相反，在获取所有行后尝试修改它一次。浏览器非常擅长innerHTML 替换。尝试类似
注释的操作，您可能需要使用精确的选择器才能将 dom 放置在正确的位置。但主要思想是使用innerHTML，并且尽可能少地使用它。
i suspect your performance problems are because you are modifying the DOM multiple times, in your loop.
Instead, try modifying it once after you get all your rows. Browsers are really good at innerHTML replaces. Try something like
note you might have to play with the exact selector to use, to get the dom in the correct place. But the main idea is use innerHTML, and use it as few times as possible.