JQuery performance issue (Or just bad CODING!)
- by ferronrsmith
function getItemDialogContent(planItemType) {
var oDialogContent = $('<div/>').append($('#cardDialogHelper').html()).addClass("card");
if (planItemType) {
oDialogContent.find('#cardDialogHeader').addClass(planItemType).find('#dialogTitle').html(planItemType);
oDialogContent.find('#cardDialogCustomFields').html($('#' + planItemType + 'DialogFields').html());
if (planItemType == 'announcement' || planItemType == 'question') {
oDialogContent.find("#dialogPin").remove();
}
}
return oDialogContent;
}
I am doing some code cleanup for a web application I am working on. The above method lags in IE and most of our user base use IE. Can someone help me. I figure the find() method is very expensive because of the DOM traversal and I am thinking of optimizing. Any ideas anyone? Thanks in advance :D
Been doing some profiling on the application and the following line seems to be causing alot of problems. help me please. is there any way I can optimize ?
$('').append($('#cardDialogHelper').html()).addClass("card");
This is the ajax call that does the work. Is there a way to do some of this after the call. Please help me. (Added some functions I thought would be helpful in the diagnosis)
GetAllPlansTemp = function() {
$.getJSON("/SAMPLE/GetAllPlanItems",processData);
}
processData = function(data) {
_throbber = showThrobber();
var sortedPlanItems = $(data.d).sort("Sequence", "asc");
// hideThrobber(_throbber);
$(sortedPlanItems).each(createCardSkipTimelime);
doCardStacks();
doTimelineFormat();
if (boolViewAblePlans == 'false') {
$("p").show();
}
hideThrobber(_throbber);
}
function createCardSkipTimelime() {
boolViewAblePlans = 'false';
if (this.__Deleted == 'true' || IsPastPlanItem(this)) {
return;
}
boolViewAblePlans = 'true';
fixer += "\n" + this.TempKey; // fixes what looks like a js threading issue.
var value = CreatePlanCard2(this, GetPlanCardStackContainer(this.__type));
UpdatePlanCardNoTimeLine(value, this);
}
function CreatePlanCard2(carddata, sContainer) {
var sCardclass = GetPlanCardClass(carddata.__type);
var editdialog = getItemDialogContent(sCardclass);
return $('<div/>').attr('id', carddata.TempKey).card({ 'container': $(sContainer), 'cardclass': sCardclass, 'editdialog': editdialog, 'readonly': GetCardMode(carddata) });
}
