Search code examples
javascriptangularjsperformancebatarang

Angular JS : why {{objA.objB.date | date:'dd.MM.yyyy HH:mm'}} takes much time?

In AngularJS tab of Chrome dev tools (I'm using AngularJS Batarang (Stable)). I have the following lines, describing which watch expressions took the highest time to evaluate (if an expression called several times, the evaluation time is added)

{{objA.objB.date | date:'dd.MM.yyyy HH:mm'}} | 20.1% | 1009ms
{{objA.objB.date | date:'dd.MM.yyyy, HH:mm'}} | 22.8% | 1148ms

The question is why such an evaluation takes so much time?

Solution

  • I think it's "normal" for Angular because Angular runs every single filter (including the date filter) twice per $digest cycle once something has changed. This takes it's toll on the performance. The first run is from the $$watchers detecting any changes, the second run is to see if there are further changes that need updated values.

    If you can change your DOM filter:

    {{objA.objB.date | date:'dd.MM.yyyy HH:mm'}}

    to use a $filter provider, which you can use to run filters in your controller before parsing them into the DOM you preprocess your data before sending it to the view, which avoids the step of parsing the DOM and understanding the inline filter syntax:

    $scope.theDate = $filter('date')(objA.objB.date, 'dd.MM.yyyy HH:mm');