ngRepeat 的速度问题。是否可以在 AngularJS 中重用 DOM 部分？答案

【问题标题】：Speed issues with ngRepeat. Is it possible to reuse a DOM-part in AngularJS?ngRepeat 的速度问题。是否可以在 AngularJS 中重用 DOM 部分？
【发布时间】：2014-04-13 04:42:35
【问题描述】：

我正在显示一个包含大量数据的列表，并且它变得非常慢非常快（> 5 个条目 = 太慢）。我稍微修改了一下，发现问题不是数据量，而是生成的许多 DOM 元素。

我展示了一个只有一些元信息的表格。对于每个表格行，还有两个隐藏表格行，其中包括所有详细数据和一个编辑表单。单击一行会打开详细信息，单击某个编辑按钮会切换到编辑行。
没有编辑部分的简化 plunkr 可用here。

问题在于，每个条目都会生成三行，其中包含大量标签和数据。分页不是解决方案，因为问题已经以显着的方式表现出来，只有 4 或 5 个条目。我可以动态加载详细数据，但我发现瓶颈是 ng-repeat 必须创建的许多标签。（我在这里弄错了吗？）
当我删除详细信息和编辑部分时，即使有 10 多个条目，页面加载速度也相当快。

一种解决方案可能是编写一次详细信息和编辑部分并将其隐藏，然后将其动态移动到相应的条目。我知道直接 DOM 操作在 Angular 中是不受欢迎的。有更好的解决方案吗？ A plunkr that illustrates the idea

【问题讨论】：

您可以尝试的第一件事是使用ng-if 而不是ng-show，在您的情况下，它会将元素数量减少到一半......您可以做的第二件事是加快应用程序的速度，确保$scope 上没有不相关的数据，您附加到范围的每一条数据都会降低性能
哇哦，如果似乎可以解决问题。所以 ng-if 仅在其为 true 时创建元素，而 ng-show 创建它们但隐藏它们？
是的，完全正确。 ng-if 仅当表达式为真时才将元素添加到 DOM，在 ng-show 的情况下它始终存在，并且指令只是切换 display:none 样式

标签： javascript angularjs dom

【解决方案1】：

我查看了 angular.element 并用解决方案更新了第二个 plunkr。我仍然不确定是否没有更优雅的解决方案。我会实施它，看看它是否解决了性能问题。

DOM 部分的移动：

<td id="detailPiece">
  Reuse this piece of DOM? Can it be done?<br />
  Tons of detail information, with edit capability etc.<br />
  {{detailItem.detail}}
</td>

由

实现

angular.element('#detail'+index).append( angular.element('#detailPiece') );

对于我来说，空表行和所有内容仍然看起来像一个“hacky”解决方案。

【讨论】：