Performance related to datepicker (using $position.offset) #1296
Description
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