Our pure JavaScript Scheduler component


Post by derreck »

Hi,

If we use a custom viewPreset, such as:

const getCustomViewPreset = () => {
  return {
    tickWidth: 65,
    shiftIncrement: 1,
    shiftUnit: 'day',
    timeResolution: {
      unit: 'day',
      increment: 1,
    },
    headers: [
      {
        unit: 'month',
        align: 'end',
      },
      {
        unit: 'day',
        dateFormat: 'DD',
      },
    ],

columnLinesFor: 0,
  };
}

instead of a default viewPreset like 'weekAndMonth', we are noticing a significant performance loss.

For example, in one of our test scenarios we found out getCustomViewPreset() takes 1.9s to load, while the 'weekAndMonth' viewPreset takes 1.3s.

Is there an optimization that can be done to improve performance?

Thanks,
Derreck


Post by mats »

We need more information - what's the date range viewed? Tried doing a performance benchmark?

Also always good to run $$('*') on the console to see how many DOM elements you have.


Post by derreck »

Hi Matt,

I've attached a zip file with two POC's to benchmark/illustrate the performance difference:

./dist-1590events-builtInWeekAndMonthPreset (1.3s on my Mac)
./dist-1590events-customDayPreset (1.9s on my Mac)

Ran them with http-server. Let me know if your seeing the same performance discrepancies?

Attachments
_20211122-initial-load-timing-more-data.zip
(4.66 MiB) Downloaded 66 times

Post by alex.l »

Cannot build/run your app, unfortunately.

npm ERR! code E401
npm ERR! Unable to authenticate, need: Bearer authorization_uri=https://login.windows.net/a8a719dc-348d-46ef-b888-fa1832eaac47, Basic realm="https://pkgsprodcus1.pkgs.visualstudio.com/", TFS-Federated

Can the performance lag been caused by events/timeRanges (DOM elements) amount that shown on the page with your custom preset? Maybe custom preset fits more events in a viewport?

Could you please try the same with our latest released version? We did a huge work for timeRanges performance.

Thanks!

All the best,
Alex


Post by derreck »

Hi Alex,

You need to install http-server and then in the zip files root CD into each of the 'dist' folders. Then enter/run 'http-server' in a terminal in each of the two 'dist' folders.

We're mainly using the custom presets to format the headers differently, I don't see it rendering a big difference?

The zip file is running the latest 4.3.3 version.


Post by Animal »

Do this in the debug console:

document.querySelectorAll('.b-grid-row').length

And post the results back here.


Post by alex.l »

I checked the code and profiled our application with the data and viewPresets you provided.

So, you created a timeAxis for 99 years period.
The thing is that when you used our weekAndMonth viewPreset, it generates ticks for every week for 99 years, which is 5219 ticks in total, when I use your start/end dates set. When you applied your custom viewPreset to display month and day, it generates ticks for every day for 99 years period, which is 36524 in total.

So that's why it's slower.

All the best,
Alex


Post Reply