Angular JS HTML中相同表达式的数量会影响性能吗?

时间:2015-09-30 19:21:09

标签: javascript html angularjs dom angularjs-scope

考虑一个Angular HTML Partial:

<div>
  <p>
    <span ng-if="abc.def !== 'someValue'"></span>
    <span ng-if="abc.def === 'someValue'"></span>
  </p>

  <ul ng-if="abc.def !== 'someValue'">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <div ng-if="abc.def !== 'someValue'" 
    ng-class="{'alternative-list': abc.def !=='someValue'}">
    <div></div>
    <div></div>
  </div>

  <div ng-class="{'class-a': abc.def !== 'someValue', 'class-b': abc.def === 'someValue'}"></div>

</div>
  • 是否有更多的角度表达式执行相同的检查,对性能有不良影响?
  • 或者Angular 预先计算并且只对所有ng-ifs进行一次性解析?

在文档中找不到。

2 个答案:

答案 0 :(得分:1)

答案是否定的。

您可以在此处找到ng代码:https://github.com/angular/angular.js/blob/master/src/ng/directive/ngIf.js

如您所见,它为$scope.$watch()标记中存储的表达式添加了ng-if$watch方法引用$parse方法,该方法将表达式存储在字典expression => parsedExpression中,如下所示: https://github.com/angular/angular.js/blob/master/src/ng/parse.js

这与缓存有关。您还可以在此处查看示例: http://jsfiddle.net/zxfje53h/1/

答案 1 :(得分:0)

每次你使用一个指令和角度遇到它使用angular html编译器它将运行指令编译函数从那里获取链接函数并将调用带有作用域的链接函数。在指令之间没有真正共享解析的信息,因为我知道在缓存解析/处理的值的框架中不存在这样的优化,因为在解析之后它需要通过解析I&#39将特定范围应用于返回的函数。 ;我不确定使用表达式/解析函数的缓存会有多大帮助。