Angular2 Scheduler performance issue after upgrade

Asked by VScode
7 years ago.

Hi
Been evaluating the angular2 scheduler and tried updating angular version from 2.2.0 to 2.4.3,
after that upgrade a simple window resize take very long time compared to before.

Running this simple testsetup config (tested with seed https://github.com/preboot/angular2-webpack)
config: any = {
businessBeginsHour: 0,
businessEndsHour: 24,
snapToGrid: false,
useEventBoxes: 'Never',
timeHeaders: [
{ groupBy: 'Day' }
],
eventHeight: 30,
scale: 'Hour',
days: 4,
cellWidthSpec: 'Auto', // <-- this will make the problem noticeable on window resize
startDate: new DayPilot.Date(),
resources: [
{ name: 'Resource 1', id: 'R1'},
{ name: 'Resource 2', id: 'R2'},
{ name: 'Resource 3', id: 'R3'},
{ name: 'Resource 4', id: 'R4'},
{ name: 'Resource 5', id: 'R5'},
{ name: 'Resource 6', id: 'R6'},
{ name: 'Resource 7', id: 'R7'},
{ name: 'Resource 8', id: 'R8'},
{ name: 'Resource 9', id: 'R9'}

],
};

events: any[] = [
{start: '2016-09-09', end: '2017-09-10', id: 1, text: 'Event 1', resource: 'R1'}
];

package.json that works and have snappy response on window resize:
"dependencies": {
"@angular/common": "2.2.0",
"@angular/compiler": "2.2.0",
"@angular/core": "2.2.0",
"@angular/forms": "2.2.0",
"@angular/http": "2.2.0",
"@angular/platform-browser": "2.2.0",
"@angular/platform-browser-dynamic": "2.2.0",
"@angular/router": "3.2.0",
"daypilot-pro-angular": "https://npm.daypilot.org/daypilot-pro-angular/trial/8.3.2548.tar.gz",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.1",
"zone.js": "0.6.26"
},

Upgrading angular* + zone.js makes resizing very slow (e.g run with seeds latest package.json)

bug javascript

Comment posted by Dan Letecky [DayPilot]
7 years ago.

Let me check that.

Comment posted by Dan Letecky [DayPilot]
7 years ago.

It looks like there is something wrong with zone.js error handling in the new version of Angular. Most of the total time it takes to redraw the Scheduler after a window resize (4600ms ) is spent in ZoneAwareError/get stack (3800ms), most likely trying to generate a stack trace. However, the error itself doesn't propagate and is swallowed (it looks like some minor issue).

It looks like the stack trace generating logic has changed in zone.js used since Angular 2.3:
http://angularjs.blogspot.com/2016/12/angular-230-now-available.html

The stack traces are now supposed to be shorter. However, when debugging the issue the DayPilot code has thrown an exception (trying to access window.console) - and the stack trace has more than 500 lines and takes 500ms+ to generate!

I'm investigating the issue further. As a quick workaround, I might be able to debounce the redrawing.

Answer posted by Dan Letecky [DayPilot]
7 years ago.

It looks like zone.js generates an internal error whenever an event handler is assigned to a DOM object. This error is handled internally - I'm not sure if it's part of the standard workflow, but it's possible. The way the error is handled now seems to be very inefficient (most of the time is spent in ZoneAwareError/stack).

This causes a slowdown of all rendering operations, including initial rendering and updates (not only the resize-related rendering).

This only happens during development. When you build a production package of the Angular project ("npm run build") the problem disappears.

The latest version of DayPilot Pro is now optimized and unnecessary event handlers are removed. This improves performance of the Scheduler during development. Some performance test results (Angular 2.4.2, zone.js 0.7.4):

Initial rendering time of the Scheduler (using your configuration from above):

DayPilot Pro build 2548

development: 8800ms
production: 260ms

DayPilot Pro build 2597

development: 580ms
production: 210ms

However, it doesn't fix the underlying Angular problem.

Let me know if the performance doesn't improve with the latest DayPilot Pro build:

npm install https://npm.daypilot.org/daypilot-pro-angular/trial/8.3.2597.tar.gz --save

Comment posted by MT
7 years ago.

Works perfect now, thx!

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

Angular2 Scheduler performance issue after upgrade

Products

Learn

Get Support

DayPilot Pro