CODEWITHSUNDEEP
javascripthtmlangularjsdomangularjs-scope
KingJulian
KingJulian

Reputation: 973

Does number of same expressions in Angular JS HTML affect performance?

Consider an 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>

Could not find this in the documentation.

Upvotes: 2

Views: 86

Answers (2)

Kamil Sokołowski
Kamil Sokołowski

Reputation: 333

The answer is no.

You can find code for ng-if here: https://github.com/angular/angular.js/blob/master/src/ng/directive/ngIf.js

As you can see, it adds $scope.$watch() for expression stored in ng-if tag. The $watch method refers to $parse method which stores expression in dictionary expression => parsedExpression, as you can see here: https://github.com/angular/angular.js/blob/master/src/ng/parse.js

Thats all it does related to caching. You can also see example here: http://jsfiddle.net/zxfje53h/1/

Upvotes: 1

shaunhusain
shaunhusain

Reputation: 19748

Every time you use a directive and angular encounters it using the angular html compiler it will run the directives compile function get back the link function from that and will call the link function with a scope. There is no real sharing of the information parsed between the directives as far as I know no such optimization exists in the framework for caching the parsed/processed values since after parsing it needs to apply the particular scope to the returned function from parsing I'm not sure how much benefit having a cache of the expressions/parse functions would help.

Upvotes: 0

Related Questions