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

Question

我有一个呈现表格单元格的指令(看看我在这里编译它的方式，基本上是在 link fn Angular.js directive template using variable from parent/inherited scope 中使用 $compile )，现在这在两个 ng-repeat 中使用，一个用于行，一个用于列，所以它基本上是

<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 的第一次迭代中编译它，然后保存(缓存)编译结果以便指令然后使用它而不是编译它并再次，只需将绑定(bind)值替换为当前迭代中的值。

有可能吗？或者有什么其他方法可以提高渲染速度吗？

Answer 1

如果可能，您应该避免在链接函数中使用$compile。不过，您可以缓存 $compile 的部分结果。

使用编译对象的第二个参数 cloneAttachFn

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

example