Angular.js缓存$编译模板/渲染NG重复内部指令的性能 [英] Angular.js caching $compiled templates / rendering performance of directives inside ng-repeat

问题描述

我有AA指令，这使得表格单元格（怎么看我在这里编译的方式，基本上都采用 $编译在链接FN <一个href=\"http://stackoverflow.com/questions/22617574/angular-js-directive-template-using-variable-from-parent-inherited-scope\">Angular.js采用可变从父/指令模板继承范围），现在这里面两个 NG-重复 S，一个行，一个列使用，所以它基本上是

I have a a directive which renders table cell(see how the way I'm compiling it here, basically using $compile inside link fn Angular.js directive template using variable from parent/inherited scope), now this is used inside two ng-repeats, one for rows, one for columns, so it's basically

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

50行8列其获得了pretty大（以及pretty明显反正）上（渲染）的性能影响。

with 50 rows and 8 columns its got a pretty big(well pretty noticeable anyway) impact on (rendering) performance.

所以我一直在寻找改进它的一种方式。首先，我试图摆脱对列内心的重复，创造了我-COLS-指令这比列内部迭代，找到自己的模板，创建一个字符串（与8列里），然后编译它。既降低量从400到50编译但它并没有真正有上呈现明显改善（当然也如此，但只有约15％）。

So I was looking for a way to improve it. Firstly I tried to get rid of that inner repeat for columns, creating a my-cols-directive which internally iterates over columns, find their template, create one string(with those 8 columns inside) and then compiles it. Which lowered amount of compiling from 400 to 50. But it didn't really have noticeable improvement on rendering(well it did, but only about 15%).

现在我的另一个想法是将其降低到只有一个编译不知何故，基本上编译它NG重复的第一次迭代，然后保存（缓存）编译的结果，因此该指令将然后使用此，而不是通过编译它，一遍又一遍，只是那些从当前迭代更换绑定的值。

Now my other idea was to reduce it to only one compile somehow, basically compiling it in the first iteration of ng-repeat, then saving(caching) the compiled result so the directive would then use this instead of compiling it over and over again, just replacing binding values with ones from the current iteration.

是否有可能以某种方式？或者是有来提高渲染速度的其他方式？

Would it be possible somehow? Or is there any other way to improve rendering speed?

推荐答案

您应该避免使用 $编译里面如果可能的话链接功能。您可以缓存的parital结果 $编译虽然。

You should avoid using $compile inside linking function if possible. You can cache parital result of the $compile though.

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

Use the second argument of the compiled object cloneAttachFn

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

例如

这篇关于Angular.js缓存$编译模板/渲染NG重复内部指令的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！