AngularJS Performance Issue with $Digest

Question

Scenario:

On ng_click , I'm calling a function in its AngularController which is internally calling a function in its AnguarService and this is making a Webservice call and getting a Json object of size 2MB. This response is used to bind data on view using dir-paginate as below

dir-paginate="item in results | orderObjectBy: predicate : reverse | filter : myFilter  | itemsPerPage: pageSize   track by $index"

When the control is trying to exit the function in AngularController, below is the call stack and $digest is taking 14 seconds to finish its execution.

Call Stack:

(anonymous) (MyAppcontroller.js?v=v1.0.0.0:479)
(anonymous) (angular.min.js?v=v1.0.0.0:131)
$eval (angular.min.js?v=v1.0.0.0:145)
$digest (angular.min.js?v=v1.0.0.0:142)
$apply (angular.min.js?v=v1.0.0.0:146)
l (angular.min.js?v=v1.0.0.0:97)
J (angular.min.js?v=v1.0.0.0:102)
t.onload (angular.min.js?v=v1.0.0.0:103)

$digest in above stack is taking 14 seconds. I'm unable to fig out how to optimize it.

My code is pretty simple one.

For Example, function in MyController that i'm referring to above is:

$scope.getData = function(Id)
{
    MyService.getResponse(Id)
    .then(function(response) 
        {
            $scope.results = response;
        },
        function(message) 
        { 
            $scope.errorMessage = "Error Message";
        });
}

Answer 1

You need to show your code. This problem might be happened because your html binds, some js function called inside a for looping/ng-repeat, or some explicit invoke of the method scope.apply().

Anyway, I had problems like that and I followed this link to solve.

https://www.alexkras.com/11-tips-to-improve-angularjs-performance/

Answer 2

If you have a 2MB json text response, you probably are doing something wrong. But, supposing you are doing well...

Posible solutions:

• Split the json in multiple request if it's possible.
• Use a WebWorker to process the json while angular is rendering, in that way, you avoid blocking view rendering process.