Isolate Scope vs Inherited Scope Performance

331 views
Skip to first unread message

Stacey Lynn

unread,
Sep 10, 2014, 5:35:07 PM9/10/14
to ang...@googlegroups.com
I am new to Angular, and am trying to do some evaluation for how I should proceed with a few issues. The big one I am needing to discern is performance. This is made worse by the fact that I have zero real world knowledge of how to measure performance, or how to write performance benchmarks.

But to boil it down, I have a situation where I am presently using an isolate scope on a directive. I thought at first that an isolate scope was very desired because it was a slimmer object, and therefore faster performance. However, when I tried it in practice, I saw that the scope generated this way is just as large as the normal controller scope.

So my question is basically ... is there any performance reason to use an isolate scope? It actually looks as it though it should make things slower. Example code below;


angular.module('app', [])
.controller('HomeController', ['$scope','$parse', function($scope, $parse){
   $scope.Model = {}; $scope.Mode = { Editing: false };
   console.log('controller scope: ', $scope);
}]).directive('editModeOptions', [ '$parse', function($parse) {
   return {
      restrict: 'A',
      scope: {
         kEditMode: '=',
         kOptions: '='
      },
      link: function(scope, element, attributes) {
         var values = scope.$eval(scope.GridColumns),
             options = scope.kOptions,
             mode = scope.kEditMode;

         // do stuff with the various parameters
         console.log('isolate scope: ', scope);
      }
   }
}]);

And then attach them very simply.

<div ng-app="app" ng-controller="HomeController">
<div k-edit-mode="Mode.Editing" k-options="options.grid" grid-columns="['Id','Name','Abbreviation','Group']"></div>
<h1>{{ Mode.Editing }}</h1>
</div>

And this outputs two rather sizable scope objects.

Sander Elias

unread,
Sep 10, 2014, 11:25:42 PM9/10/14
to ang...@googlegroups.com
Hi Stacey,

Isolated scopes are about separating concerns, not about performance.
That being said. the 'hit' you get on performance is barely measurable.  I can't say there isn't
one, but it's not worth worrying about. This is the don't optimize prematurely all over again.

Regards
Sander

Tony pee

unread,
Sep 11, 2014, 11:50:03 AM9/11/14
to ang...@googlegroups.com
I wouldnt think that creating scopes would really affect performance. Watches are the thing that will eventually slow you down (when you have many thousands). You should look at bindOnce (native in 1.3.10+ via :: prefix) if you find that an issues. In general, performance is quite snappy in most cases. Large lists are the downfall (create lots of watches) and so you should look to bindOnce of use a virtual scrolling library - which ony renders visible items. Otherwise i'd say, design your directives with functionality in mind. 


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.



--
Tony Polinelli

Stacey Lynn

unread,
Sep 11, 2014, 6:43:58 PM9/11/14
to ang...@googlegroups.com
Hey guys, thank you very much for the feedback. This is essentially what I wanted to know. Simply whether I was missing a piece of the puzzle. It helps a lot.

Yes, I do understand the principle behind "don't optimize prematurely", I get that, I do. But I do feel there is a difference in "optimizing prematurely" and "admitting you have limited knowledge".

I am a bad java script programmer. It is my second weakest language. I am very weak in that area, and I have built sites in the past that had huge performance bottlenecks because I didn't investigate certain things upfront when building it, and it was very difficult to go back and fix them. I wanted to try and avoid that, this time.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/A6xRMfQYwfA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages