Performance related to datepicker (using $position.offset)

[sbeaujard]

Hello,
I'am using the datepicker inside a div displayed when the user requests it.
This div contains a form with severals fields and the specific input :
input type="text" class="dayDate" datepicker-popup="EEEE dd MMMM yyyy" ng-model="currentBooking.date" open="opened" ng-required="true" />

I wanted to optimize my app and I used the "timeline" of chrome in order to find some slowdowns.
I discovered a "forced synchronous layout" when the datepicker is displayed.
See : https://developers.google.com/chrome-developer-tools/docs/timeline?hl=fr#locating_forced_synchronous_layouts
It's related to the function updatePosition() of datepicker.js.
More details at the end of the message.

Indeed, if i comment the content of updatePosition() the time to display my div (which contains others fields than datepicker) is reduced by 150%. (1.5 seconds to 0.6 seconds).

Is it possible to optimize performances in this case ?
Maybe the position could be relative to a parent div ?
Thanks for your help,

---

Duration 9.918 ms (at 2.35 s)
Nodes that need layout 837
Layout tree size 837
Layout scope Whole document
Note Forced synchronous layout is a possible performance bottleneck.
Layout root #document
Layout invalidated
offset @ position.js:77
position @ position.js:55
updatePosition @ datepicker.js:417
updateCalendar @ datepicker.js:393
link.ngModel.$render @ datepicker.js:388
ngModelWatch @ angular.js:15434
ng.config.$provide.decorator.$delegate.proto.$watch.watchExpression @ (program):754
$get.Scope.$digest @ angular.js:10562
ng.config.$provide.decorator.$delegate.proto.$digest @ (program):844
$get.Scope.$apply @ angular.js:10802
ng.config.$provide.decorator.$delegate.proto.$apply @ (program):855
(anonymous function) @ angular.js:16514
x.event.dispatch @ jquery-1.10.2.min.js:5
x.event.add.v.handle @ jquery-1.10.2.min.js:5
Layout forced
offset @ position.js:77
position @ position.js:55
updatePosition @ datepicker.js:417
updateCalendar @ datepicker.js:393
link.ngModel.$render @ datepicker.js:388
ngModelWatch @ angular.js:15434
ng.config.$provide.decorator.$delegate.proto.$watch.watchExpression @ (program):754
$get.Scope.$digest @ angular.js:10562
ng.config.$provide.decorator.$delegate.proto.$digest @ (program):844
$get.Scope.$apply @ angular.js:10802
ng.config.$provide.decorator.$delegate.proto.$apply @ (program):855
(anonymous function) @ angular.js:16514
x.event.dispatch @ jquery-1.10.2.min.js:5
x.event.add.v.handle @ jquery-1.10.2.min.js:5

[pkozlowski-opensource]

@sbeaujard oh, this is bad... @bekos why do we need to update positioning in each $digest cycle?

[bekos]

@pkozlowski-opensource As far as I can tell, the position is updated when input changes, an outer change to model happens or when the isOpen state changes to true. I will try to see if any of the above events is not actually needed.

[bekos]

@sbeaujard A fix has landed to master that removes the excess position updates. I am not sure if this solves your problem, but providing a relative to input position, is unfortunately something tat we cannot support atm.