Response title
This is preview!
Move this topic
How to avoid .trigger('pagecreate') memory leaks
in jQuery Mobile
•
11 months ago
Hi!
In a single page jquery mobile and backbone app, I'm trying to cycle a large backbone collection into a jquery mobile page, as soon as I have switched a model i should re-render my view and trigger the pagecreate event (it's the only event i found that redraws the whole page header and footer included).
the problem is that pagecreate generates a huge memory leak in my app (almost 0,5 mb for trigger) and makes it unusable very soon...
is there a way to clean all before retriggering pagecreate and so avoid memory leaks?
thanks in advance
Luca
1
Replies(7)
Re: How to avoid .trigger('pagecreate') memory leaks
11 months ago
I hope following lines of code should help you out. Sorry in advance if not.
/*
* Page Event Name : PageHide
* Logic: Following line of code attach PageHide event to current page.
* "PageHide" event of current page invokes when next page is about to display.
* This event clears content and events attached to current page before showing next page.
* This ensures performance of application by keeping DOM clean.
*/
$("#page").bind('pagehide', function() {
$("#page").die();
$(this).empty().remove();
});
Leave a comment on nitinpatel01's reply
Re: How to avoid .trigger('pagecreate') memory leaks
11 months ago
Thanks for the reply,
unfortunately, it doesn't work for me, actually it make it even bigger (almost 3.5 mb bigger after 30 pages rendering)
Luca
Leave a comment on suicidesurfer's reply
Re: How to avoid .trigger('pagecreate') memory leaks
11 months ago
It seems that the problem exists only with android...
i've created a fiddle to test it:
i don't know if it's a valid test, but on android chrome memory consumption grows of about 3 mb every 10 clicks, while on desktop chrome it seems ok...
Re: How to avoid .trigger('pagecreate') memory leaks
11 months ago
Hi,
I saw you fiddle test. What I feel is as a best practice you should not be putting such a big string (var page_content) in DOM. This puts lot of overhead on DOM hence bumps the memory consumption. Ideally you should put your content of var page_content in a HTML div with the tags you want to play with given an unique Id. Then in reload_page() play with those tags/divs through jquery or javascript.
Leave a comment on suicidesurfer's reply
Re: How to avoid .trigger('pagecreate') memory leaks
11 months ago
Hi!
Thanks for the reply, the snipplet is just an example wich tries to simulate the behaviour of a view's render in backbone that is too complex to put in a snipplet... i'll try your suggest, maybe a page transition on the same page with ReloadPage set to true could resolve the situation...
Leave a comment on suicidesurfer's reply
Re: How to avoid .trigger('pagecreate') memory leaks
11 months ago
it doesnt'work, ReloadPage works only with real urls and not with DOM objects..
Leave a comment on suicidesurfer's reply
Re: How to avoid .trigger('pagecreate') memory leaks
4 months ago
Hi,
I am having a similar issues. Using Jquery Mobile 1.2 final and phone gap 1.8
I am dynamically creating a <UL> with hundreds of <LI>. Memory creeps about 7Mb on desktop (chrome) and just goes really silly on Android (270mb+, app dies quite quickly)
Each list item has a checkbox and user has a choice of items to download.
Did you resolve your issue? If so can you explain how? I am using trigger('create') but need to in order for the listview control to render correctly.
I'm sure I can optimize some aspects but memory is the main issue.
I think my issue is mainly from the function below:
function SyncRemote_FillSurveyList(data)
{
var divSurveys = $(SYNC_REMOTE_PAGE).find('div[id=divSurveys]');
var items='';
var previousSchool='';
$.each(data,function(i,item)
{
if(previousSchool != item['School'])
{
items+='<li data-role="list-divider">{0}</li>'.format(item['School']);
previousSchool = item['School'];
}
items+='<li>'
+ '<h3>Ref: ' + (item['SurveyRef']||'') + ', Client Ref: ' + (item['ClientRefNo']||'') + '</h3>'
+ '<p>{0}</p>'.format(item['SurveyTypeDesc'])
+ '<p>' + (item['Block']||'') + '</p>'
+ '<div class="ui-li-aside">' + tf.util.formatDate( item['SurveyDate'])
+ '<br/><div style="width:105px;float:right">'
+ '<input type="checkbox" data-surveykey="{0}" name="chkSurvey_{0}" id="chkSurvey_{0}" class="custom" data-inline="true" data-mini="true" data-theme="b" />'.format(item['HazardSurveyKey'])
+ '<label for="chkSurvey_{0}">Select</label>'.format(item['HazardSurveyKey'])
+ '</div></div>'
+ '<p>' + (item['Comments'] || ' ') + '</p>'
+ '</li>';
});
if(data.length>0)
{
items= '<ul data-role="listview" data-divider-theme="b" data-inset="true">' + items + '</ul>'
$(divSurveys).empty().prepend(items).trigger('create');
$(divSurveys).find('input[type=checkbox],[data-surveykey]').click(
function(e)
{
//update selection count for each checkbox clicked
SyncRemote_UpdateSurveyCounts(-1, SyncRemote_GetSelectedSurveyItems().length );
}
);
$('#cmdSurveyDownload').show();
SyncRemote_SetToggleButtonText(false);
$('#cmdSurveySelectToggle').show();
}
else
{
$(divSurveys).empty().prepend('<h3>No items found based on your selection</h3>');
$('#cmdSurveyDownload').hide();
$('#cmdSurveySelectToggle').hide();
}
}
Thanks...
I am having a similar issues. Using Jquery Mobile 1.2 final and phone gap 1.8
I am dynamically creating a <UL> with hundreds of <LI>. Memory creeps about 7Mb on desktop (chrome) and just goes really silly on Android (270mb+, app dies quite quickly)
Each list item has a checkbox and user has a choice of items to download.
Did you resolve your issue? If so can you explain how? I am using trigger('create') but need to in order for the listview control to render correctly.
I'm sure I can optimize some aspects but memory is the main issue.
I think my issue is mainly from the function below:
function SyncRemote_FillSurveyList(data)
{
var divSurveys = $(SYNC_REMOTE_PAGE).find('div[id=divSurveys]');
var items='';
var previousSchool='';
$.each(data,function(i,item)
{
if(previousSchool != item['School'])
{
items+='<li data-role="list-divider">{0}</li>'.format(item['School']);
previousSchool = item['School'];
}
items+='<li>'
+ '<h3>Ref: ' + (item['SurveyRef']||'') + ', Client Ref: ' + (item['ClientRefNo']||'') + '</h3>'
+ '<p>{0}</p>'.format(item['SurveyTypeDesc'])
+ '<p>' + (item['Block']||'') + '</p>'
+ '<div class="ui-li-aside">' + tf.util.formatDate( item['SurveyDate'])
+ '<br/><div style="width:105px;float:right">'
+ '<input type="checkbox" data-surveykey="{0}" name="chkSurvey_{0}" id="chkSurvey_{0}" class="custom" data-inline="true" data-mini="true" data-theme="b" />'.format(item['HazardSurveyKey'])
+ '<label for="chkSurvey_{0}">Select</label>'.format(item['HazardSurveyKey'])
+ '</div></div>'
+ '<p>' + (item['Comments'] || ' ') + '</p>'
+ '</li>';
});
if(data.length>0)
{
items= '<ul data-role="listview" data-divider-theme="b" data-inset="true">' + items + '</ul>'
$(divSurveys).empty().prepend(items).trigger('create');
$(divSurveys).find('input[type=checkbox],[data-surveykey]').click(
function(e)
{
//update selection count for each checkbox clicked
SyncRemote_UpdateSurveyCounts(-1, SyncRemote_GetSelectedSurveyItems().length );
}
);
$('#cmdSurveyDownload').show();
SyncRemote_SetToggleButtonText(false);
$('#cmdSurveySelectToggle').show();
}
else
{
$(divSurveys).empty().prepend('<h3>No items found based on your selection</h3>');
$('#cmdSurveyDownload').hide();
$('#cmdSurveySelectToggle').hide();
}
}
Thanks...
Leave a comment on skippy24's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to suicidesurfer's question
Statistics
- 7 Replies
- 570 Views
- 0 Followers
