Karl Seamon - Angular Performance - NG-Conf
Why Stack Overflow recommends it
Stack Overflow users link it when answering AngularJS questions about slow digest cycles, too many watches, and how to run code after a digest finishes.
Recommended by 3 people across 3 different months, 2014 to 2015.
What it is
A 24-minute talk from the 2014 ng-conf in Salt Lake City, given by Karl Seamon, on how to make AngularJS applications faster. It covers the digest cycle, the cost of large numbers of watchers, bind-once style tricks, and ngIf versus ngShow.
What people said
Recommends Ilan Frumer · 2014-01 · Stack Overflow · on “Angular JS identify an digest complete event and removing # from url in angular js during viewchange”
Update Karl seamon gave a talk in ng-conf 2014 [LINK] . In this video [this video] ( 22:20 minute ) he talked about a future possiblity of a built-in $postDigestWatch . Here is an open issue in: [LINK] So, It will probably get to the core in future releases, until then you can use the trick below. An example on plunker [LINK] . A digest cycle may have multiple $digest . I $watch for the first $digest to register a $timeout which would run after the digest cycle ends. I must unregister the $watch immediately to avoid multiple $timeout callbacks for one digest cycle. In the $timeout callback I invoke the user callback and register a $watch for the next $digest . Use $watch in conjunction with $time
Recommends ivarni · 2014-06 · Stack Overflow · on “Performance comparison of AngularJS "watch"-es vs "emit/on"s with 3rd party Libraries (like OpenLayers)”
Also, maybe take a look at this talk from NGConf about Angular performance: [this video] Sorry for just dumping links on you but I really feel that it's hard to say anything specific without knowing a lot more about the actual app.
Recommends Jdahern · 2015-02 · Stack Overflow · on “Directives with static value”
A solution may be to bind once on the parent directive. 2014 NG-Conf as a youtube video [this video] on this and how to not take such a performance hit. I hope this helps.
Cites user1709803 · 2014-02 · Stack Overflow · on “One way binding + dynamic binding in AngularJS”
I will start by explaining what we are trying to achieve. We have just jumped on the Angular bandwagon and are building a prototype with it to see what it is capable of. Currently there is a load of data (grades in this case) on the server and we display that data using Angular. The following is the code we use: <ul class="phones"> <li class="list-group-item" onclick="toggleExpandedView(this, true, 500)" ng-repeat="grade in grades | filter:query | orderBy:orderProp"> <span ng-show="grade.comment"><img src="../Content/images/comment.gif"/></span> <a class="btn btn-primary editButton" style="float: right; position: absolute; right:10px;" ng-href="#/grades/{{grade.gradeId}}">Edit</a> <div class
Cites poshest · 2014-03 · Stack Overflow · on “Angular performance limit on data bound objects: Do I abandon AngularJS now?”
to self-answer (b) and (c), it looks like `ngIf` (and `ngSwitch` too) do exactly what I was hoping. See [this video]
Cites Jay Shukla · 2014-04 · Stack Overflow · on “Angularjs for large web application”
Its depend on your requirement. As Angular is the best for CRUD application, if your application doesn't have too much complexity then you can surely go with Angular . If you required too much DOM manipulation which usually requires for gaming app then Angular can be painful. Is Angular slow? Well, In some cases, you may feel that angular is very slow. Specially when you iterate over the complex JSON then there may be too much data binding so angular gets slow after 2500+ watches. There are lots of directive to overcome this problem. Also day by day Angular itself updating their library to solve these kind of problems. Some of the directives which is helpful to improve performance of Angular
Cites aet · 2014-05 · Stack Overflow · on “How do I watch every object in a collection?”
I am pretty sure it was in this video: [this video] but somewhere I saw Angular devs talking about mapping the data you are watching to a smaller subset, something like this maybe: $scope.$watchCollection(function() { return yourList.map(function(listItem) { return { 'x': listItem.x, 'y': listItem.y }; }; }, function(newVal, oldVal) { // perform calculations }); That would leave you $watching just an array of objects having x and y properties.