Angular.js缓存$ compiled模板/ ng-repeat中指令的渲染性能
我有一个用于渲染表单元格的指令(请参阅我在这里如何编译它的方法,基本上是$compile
在link fn
[Angular.js指令模板中使用父/继承作用域中的变量,现在在两个ng-repeat
s中使用,一个用于行,一个对于列,所以基本上
<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的第一次迭代中对其进行编译,然后保存(缓存)已编译的结果,因此该指令将使用该结果而不是一次又一次地对其进行编译,只是将绑定值替换为当前迭代中的绑定值。
有可能吗?还是有其他方法可以提高渲染速度?
-
$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); }; } })