ng-repeat 包括：最佳性能方式？答案

【问题标题】：ng-repeat with includes: best performant way?ng-repeat 包括：最佳性能方式？
【发布时间】：2015-05-11 15:19:06
【问题描述】：

我遇到了 Angular (Ionic) 的性能问题，我想知道解决这个问题的最佳方法。

我从必须在我的应用程序中显示的服务中获取对象列表：

  $scope.objectList = [
    {
       id: 123456,
       name: "abcdefg",
       state: [1|2|3|4|5|6|7|8...],
       ....
    },
    ....
  ];

列表中的对象永远不会超过 20-25 个。

问题是列表中的元素，虽然它们属于同一类型，但它们必须以完全不同的方式显示。对于对象可能处于的每种可能状态，我都有一个不同的模板。

我正在使用 ng-repeat 这种方式来显示列表。列表不会改变，所以我可以使用单向绑定。

<div ng-repeat="obj in ::objectList track by obj.id">
   ....    
</div>

在这个 ng-repeat 中，我必须包含每个对象的演示模板，该模板会根据对象状态而变化。

我尝试了不同的解决方案，但没有找到能够显着提高渲染性能的解决方案。

例如，我已经尝试过了，但我不确定将函数绑定到 ng-include 是否非常高效。

HTML：

<div ng-repeat="obj in ::objects track by obj.id">
    <div ng-include="getTemplateToInclude(obj)"></div>
</div>

JS：

$scope.getTemplateToInclude = function(obj){
    if(obj.state === 1){
        return "tmpls/template-a.html";
    }else if(obj.state === 2){
        return "tmpls/template-b.html";
    }
    ....
};

关于如何处理这个问题的任何建议？将这些不同的模板包含在同一个列表中的最佳方式是什么？

我必须在包含的模板中使用单向绑定表示法(::) 还是使用 ng-repeat 中使用的一种就足够了？

提前致谢

【问题讨论】：

您如何实际测试性能？每个项目的这些 item 渲染器 有多大？我们是在谈论几个嵌套的 div 吗？绑定方式很少，或者它们是相当复杂的 DOM 结构 w。嵌套指令和表单之类的？
嵌套的 div 是每个对象的详细视图，其中包含一个图像和一些（5 到 8 个）字段（标题、描述、日期...）以及几个按钮。 DOM 并不像我想的那么简单，标题绝对定位在带有背景渐变的图像上。

标签： javascript angularjs ionic ng-repeat angularjs-ng-include

【解决方案1】：

我没有使用单向绑定模板语法 (::)，所以我不会谈论它。但是根据您的 cmets 和原始问题，我认为最好的方法是：

创建一个item renderer模板来处理你的repeater item
继续在转发器中使用track by 语法以便回收项目渲染器

根据项目的类型，使用ng-show 和ng-hide 的组合来显示嵌套在模板中的正确子项。

<!-- item renderer template.html -->
<div>
   <div ng-show="item.type == 'foo'"></div> 
   <div ng-show="item.type == 'bar'"></div> 
   <div ng-show="item.type == 'baz'"></div>
</div>

在转发器中创建与track by 结合的单个模板将重用 DOM 元素，无需将它们从 DOM 中拉出然后插入新元素。

使用ng-show 或ng-hide 与ng-if 是基于与上述相同的想法。您正在切换 DOM 元素的可见性，而不是销毁/创建它们。

我提出这个观点的原因是，在几乎所有与性能相关的调整中，重用或回收对象通常比销毁然后重新创建新对象要快。这对于 Javascript 来说当然是正确的，虽然我还没有在 DOM 操作中测试过这个理论，但我敢打赌它也是正确的。我做出了有根据的猜测，但由于您使用的是 Ionic 框架，这也应该有利于移动性能，

请记住，鉴于您可以显示的内容和数据行数的各种排列方式，您可能只会看到微不足道的性能提升。根据模板中的绑定数量，您可能会达到这样的程度：Angular 的摘要循环完成所带来的性能损失与回收 DOM 元素所带来的性能提升相同。

【讨论】：