0

My application is consuming a lot of data per second. We use $watch Method a lot in our screens. But especially in one of them, we use it around 20 different times. I have read that $scope.$watch is impacting performance, so my questions are the following:

1. If that is true. The fact that $watch has a performance penalty?

2. With what may I substitute it with?

Here is a small sample of the code we use. Note that this code is 3 years + old.

CTRL.JS File:

  $scope.$watch("pageDataItemsPerPage.num", () => {
    ctrl.setMaxPageData($scope.pageDataItemsPerPage.num);
  });

or another one:

  $scope.$watch(() => this.Keywords, (keywords) => {
    $scope.hintOptions = Object.assign({}, $scope.hintOptions, { keywords });
  });

  $scope.$watch(() => this.tables, (tables) => {
    $scope.hintOptions = Object.assign({}, $scope.hintOptions, { tables });
  });

I understand, that the process for each one would be different but I don't know AngularJS really well, and I want some guidance. Also as a ref, just in this file, we use $scope.$watch over 30 times.

If you could transform those 3 using ES6+ methods instead of angular ones would be great.

Regarding Performance:

It appears a lot of the performance issues are happening due to the $scope.$watch function, to my untrained eye at least don't seem the problem. The main thing is according to my investigation, RxJS and dispatching events on the fly. Not sure what can be done here though.

Cœur
  • 37,241
  • 25
  • 195
  • 267
  • Have you tried profiling that to see *if* it's causing a significant slowdown? – VLAZ Oct 29 '18 at 15:25
  • I am not sure, what you mean by that. Could you elaborate? I am running one now. Will update the question based on my findings. –  Oct 29 '18 at 15:26
  • Have you confirmed that this part of the code is a problem? Many things *could* be a potential performance penalty but they aren't always. That's why it's important to measure how the application performs. It's possible that you get a slowdown from another place on the code, for example. – VLAZ Oct 29 '18 at 15:29
  • I have updated my question. Not sure I understood everything correctly not sure how can I share it with you `the profiling` I mean. –  Oct 29 '18 at 15:41
  • 1
    passing a function into a watcher is a terrible idea. E.g. `$scope.$watch(function(scope) { ... })` will be invoked on every digest cycle for every model's modification – Aleksey Solovey Oct 29 '18 at 15:44
  • 1
    If you are trying to watch arrays, try using `$scope.$watchCollection('array', (...)=>{...})` instead – Aleksey Solovey Oct 29 '18 at 15:48
  • You should se first how many watched are registered on that page, normally if it is less than 1000 page is fine if its greater than 1000 than page started to get hanged sometimes. You should see the watches details which code is consuming for watches. – Ghazanfar Khan Oct 29 '18 at 17:46
  • Please explain the sentence "It appears a lot of the performance issues are happening due to the $scope.$watch function, to my untrained eye at least don't seem the problem." Are you saying $watches are a problem or are you saying $watches are not a problem? – georgeawg Oct 29 '18 at 19:07
  • See [AngularJS Developer Guide - Scope `$watch` Performance Considerations](https://docs.angularjs.org/guide/scope#scope-watch-performance-considerations). – georgeawg Oct 29 '18 at 19:10
  • For tips on how to write code without watchers, see [AngularJS 1.5+ Components do not support Watchers, what is the work around?](https://stackoverflow.com/questions/35534479/angularjs-1-5-components-do-not-support-watchers-what-is-the-work-around/35535336#35535336). – georgeawg Oct 29 '18 at 19:13
  • What I am saying is. That while watches do impact performance, RxJS in this particular occassion is a bigger factor. @georgeawg. –  Oct 29 '18 at 23:15

0 Answers0