1. Reducing the Number of DOM Elements
By default, the cells are rendered progressively. That means only the current viewport is rendered and additional cells are added to the page when you scroll to a new location. This means increasing load (as the page structure gets more complicated).
There are a few way to reduce the number of elements that the scheduler uses:
- Don't draw blank cells
- Sweep cells
- Sweep events
Blank Cells Rendering
By default, each grid cell is rendered using a special <div> element. You can choose not to draw cells that have no custom properties.
dp.drawBlankCells = false;
Note that using drawBlankCells = false removes business/non-business cell highlighting.
The recent versions of DayPilot use cell sweeping (.cellSweeping, which is enabled by default) - cells from visited areas are deleted to keep the DOM size small.
dp.cellSweeping = true; // default value = true
You can also customize the size of the cache (by default it holds 1000 cells):
dp.cellSweepingCacheSize = 50; // default value = 1000
You can also choose to sweep events (.dynamicEventRenderingCacheSweeping property). This is disabled by default.
dp.dynamicEventRenderingCacheSweeping = true; // default value = false
The cache size is configurable using .dynamicEventRenderingCacheSize property:
dp.dynamicEventRenderingCacheSize = 50; // default value = 200
2. Delaying Actions Performed during Scrolling
All updates performed during scrolling in real time (i.e. in the main thread, without any delay) block the browser until they are completed.
The scheduler uses different delayes for specific actions:
- dynamic event loading
- cell rendering
- event rendering
- floating events and headers update
If you set the value of any of these properties to 0 they will be performed in real time in the main thread, blocking the browser until the action is finished.
The scrolling can be also made smoother by tweaking the scroll delay (the time before the scheduler starts rendering the updated viewport). Use the following properties (default values):
- scrollDelayDynamic (500)
- scrollDelayCells (0)
- scrollDelayEvents (200)
- scrollDelayFloats (0)
In the latest versions, cells are rendered in in onscroll without any delay. This was changed because it performed well in desktop tests. However, this doesn't have to be true for all browsers and especially on mobile and other low-performance devices it doesn't work well.
Note that when the value is set to 0 it will be executed synchronously. Changing the value to 1 or greateer will make it asynchronous.
3. Row Header Width Auto-Fit
The row header width auto-fit feature is turned on by default. It calculates the row header width depending on the content and this can be very expensive, especially when displaying a lot of rows. When progressive row rendering is turned on, it will slow down the scrolling.
If you can replace the dynamic width with a good static value it will improve performance significantly.