Timeline View - Improving Event Creation Speed in IE

Scheduler Javascript
#1

Hey Guys,

I am sorry I consuming another thread for same problem but I didn’t get much deliberation in the previous thread and I really have to find a solution to this issue.

My Actual Concern:-

On checking the responsiveness of the api on Internet explorer 11 (edge) i found that creating events on the timeline incurs some lag ( is slow) i.e when i dragged my mouse over the timeline it takes some time ( ms) before i can actually see the events.

The number of resources ( sections ) i had on the view were around 100 and with each section having 1 event each. Also I noticed that the lag and slowness in creating Event keeps on increasing with the number of resources i.e if i have around 200 resources (sections ) then the lag is more.

The environment on which I am trying is minimal and clean as I am using one of your samples -http://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html.

Here the link for the video showing the lag - sendvid.com/r46fdip7

What I found out:-

What i was referring to as lag in creating events is i think related to how the the Event is rendered when we move the mouse after hitting the mousedown event.

I think we doing a lot of stuff ( checks/logic ) in the function ( scheduler._on_mouse_move ?? ) which is responsible for creating events by dragging. I mean we might have to perform all this checks and logic to implement myriad number of functionalities and events the scheduler timeline API provides.

But this doesn’t mean that we should overlook the API’s responsiveness and speed ( esp. in slow browsers - which we somehow have to support looking at our target audience/users ).

I think there should be a bare bones faster version for these methods (esp create,move,drag etc ) without all the add on’s and if we wish to later add the functionalities then these methods can be somehow extended ( knowing beforehand that these add on’s might slow down these methods ).

I mean whats the point of all those add on’s/functionalities if I cannot do somethings basic as dragging or creating an event properly/smoothly in Some Browsers ( esp. Internet Explorer ).

While doing so can take a lot of time and thinking, Meanwhile can somebody please help me in Monkey Patching the Event Creation Method so that I can get rid of most the additional functionality and make this method bare bones so that I am able to render the Events on the view more smoothly and without any lag. I am only concerned with event callbacks once I am done with creating events and hit the mouseup event.

I really really need this to make it happen. Moderators, old users kindly help me with this one. Any Help would be greatly appreciated.

#2

That is the root of the problem. Javascript is relative fast, repainting huge table is slow.

Can you share a demo link, where operations are slow ?

P.S. Be sure that you don’t have update_render property set as true ( it will slowdown rendereing a lot )

#3

Stanislav,

Thanks a lot for your feedback. Really Appreciate it.

Like you mentioned the root cause is adding more sections but it is not fast for even 100 sections (with one shift each ). Our requirement is that the API should work perfectly/smoothly for 150 section/resources.

You can check the delay/lag on these videos sendvid.com/r46fdip7

Other than this:

1.) I have not touched update_render property so its false by default.

2.) Can you share a demo link, where operations are slow ?

I cannot share the link to the local environment I am working on but I was able to replicate it on one your samples present online by inserting dummy data through Dev Tools.

Sample - docs.dhtmlx.com/scheduler/sample … lines.html

Way to Replicate the Issue:

1.) Go to the above link/sample in Internet Explorer
2.) Open Console in Developer Tools (F12 or inspect element)
3.) Copy Paste the below functions Definitions ( code given below ) and hit CTRL + ENTER
4.) Then Execute this Code

var currentDate = new Date();
var SCHD_FORMAT = scheduler.date.date_to_str("%Y-%m-%d");
scheduler.matrix[“timeline”].y_unit = scheduler.serverList(“employees”);
//add new sections
var sections = createSections(200); //section count goes here
scheduler.updateCollection(‘employees’,sections);
//add new shifts
var shifts = createShifts();
scheduler.parse(shifts,‘json’);
scheduler.updateView(currentDate);

Required Functions to Generate Fake Data:
function generateRandomString(){
var text = “”;
var possible = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;

for( var i=0; i < 3; i++ )
    text += possible.charAt(Math.floor(Math.random() * possible.length));

return text;

}

function createSections(count){
count = count || 100;
var sectionArr = [];

for(;count–;){
var individualSectionObj = {};
individualSectionObj.key = count;
individualSectionObj.label = generateRandomString();
sectionArr .push(individualSectionObj);
}
return sectionArr;
}

var createShifts = function(){
//for every section 1 shifts
var shiftsArr = [];
var totalSections = sections.length;

for(;totalSections --;){
var individualShift = {};
individualShift.section_id = totalSections;
individualShift.start_date = SCHD_FORMAT(currentDate) + ’ 09:00’;
individualShift.end_date = SCHD_FORMAT(currentDate) + ’ 12:00’;
shiftsArr.push(individualShift);
}
return shiftsArr;
}

#4

Attached is a profile of a single Drag-n-Drop frame

As you can see, the script processing ( yellow bar ) takes just a few percents of total work. Repainting the screen takes all the time.

2015-08-31_1306.png953×384 8.68 KB