今天，我不得不解决由以下代码引起的性能问题：注意模板内调用的updateStats
<script type="text/ng-template" id="entityGrouper">
<section>
<div>
<ul ng-click="hideEntityBox = !hideEntityBox">
<li>
{{ entityNode.name }}
</li>
<li ng-repeat="breadcrumbItem in entityNode.breadcrumb">
{{ breadcrumbItem }}
</li>
</ul>
{{ updateStats(entityNode) }}
<span ng-include="'/mypath/views/resume.html'"></span>
</div>
<div>
<div ng-repeat="entityNode in entityNode.group" ng-include="'entityGrouper'"></div>
<div ng-repeat="entity in entityNode.group" ng-include="'entityBox'"></div>
</section>
</script>
模板使用：
<div ng-repeat="entityNode in entityNode.group" ng-include="'entityGrouper'"></div>
调试此代码后，我发现此函数的调用时间比数组大小要多得多（我的数组有4个对象，并且该函数被调用了100倍以上），甚至鼠标悬停也称为该函数。我只是通过在模板中放置ng-init来解决此问题，现在它可以正常工作，但是我不知道为什么这个函数被调用了很多次。关于双向数据绑定有什么东西吗？
发生这种情况的原因不是因为双向数据绑定（适用于表单输入），而是因为角度变化检测。Angular会定期检查绑定到模板的任何值是否已更改，如果已更改，则在视图中更新其值。通常，它由用户生成的事件触发。为了检查是否updateStats(entityNode)更改了值，Angular对其进行了评估，这会导致性能下降。
要解决此问题，updateStats(entityNode) 如果结果设置一次并且将来永远不会更改，则可以使用前面提到的一次性绑定。我想这是您的情况，您已经将评估移至ng-init。对于随时间更新的值，最好在entityNodelike中创建一个单独的属性entityNode.stats，将其显示在模板中，并updateStats(entityNode)仅在必要时在控制器或服务中运行。这样一来，您将避免updateStats(entityNode)在每个摘要周期上运行（您已经知道这样做的频率），从而提高了应用程序的性能。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句