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

My webpage gets laggy after a few hours when using Daypilot(trial) scheduler

Asked by Anonymous
5 years ago.

I'm experimenting with the scheduler in my page(angular version). I'm requesting the most recent events from my server every 10 seconds and assign the response to scheduler.events.list. The page gets laggy after about 4-5 hours. Not only daypilot, but the whole page gets laggy.

Here is the function that is executed every 10 seconds:

function loadEvents() {
//Angular $resource factory
EventsService.getEvents({}, function(response) {
var events = response.events;
var now = new Date().getTime();
$scope.currentevent = null;
for(var i = 0; i<events.length && $scope.currentEvent === null; i++){
var value = events[i];
if(new Date(value.start).getTime()<now && new Date(value.end).getTime()>now){
$scope.currentEvent = value;
}
}
//I use daypilot to show the events, the below code only updates the list of events if
//The events have changed
var currentEvents = JSON.stringify($scope.scheduler.events.list);
var newEvents = JSON.stringify(events);
if(currentEvents!=newEvents){
$scope.scheduler.events.list = events;
$scope.scheduler.update();
}
$timeout(function () {
loadEvents();
}, 10000);
});
}

here is my scheduler config:
$scope.schedulerConfig = {
allowEventOverlap: false,
eventResizeHandling: "Disabled",
eventMoveHandling: "Disabled",
visible: true,
scale: "Minute",
cellWidthSpec: "Auto",
tapAndHoldTimeout: 0,
rowMinHeight: 80,
eventHeight: 80,
days: 1,
startDate: new DayPilot.Date().firstDayOfMonth(),
theme: "daypilottheme",
timeHeaders: [
{ groupBy: "Hour", format: "HH:mm" }
],
};

Removing daypilot from my page but keeping the 10 second interval seems to solve the issue. Am I doing something wrong?

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

Most likely it is an increasing memory consumption that is slowing the page down.

A few hints:

1. Make sure that you have DayPilot Pro version 8.1.1969 or later (http://javascript.daypilot.org/daypilot-pro-for-javascript-8-1-sp8/). This release significantly improves memory handling of repeated .update() calls.

2. Chrome developer tools can help a lot with diagnosing the problem. Try recording heap allocations/releases using "Profiles" tab, "Record heap allocations" option.

3. With angular, debugging memory issues can be more difficult because there is a lot of stuff done under the hoods. I would also consider using the plain JavaScript version.

4. How many times does .update() get actually called during the four-hour period?

5. Comparing the event arrays using JSON.stringify can become costly, especially for large data sets. I would consider using a hash (which you can generate on the server side and send with the data), a last-modified stamp or something like that.

6. Updating the Scheduler in the middle of a drag and drop operation may cause problems. There are tools to detect a drag and drop which is in progress. You can also block the UI during AJAX calls. But lets discuss this later, when the performance issue is solved.

7. There are a couple of other tweaks available, but you can also postpone that after the main issue is solved.

Example: You can update only the events (and not the whole scheduler) like this:

$scope.scheduler.update({events: events});

It will be faster than the full update:

$scope.scheduler.events.list = events; 
$scope.scheduler.update(); 
Comment posted by Anonymous
5 years ago.

Hi,

Thanks for the answer. I will try your hints and see if the issue gets solved.

I already tried this once, but didn't really understand the numbers/output I got. I'll have to look into it.

I didn't measure how many times .update actually getting called, but it's probably close to 1140 times, because it gets called every 10 seconds. However it can't possibly be more than 1140 times, because there is a delay between the request and server response(the $timeout is inside the "succes" method of the getEvents request). I also don't call .update() anywhere else besides the function in My opening post.

I forgot to mention this, but I only request the events for today and for 1 resource. It's never really more than a few events/a few kilobytes of data.

I don't use drag and drop in my page, so this shouldn't be an issue. Is there a property that disables it drag and drop? I couldn't find in here https://api.daypilot.org/daypilot-scheduler-properties/

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

The Scheduler uses DayPilot.Date class for all internal date-related calculations:

http://api.daypilot.org/daypilot-date-class/

The DayPilot.Date class instances are shared for the same points in time and they are cached. The instance remains in the cache during the page lifetime (until you reload the page). The main reason is to improve performance.

This is pretty much the only type of object that remains in the memory after an additional .update() call. All DOM-related objects, events, etc. are cleared.

Releases prior to 8.1 SP8 (build 1969) create unnecessary DayPilot.Date objects in several places. If you use these older builds and run .update() thousand times they will all remain in memory. Number of events and the timeline length only have limited influence on this issue.

Since build 1969 you can also clear the cache manually:

DayPilot.Date.Cache.clear();

Normally it's not necessary to do that, even for frequent update calls. If you decide to try it, place it before the .update() call.

However, it is crucial to update to version 1969 if you haven't done it already. Otherwise you will be chasing problems that have been fixed already.

Let me know if the problem persists with the latest release.

Comment posted by Anonymous
5 years ago.

Thanks, I will try it and report back.

Comment posted by Anonymous
5 years ago.

Hi,

After updating to newest version and clearing date cache once in a while solved the issue. Thanks.

Comment posted by Anonymous
5 years ago.

By the way: I couldn't post from my computer, everytime I tried, it said 'spam'.

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