Andrew Cavanagh

Developer.  Project Architect.  Huge Nerd.

(not necessarily in that order)

We recently had an issue where the front end of an app we were developing would become temporarily sluggish or unresponsive when an Angular model was updated, or anytime a digest cycle was triggered. The page in question had a long list of items inside an ng-repeat, all of which were bound to a model. I hadn’t really thought about it before, but each of those bindings creates an implicit watch. Each item in the list had several bits that were supplied by the model - an image, a url, some other stuff. Basically a whole bunch of things wrapped in {{}} inside the <li> that was being repeated in the ng-repeat directive. We did the math, and on the really long lists we ended up with tens of thousands of watches. Fortunately, for items that don’t need to be updated often Angular 1.3 has introduced one time data bindings. One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value. This is great when you’re building a page that has a load of items that don’t need to change after the page or widget is rendered.

Here’s another article that goes into more depth about the perils of angularjs watchers proliferating in your code: https://www.airpair.com/angularjs/tips-n-tricks/speed-up-your-angular-apps-and-rid-sasqwatches


comments powered by Disqus