search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Angular2 Scheduler performance issue after upgrade

Asked by VScode
3 years ago.

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
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": "",
"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)

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

Let me check that.

Comment posted by Dan Letecky [DayPilot]
3 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:

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]
3 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 --save
Comment posted by MT
3 years ago.

Works perfect now, thx!

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