Angular.js缓存$ compiled模板/ ng-repeat中指令的渲染性能

一尘不染

Angular.js缓存$ compiled模板/ ng-repeat中指令的渲染性能

angularjs

我有一个用于渲染表单元格的指令（请参阅我在这里如何编译它的方法，基本上是$compile在link fn[Angular.js指令模板中使用父/继承作用域中的变量，现在在两个ng-repeats中使用，一个用于行，一个对于列，所以基本上

<ng-repeat row in rows>
  <ng-repeat column in columns>
    <my-cell-directive />
  </ng-repeat>      
</ng-repeat>

包含50行和8列的列，对（渲染）性能产生了很大的影响（无论如何还是很明显的）。

所以我一直在寻找一种改善它的方法。首先，我尝试摆脱对列的内部重复，创建一个my-cols- directive在内部对列进行迭代的方法，找到它们的模板，创建一个字符串（其中包含这8列），然后对其进行编译。从而将编译量从400降低到50。但是，渲染的效果确实没有明显改善（效果不错，但只有15％）。

现在，我的另一个想法是以某种方式将其减少为仅一个编译，基本上是在ng-
repeat的第一次迭代中对其进行编译，然后保存（缓存）已编译的结果，因此该指令将使用该结果而不是一次又一次地对其进行编译，只是将绑定值替换为当前迭代中的绑定值。

有可能吗？还是有其他方法可以提高渲染速度？

阅读 204

2020-07-04

共1个答案

一尘不染

$compile如果可能，应避免使用内部链接功能。您可以缓存“通过”的部分结果$compile。

使用compiled对象
cloneAttachFn
的第二个参数

directive('lol', function($compile){
  var compiled = $compile(template);
  return function(scope, element, attr){
    compiled(scope, function(clonedElement, scope){
      element.append(clonedElement);  
    };
  }
})

例

2020-07-04