librelist archives

« back to archive

jQuery Mobile with memory leaks

jQuery Mobile with memory leaks

From:
Michael Ridland
Date:
2012-05-22 @ 00:06
could not decode message

Re: [sydjs] jQuery Mobile with memory leaks

From:
Mark Byers @ ibCom
Date:
2012-05-22 @ 00:43
Hi,

You should post it on:

http://forum.jquery.com/jquery-mobile

Mark Byers
mydigitalstructure.com
@mydsondemand



On 22/05/2012, at 10:06 AM, Michael Ridland wrote:

> Hey Peeps
> 
> I think I've located memory leaks in jquery mobile. I'm using jquery 
mobile in a different way but it still shouldn't leave the ghosts around. 
In the attached sample use the 'Empty & Reload' button and you'll be able 
to see the memory leak. 
> 
> I've been debugging this for a few days and keep on finding more issues.
I'm not 100% sure if it's me and there's something I can do to fix the 
issues or if it's in the framework.
> 
> I've been looking at the code and found closures like these are holding 
onto my detached DOM objects. 
> 
> // prevent screen drag when slider activated
> $( document ).bind( "vmousemove", function( event ) {
> 	if ( self.dragging ) {
> 		// self.mouseMoved must be updated before refresh() because it will be
used in the control "change" event
> 		self.mouseMoved = true;
> 
> 		if ( cType === "select" ) {
> 			// make the handle move in sync with the mouse
> 			handle.removeClass( "ui-slider-handle-snapping" );
> 		}
> 
> 		self.refresh( event );
> 
> 		// only after refresh() you can calculate self.userModified
> 		self.userModified = self.beforeStart !== control[0].selectedIndex;
> 		return false;
> 	}
> });
> 
> 
> 
> 
> if ( input.is( "textarea" ) ) {
> 	var extraLineHeight = 15,
> 		keyupTimeoutBuffer = 100,
> 		keyup = function() {
> 			var scrollHeight = input[ 0 ].scrollHeight,
> 				clientHeight = input[ 0 ].clientHeight;
> 
> 			if ( clientHeight < scrollHeight ) {
> 				input.height(scrollHeight + extraLineHeight);
> 			}
> 		},
> 		keyupTimeout;
> 
> 	input.keyup(function() {
> 		clearTimeout( keyupTimeout );
> 		keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
> 	});
> 
> 	// binding to pagechange here ensures that for pages loaded via
> 	// ajax the height is recalculated without user input
> 	$( document ).one( "pagechange", keyup );
> 
> 	// Issue 509: the browser is not providing scrollHeight properly until 
the styles load
> 	if ( $.trim( input.val() ) ) {
> 		// bind to the window load to make sure the height is calculated based on BOTH
> 		// the DOM and CSS
> 		$( window ).load( keyup );
> 	}
> }
> <MemoryLeak.zip>

Re: [sydjs] jQuery Mobile with memory leaks

From:
Jared Wyles
Date:
2012-05-22 @ 00:47
Or payed attention during my talk on how to discover memory leaks!

On Tue, May 22, 2012 at 10:43 AM, Mark Byers @ ibCom
<mark.byers@ibcom.biz> wrote:
> Hi,
>
> You should post it on:
>
> http://forum.jquery.com/jquery-mobile
>
> Mark Byers
> mydigitalstructure.com
> @mydsondemand
>
>
>
> On 22/05/2012, at 10:06 AM, Michael Ridland wrote:
>
> Hey Peeps
>
> I think I've located memory leaks in jquery mobile. I'm using jquery mobile
> in a different way but it still shouldn't leave the ghosts around. In the
> attached sample use the 'Empty & Reload' button and you'll be able to see
> the memory leak.
>
> I've been debugging this for a few days and keep on finding more issues. I'm
> not 100% sure if it's me and there's something I can do to fix the issues or
> if it's in the framework.
>
> I've been looking at the code and found closures like these are holding onto
> my detached DOM objects.
>
> // prevent screen drag when slider activated $( document ).bind(
> "vmousemove", function( event ) { if ( self.dragging ) { // self.mouseMoved
> must be updated before refresh() because it will be used in the control
> "change" event self.mouseMoved = true; if ( cType === "select" ) { // make
> the handle move in sync with the mouse handle.removeClass(
> "ui-slider-handle-snapping" ); } self.refresh( event ); // only after
> refresh() you can calculate self.userModified self.userModified =
> self.beforeStart !== control[0].selectedIndex; return false; } });
>
>
> if ( input.is( "textarea" ) ) {
> var extraLineHeight = 15,
> keyupTimeoutBuffer = 100,
> keyup = function() {
> var scrollHeight = input[ 0 ].scrollHeight,
> clientHeight = input[ 0 ].clientHeight;
>
> if ( clientHeight < scrollHeight ) {
> input.height(scrollHeight + extraLineHeight);
> }
> },
> keyupTimeout;
>
> input.keyup(function() {
> clearTimeout( keyupTimeout );
> keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
> });
>
> // binding to pagechange here ensures that for pages loaded via
> // ajax the height is recalculated without user input
> $( document ).one( "pagechange", keyup );
>
> // Issue 509: the browser is not providing scrollHeight properly until the
> styles load
> if ( $.trim( input.val() ) ) {
> // bind to the window load to make sure the height is calculated based on
> BOTH
> // the DOM and CSS
> $( window ).load( keyup );
> }
> }
> <MemoryLeak.zip>
>
>

Re: [sydjs] jQuery Mobile with memory leaks

From:
Michael Ridland
Date:
2012-05-22 @ 00:49
Hi

I already discovered the memory leaks I'm just not sure why jquery mobile
has so many.




On Tue, May 22, 2012 at 10:47 AM, Jared Wyles <jared.wyles@gmail.com> wrote:

> Or payed attention during my talk on how to discover memory leaks!
>
> On Tue, May 22, 2012 at 10:43 AM, Mark Byers @ ibCom
> <mark.byers@ibcom.biz> wrote:
> > Hi,
> >
> > You should post it on:
> >
> > http://forum.jquery.com/jquery-mobile
> >
> > Mark Byers
> > mydigitalstructure.com
> > @mydsondemand
> >
> >
> >
> > On 22/05/2012, at 10:06 AM, Michael Ridland wrote:
> >
> > Hey Peeps
> >
> > I think I've located memory leaks in jquery mobile. I'm using jquery
> mobile
> > in a different way but it still shouldn't leave the ghosts around. In the
> > attached sample use the 'Empty & Reload' button and you'll be able to see
> > the memory leak.
> >
> > I've been debugging this for a few days and keep on finding more issues.
> I'm
> > not 100% sure if it's me and there's something I can do to fix the
> issues or
> > if it's in the framework.
> >
> > I've been looking at the code and found closures like these are holding
> onto
> > my detached DOM objects.
> >
> > // prevent screen drag when slider activated $( document ).bind(
> > "vmousemove", function( event ) { if ( self.dragging ) { //
> self.mouseMoved
> > must be updated before refresh() because it will be used in the control
> > "change" event self.mouseMoved = true; if ( cType === "select" ) { //
> make
> > the handle move in sync with the mouse handle.removeClass(
> > "ui-slider-handle-snapping" ); } self.refresh( event ); // only after
> > refresh() you can calculate self.userModified self.userModified =
> > self.beforeStart !== control[0].selectedIndex; return false; } });
> >
> >
> > if ( input.is( "textarea" ) ) {
> > var extraLineHeight = 15,
> > keyupTimeoutBuffer = 100,
> > keyup = function() {
> > var scrollHeight = input[ 0 ].scrollHeight,
> > clientHeight = input[ 0 ].clientHeight;
> >
> > if ( clientHeight < scrollHeight ) {
> > input.height(scrollHeight + extraLineHeight);
> > }
> > },
> > keyupTimeout;
> >
> > input.keyup(function() {
> > clearTimeout( keyupTimeout );
> > keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
> > });
> >
> > // binding to pagechange here ensures that for pages loaded via
> > // ajax the height is recalculated without user input
> > $( document ).one( "pagechange", keyup );
> >
> > // Issue 509: the browser is not providing scrollHeight properly until
> the
> > styles load
> > if ( $.trim( input.val() ) ) {
> > // bind to the window load to make sure the height is calculated based on
> > BOTH
> > // the DOM and CSS
> > $( window ).load( keyup );
> > }
> > }
> > <MemoryLeak.zip>
> >
> >
>



-- 

*Michael Ridland | ThinkSmart Digital*
Managing Director
P. 0404 865 350
E. michael@thinksmartdigital.com.au
W. www.thinksmartdigital.com.au
T. www.twitter.com/rid00z
L. au.linkedin.com/in/michaelridland


 <http://au.linkedin.com/in/michaelridland>

Re: [sydjs] jQuery Mobile with memory leaks

From:
Jared Wyles
Date:
2012-05-22 @ 00:52
Well it also showed how to show exactly what is leaking and how to fix it.


In this case i would assume that there is a closure being formed by an
anon function which is referencing something in the outer scope.
Jquery caches these elements when it accesses a path through the data
object (Why i have not really dug that deep).

So when you are detaching the elements you end up with a reference
having to be kept around for the closure as the cache is holding onto
it and vice versa. Try calling .remove() when you pull the element
from the dom.




On Tue, May 22, 2012 at 10:49 AM, Michael Ridland <rid00z@gmail.com> wrote:
> Hi
>
> I already discovered the memory leaks I'm just not sure why jquery mobile
> has so many.
>
>
>
>
> On Tue, May 22, 2012 at 10:47 AM, Jared Wyles <jared.wyles@gmail.com> wrote:
>>
>> Or payed attention during my talk on how to discover memory leaks!
>>
>> On Tue, May 22, 2012 at 10:43 AM, Mark Byers @ ibCom
>> <mark.byers@ibcom.biz> wrote:
>> > Hi,
>> >
>> > You should post it on:
>> >
>> > http://forum.jquery.com/jquery-mobile
>> >
>> > Mark Byers
>> > mydigitalstructure.com
>> > @mydsondemand
>> >
>> >
>> >
>> > On 22/05/2012, at 10:06 AM, Michael Ridland wrote:
>> >
>> > Hey Peeps
>> >
>> > I think I've located memory leaks in jquery mobile. I'm using jquery
>> > mobile
>> > in a different way but it still shouldn't leave the ghosts around. In
>> > the
>> > attached sample use the 'Empty & Reload' button and you'll be able to
>> > see
>> > the memory leak.
>> >
>> > I've been debugging this for a few days and keep on finding more issues.
>> > I'm
>> > not 100% sure if it's me and there's something I can do to fix the
>> > issues or
>> > if it's in the framework.
>> >
>> > I've been looking at the code and found closures like these are holding
>> > onto
>> > my detached DOM objects.
>> >
>> > // prevent screen drag when slider activated $( document ).bind(
>> > "vmousemove", function( event ) { if ( self.dragging ) { //
>> > self.mouseMoved
>> > must be updated before refresh() because it will be used in the control
>> > "change" event self.mouseMoved = true; if ( cType === "select" ) { //
>> > make
>> > the handle move in sync with the mouse handle.removeClass(
>> > "ui-slider-handle-snapping" ); } self.refresh( event ); // only after
>> > refresh() you can calculate self.userModified self.userModified =
>> > self.beforeStart !== control[0].selectedIndex; return false; } });
>> >
>> >
>> > if ( input.is( "textarea" ) ) {
>> > var extraLineHeight = 15,
>> > keyupTimeoutBuffer = 100,
>> > keyup = function() {
>> > var scrollHeight = input[ 0 ].scrollHeight,
>> > clientHeight = input[ 0 ].clientHeight;
>> >
>> > if ( clientHeight < scrollHeight ) {
>> > input.height(scrollHeight + extraLineHeight);
>> > }
>> > },
>> > keyupTimeout;
>> >
>> > input.keyup(function() {
>> > clearTimeout( keyupTimeout );
>> > keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
>> > });
>> >
>> > // binding to pagechange here ensures that for pages loaded via
>> > // ajax the height is recalculated without user input
>> > $( document ).one( "pagechange", keyup );
>> >
>> > // Issue 509: the browser is not providing scrollHeight properly until
>> > the
>> > styles load
>> > if ( $.trim( input.val() ) ) {
>> > // bind to the window load to make sure the height is calculated based
>> > on
>> > BOTH
>> > // the DOM and CSS
>> > $( window ).load( keyup );
>> > }
>> > }
>> > <MemoryLeak.zip>
>> >
>> >
>
>
>
>
> --
>
> Michael Ridland | ThinkSmart Digital
> Managing Director
> P. 0404 865 350
> E. michael@thinksmartdigital.com.au
> W. www.thinksmartdigital.com.au
> T. www.twitter.com/rid00z
> L. au.linkedin.com/in/michaelridland
>
>
>

Re: [sydjs] jQuery Mobile with memory leaks

From:
Michael Ridland
Date:
2012-05-22 @ 01:29
Hi Jared

Yes, I've already done all that and found exactly what is leaking, that's
easy. Empty/detach etc is not working in this case.

I've dug deep into jquery mobile and found the closures that are holding
onto my detached DOM objects. See below.

I posted because I thought there might be some jQuery Mobile experts that
could show me a workaround.

// prevent screen drag when slider activated $( document ).bind(
"vmousemove", function( event ) { if ( self.dragging ) { // self.mouseMoved
must be updated before refresh() because it will be used in the control
"change" event self.mouseMoved = true; if ( cType === "select" ) { // make
the handle move in sync with the mouse handle.removeClass(
"ui-slider-handle-snapping" ); } self.refresh( event ); // only after
refresh() you can calculate self.userModified self.userModified =
self.beforeStart !== control[0].selectedIndex; return false; } });


if ( input.is( "textarea" ) ) {
var extraLineHeight = 15,
keyupTimeoutBuffer = 100,
keyup = function() {
var scrollHeight = input[ 0 ].scrollHeight,
clientHeight = input[ 0 ].clientHeight;

if ( clientHeight < scrollHeight ) {
input.height(scrollHeight + extraLineHeight);
}
},
keyupTimeout;

input.keyup(function() {
clearTimeout( keyupTimeout );
keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
});

// binding to pagechange here ensures that for pages loaded via
// ajax the height is recalculated without user input
$( document ).one( "pagechange", keyup );

// Issue 509: the browser is not providing scrollHeight properly until the
styles load
if ( $.trim( input.val() ) ) {
// bind to the window load to make sure the height is calculated based on
BOTH
// the DOM and CSS
$( window ).load( keyup );
}
}

On Tue, May 22, 2012 at 10:52 AM, Jared Wyles <jared.wyles@gmail.com> wrote:

> Well it also showed how to show exactly what is leaking and how to fix it.
>
>
> In this case i would assume that there is a closure being formed by an
> anon function which is referencing something in the outer scope.
> Jquery caches these elements when it accesses a path through the data
> object (Why i have not really dug that deep).
>
> So when you are detaching the elements you end up with a reference
> having to be kept around for the closure as the cache is holding onto
> it and vice versa. Try calling .remove() when you pull the element
> from the dom.
>
>
>
>
> On Tue, May 22, 2012 at 10:49 AM, Michael Ridland <rid00z@gmail.com>
> wrote:
> > Hi
> >
> > I already discovered the memory leaks I'm just not sure why jquery mobile
> > has so many.
> >
> >
> >
> >
> > On Tue, May 22, 2012 at 10:47 AM, Jared Wyles <jared.wyles@gmail.com>
> wrote:
> >>
> >> Or payed attention during my talk on how to discover memory leaks!
> >>
> >> On Tue, May 22, 2012 at 10:43 AM, Mark Byers @ ibCom
> >> <mark.byers@ibcom.biz> wrote:
> >> > Hi,
> >> >
> >> > You should post it on:
> >> >
> >> > http://forum.jquery.com/jquery-mobile
> >> >
> >> > Mark Byers
> >> > mydigitalstructure.com
> >> > @mydsondemand
> >> >
> >> >
> >> >
> >> > On 22/05/2012, at 10:06 AM, Michael Ridland wrote:
> >> >
> >> > Hey Peeps
> >> >
> >> > I think I've located memory leaks in jquery mobile. I'm using jquery
> >> > mobile
> >> > in a different way but it still shouldn't leave the ghosts around. In
> >> > the
> >> > attached sample use the 'Empty & Reload' button and you'll be able to
> >> > see
> >> > the memory leak.
> >> >
> >> > I've been debugging this for a few days and keep on finding more
> issues.
> >> > I'm
> >> > not 100% sure if it's me and there's something I can do to fix the
> >> > issues or
> >> > if it's in the framework.
> >> >
> >> > I've been looking at the code and found closures like these are
> holding
> >> > onto
> >> > my detached DOM objects.
> >> >
> >> > // prevent screen drag when slider activated $( document ).bind(
> >> > "vmousemove", function( event ) { if ( self.dragging ) { //
> >> > self.mouseMoved
> >> > must be updated before refresh() because it will be used in the
> control
> >> > "change" event self.mouseMoved = true; if ( cType === "select" ) { //
> >> > make
> >> > the handle move in sync with the mouse handle.removeClass(
> >> > "ui-slider-handle-snapping" ); } self.refresh( event ); // only after
> >> > refresh() you can calculate self.userModified self.userModified =
> >> > self.beforeStart !== control[0].selectedIndex; return false; } });
> >> >
> >> >
> >> > if ( input.is( "textarea" ) ) {
> >> > var extraLineHeight = 15,
> >> > keyupTimeoutBuffer = 100,
> >> > keyup = function() {
> >> > var scrollHeight = input[ 0 ].scrollHeight,
> >> > clientHeight = input[ 0 ].clientHeight;
> >> >
> >> > if ( clientHeight < scrollHeight ) {
> >> > input.height(scrollHeight + extraLineHeight);
> >> > }
> >> > },
> >> > keyupTimeout;
> >> >
> >> > input.keyup(function() {
> >> > clearTimeout( keyupTimeout );
> >> > keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
> >> > });
> >> >
> >> > // binding to pagechange here ensures that for pages loaded via
> >> > // ajax the height is recalculated without user input
> >> > $( document ).one( "pagechange", keyup );
> >> >
> >> > // Issue 509: the browser is not providing scrollHeight properly until
> >> > the
> >> > styles load
> >> > if ( $.trim( input.val() ) ) {
> >> > // bind to the window load to make sure the height is calculated based
> >> > on
> >> > BOTH
> >> > // the DOM and CSS
> >> > $( window ).load( keyup );
> >> > }
> >> > }
> >> > <MemoryLeak.zip>
> >> >
> >> >
> >
> >
> >
> >
> > --
> >
> > Michael Ridland | ThinkSmart Digital
> > Managing Director
> > P. 0404 865 350
> > E. michael@thinksmartdigital.com.au
> > W. www.thinksmartdigital.com.au
> > T. www.twitter.com/rid00z
> > L. au.linkedin.com/in/michaelridland
> >
> >
> >
>



-- 

*Michael Ridland | ThinkSmart Digital*
Managing Director
P. 0404 865 350
E. michael@thinksmartdigital.com.au
W. www.thinksmartdigital.com.au
T. www.twitter.com/rid00z
L. au.linkedin.com/in/michaelridland


 <http://au.linkedin.com/in/michaelridland>

Re: [sydjs] jQuery Mobile with memory leaks

From:
Jared Wyles
Date:
2012-05-22 @ 01:40
empty and detach will still keep the data associated with the element.
I am surprised that remove did not work.
Do you have a simple test case i can look at?

Thanks,
Jared.

On Tue, May 22, 2012 at 11:29 AM, Michael Ridland <rid00z@gmail.com> wrote:
> Hi Jared
>
> Yes, I've already done all that and found exactly what is leaking, that's
> easy. Empty/detach etc is not working in this case.
>
> I've dug deep into jquery mobile and found the closures that are holding
> onto my detached DOM objects. See below.
>
> I posted because I thought there might be some jQuery Mobile experts that
> could show me a workaround.
>
> // prevent screen drag when slider activated $( document ).bind(
> "vmousemove", function( event ) { if ( self.dragging ) { // self.mouseMoved
> must be updated before refresh() because it will be used in the control
> "change" event self.mouseMoved = true; if ( cType === "select" ) { // make
> the handle move in sync with the mouse handle.removeClass(
> "ui-slider-handle-snapping" ); } self.refresh( event ); // only after
> refresh() you can calculate self.userModified self.userModified =
> self.beforeStart !== control[0].selectedIndex; return false; } });
>
>
> if ( input.is( "textarea" ) ) {
> var extraLineHeight = 15,
> keyupTimeoutBuffer = 100,
> keyup = function() {
> var scrollHeight = input[ 0 ].scrollHeight,
> clientHeight = input[ 0 ].clientHeight;
>
> if ( clientHeight < scrollHeight ) {
> input.height(scrollHeight + extraLineHeight);
> }
> },
> keyupTimeout;
>
> input.keyup(function() {
> clearTimeout( keyupTimeout );
> keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
> });
>
> // binding to pagechange here ensures that for pages loaded via
> // ajax the height is recalculated without user input
> $( document ).one( "pagechange", keyup );
>
> // Issue 509: the browser is not providing scrollHeight properly until the
> styles load
> if ( $.trim( input.val() ) ) {
> // bind to the window load to make sure the height is calculated based on
> BOTH
> // the DOM and CSS
> $( window ).load( keyup );
> }
> }
>
> On Tue, May 22, 2012 at 10:52 AM, Jared Wyles <jared.wyles@gmail.com> wrote:
>>
>> Well it also showed how to show exactly what is leaking and how to fix it.
>>
>>
>> In this case i would assume that there is a closure being formed by an
>> anon function which is referencing something in the outer scope.
>> Jquery caches these elements when it accesses a path through the data
>> object (Why i have not really dug that deep).
>>
>> So when you are detaching the elements you end up with a reference
>> having to be kept around for the closure as the cache is holding onto
>> it and vice versa. Try calling .remove() when you pull the element
>> from the dom.
>>
>>
>>
>>
>> On Tue, May 22, 2012 at 10:49 AM, Michael Ridland <rid00z@gmail.com>
>> wrote:
>> > Hi
>> >
>> > I already discovered the memory leaks I'm just not sure why jquery
>> > mobile
>> > has so many.
>> >
>> >
>> >
>> >
>> > On Tue, May 22, 2012 at 10:47 AM, Jared Wyles <jared.wyles@gmail.com>
>> > wrote:
>> >>
>> >> Or payed attention during my talk on how to discover memory leaks!
>> >>
>> >> On Tue, May 22, 2012 at 10:43 AM, Mark Byers @ ibCom
>> >> <mark.byers@ibcom.biz> wrote:
>> >> > Hi,
>> >> >
>> >> > You should post it on:
>> >> >
>> >> > http://forum.jquery.com/jquery-mobile
>> >> >
>> >> > Mark Byers
>> >> > mydigitalstructure.com
>> >> > @mydsondemand
>> >> >
>> >> >
>> >> >
>> >> > On 22/05/2012, at 10:06 AM, Michael Ridland wrote:
>> >> >
>> >> > Hey Peeps
>> >> >
>> >> > I think I've located memory leaks in jquery mobile. I'm using jquery
>> >> > mobile
>> >> > in a different way but it still shouldn't leave the ghosts around. In
>> >> > the
>> >> > attached sample use the 'Empty & Reload' button and you'll be able to
>> >> > see
>> >> > the memory leak.
>> >> >
>> >> > I've been debugging this for a few days and keep on finding more
>> >> > issues.
>> >> > I'm
>> >> > not 100% sure if it's me and there's something I can do to fix the
>> >> > issues or
>> >> > if it's in the framework.
>> >> >
>> >> > I've been looking at the code and found closures like these are
>> >> > holding
>> >> > onto
>> >> > my detached DOM objects.
>> >> >
>> >> > // prevent screen drag when slider activated $( document ).bind(
>> >> > "vmousemove", function( event ) { if ( self.dragging ) { //
>> >> > self.mouseMoved
>> >> > must be updated before refresh() because it will be used in the
>> >> > control
>> >> > "change" event self.mouseMoved = true; if ( cType === "select" ) { //
>> >> > make
>> >> > the handle move in sync with the mouse handle.removeClass(
>> >> > "ui-slider-handle-snapping" ); } self.refresh( event ); // only after
>> >> > refresh() you can calculate self.userModified self.userModified =
>> >> > self.beforeStart !== control[0].selectedIndex; return false; } });
>> >> >
>> >> >
>> >> > if ( input.is( "textarea" ) ) {
>> >> > var extraLineHeight = 15,
>> >> > keyupTimeoutBuffer = 100,
>> >> > keyup = function() {
>> >> > var scrollHeight = input[ 0 ].scrollHeight,
>> >> > clientHeight = input[ 0 ].clientHeight;
>> >> >
>> >> > if ( clientHeight < scrollHeight ) {
>> >> > input.height(scrollHeight + extraLineHeight);
>> >> > }
>> >> > },
>> >> > keyupTimeout;
>> >> >
>> >> > input.keyup(function() {
>> >> > clearTimeout( keyupTimeout );
>> >> > keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
>> >> > });
>> >> >
>> >> > // binding to pagechange here ensures that for pages loaded via
>> >> > // ajax the height is recalculated without user input
>> >> > $( document ).one( "pagechange", keyup );
>> >> >
>> >> > // Issue 509: the browser is not providing scrollHeight properly
>> >> > until
>> >> > the
>> >> > styles load
>> >> > if ( $.trim( input.val() ) ) {
>> >> > // bind to the window load to make sure the height is calculated
>> >> > based
>> >> > on
>> >> > BOTH
>> >> > // the DOM and CSS
>> >> > $( window ).load( keyup );
>> >> > }
>> >> > }
>> >> > <MemoryLeak.zip>
>> >> >
>> >> >
>> >
>> >
>> >
>> >
>> > --
>> >
>> > Michael Ridland | ThinkSmart Digital
>> > Managing Director
>> > P. 0404 865 350
>> > E. michael@thinksmartdigital.com.au
>> > W. www.thinksmartdigital.com.au
>> > T. www.twitter.com/rid00z
>> > L. au.linkedin.com/in/michaelridland
>> >
>> >
>> >
>
>
>
>
> --
>
> Michael Ridland | ThinkSmart Digital
> Managing Director
> P. 0404 865 350
> E. michael@thinksmartdigital.com.au
> W. www.thinksmartdigital.com.au
> T. www.twitter.com/rid00z
> L. au.linkedin.com/in/michaelridland
>
>
>

Re: [sydjs] jQuery Mobile with memory leaks

From:
Jared Wyles
Date:
2012-05-22 @ 01:43
Ah nevermind, See you attached one on the first email.
Will take a look.

On Tue, May 22, 2012 at 11:40 AM, Jared Wyles <jared.wyles@gmail.com> wrote:
> empty and detach will still keep the data associated with the element.
> I am surprised that remove did not work.
> Do you have a simple test case i can look at?
>
> Thanks,
> Jared.
>
> On Tue, May 22, 2012 at 11:29 AM, Michael Ridland <rid00z@gmail.com> wrote:
>> Hi Jared
>>
>> Yes, I've already done all that and found exactly what is leaking, that's
>> easy. Empty/detach etc is not working in this case.
>>
>> I've dug deep into jquery mobile and found the closures that are holding
>> onto my detached DOM objects. See below.
>>
>> I posted because I thought there might be some jQuery Mobile experts that
>> could show me a workaround.
>>
>> // prevent screen drag when slider activated $( document ).bind(
>> "vmousemove", function( event ) { if ( self.dragging ) { // self.mouseMoved
>> must be updated before refresh() because it will be used in the control
>> "change" event self.mouseMoved = true; if ( cType === "select" ) { // make
>> the handle move in sync with the mouse handle.removeClass(
>> "ui-slider-handle-snapping" ); } self.refresh( event ); // only after
>> refresh() you can calculate self.userModified self.userModified =
>> self.beforeStart !== control[0].selectedIndex; return false; } });
>>
>>
>> if ( input.is( "textarea" ) ) {
>> var extraLineHeight = 15,
>> keyupTimeoutBuffer = 100,
>> keyup = function() {
>> var scrollHeight = input[ 0 ].scrollHeight,
>> clientHeight = input[ 0 ].clientHeight;
>>
>> if ( clientHeight < scrollHeight ) {
>> input.height(scrollHeight + extraLineHeight);
>> }
>> },
>> keyupTimeout;
>>
>> input.keyup(function() {
>> clearTimeout( keyupTimeout );
>> keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
>> });
>>
>> // binding to pagechange here ensures that for pages loaded via
>> // ajax the height is recalculated without user input
>> $( document ).one( "pagechange", keyup );
>>
>> // Issue 509: the browser is not providing scrollHeight properly until the
>> styles load
>> if ( $.trim( input.val() ) ) {
>> // bind to the window load to make sure the height is calculated based on
>> BOTH
>> // the DOM and CSS
>> $( window ).load( keyup );
>> }
>> }
>>
>> On Tue, May 22, 2012 at 10:52 AM, Jared Wyles <jared.wyles@gmail.com> wrote:
>>>
>>> Well it also showed how to show exactly what is leaking and how to fix it.
>>>
>>>
>>> In this case i would assume that there is a closure being formed by an
>>> anon function which is referencing something in the outer scope.
>>> Jquery caches these elements when it accesses a path through the data
>>> object (Why i have not really dug that deep).
>>>
>>> So when you are detaching the elements you end up with a reference
>>> having to be kept around for the closure as the cache is holding onto
>>> it and vice versa. Try calling .remove() when you pull the element
>>> from the dom.
>>>
>>>
>>>
>>>
>>> On Tue, May 22, 2012 at 10:49 AM, Michael Ridland <rid00z@gmail.com>
>>> wrote:
>>> > Hi
>>> >
>>> > I already discovered the memory leaks I'm just not sure why jquery
>>> > mobile
>>> > has so many.
>>> >
>>> >
>>> >
>>> >
>>> > On Tue, May 22, 2012 at 10:47 AM, Jared Wyles <jared.wyles@gmail.com>
>>> > wrote:
>>> >>
>>> >> Or payed attention during my talk on how to discover memory leaks!
>>> >>
>>> >> On Tue, May 22, 2012 at 10:43 AM, Mark Byers @ ibCom
>>> >> <mark.byers@ibcom.biz> wrote:
>>> >> > Hi,
>>> >> >
>>> >> > You should post it on:
>>> >> >
>>> >> > http://forum.jquery.com/jquery-mobile
>>> >> >
>>> >> > Mark Byers
>>> >> > mydigitalstructure.com
>>> >> > @mydsondemand
>>> >> >
>>> >> >
>>> >> >
>>> >> > On 22/05/2012, at 10:06 AM, Michael Ridland wrote:
>>> >> >
>>> >> > Hey Peeps
>>> >> >
>>> >> > I think I've located memory leaks in jquery mobile. I'm using jquery
>>> >> > mobile
>>> >> > in a different way but it still shouldn't leave the ghosts around. In
>>> >> > the
>>> >> > attached sample use the 'Empty & Reload' button and you'll be able to
>>> >> > see
>>> >> > the memory leak.
>>> >> >
>>> >> > I've been debugging this for a few days and keep on finding more
>>> >> > issues.
>>> >> > I'm
>>> >> > not 100% sure if it's me and there's something I can do to fix the
>>> >> > issues or
>>> >> > if it's in the framework.
>>> >> >
>>> >> > I've been looking at the code and found closures like these are
>>> >> > holding
>>> >> > onto
>>> >> > my detached DOM objects.
>>> >> >
>>> >> > // prevent screen drag when slider activated $( document ).bind(
>>> >> > "vmousemove", function( event ) { if ( self.dragging ) { //
>>> >> > self.mouseMoved
>>> >> > must be updated before refresh() because it will be used in the
>>> >> > control
>>> >> > "change" event self.mouseMoved = true; if ( cType === "select" ) { //
>>> >> > make
>>> >> > the handle move in sync with the mouse handle.removeClass(
>>> >> > "ui-slider-handle-snapping" ); } self.refresh( event ); // only after
>>> >> > refresh() you can calculate self.userModified self.userModified =
>>> >> > self.beforeStart !== control[0].selectedIndex; return false; } });
>>> >> >
>>> >> >
>>> >> > if ( input.is( "textarea" ) ) {
>>> >> > var extraLineHeight = 15,
>>> >> > keyupTimeoutBuffer = 100,
>>> >> > keyup = function() {
>>> >> > var scrollHeight = input[ 0 ].scrollHeight,
>>> >> > clientHeight = input[ 0 ].clientHeight;
>>> >> >
>>> >> > if ( clientHeight < scrollHeight ) {
>>> >> > input.height(scrollHeight + extraLineHeight);
>>> >> > }
>>> >> > },
>>> >> > keyupTimeout;
>>> >> >
>>> >> > input.keyup(function() {
>>> >> > clearTimeout( keyupTimeout );
>>> >> > keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
>>> >> > });
>>> >> >
>>> >> > // binding to pagechange here ensures that for pages loaded via
>>> >> > // ajax the height is recalculated without user input
>>> >> > $( document ).one( "pagechange", keyup );
>>> >> >
>>> >> > // Issue 509: the browser is not providing scrollHeight properly
>>> >> > until
>>> >> > the
>>> >> > styles load
>>> >> > if ( $.trim( input.val() ) ) {
>>> >> > // bind to the window load to make sure the height is calculated
>>> >> > based
>>> >> > on
>>> >> > BOTH
>>> >> > // the DOM and CSS
>>> >> > $( window ).load( keyup );
>>> >> > }
>>> >> > }
>>> >> > <MemoryLeak.zip>
>>> >> >
>>> >> >
>>> >
>>> >
>>> >
>>> >
>>> > --
>>> >
>>> > Michael Ridland | ThinkSmart Digital
>>> > Managing Director
>>> > P. 0404 865 350
>>> > E. michael@thinksmartdigital.com.au
>>> > W. www.thinksmartdigital.com.au
>>> > T. www.twitter.com/rid00z
>>> > L. au.linkedin.com/in/michaelridland
>>> >
>>> >
>>> >
>>
>>
>>
>>
>> --
>>
>> Michael Ridland | ThinkSmart Digital
>> Managing Director
>> P. 0404 865 350
>> E. michael@thinksmartdigital.com.au
>> W. www.thinksmartdigital.com.au
>> T. www.twitter.com/rid00z
>> L. au.linkedin.com/in/michaelridland
>>
>>
>>

Re: [sydjs] jQuery Mobile with memory leaks

From:
Aaron Powell
Date:
2012-05-22 @ 01:44
Doesn't empty clean up the data? It calls jQuery.cleanData

Aaron Powell
MVP - Internet Explorer (Development) | FunnelWeb Team Member

http://apowell.me | http://twitter.com/slace | Skype: aaron.l.powell | 
Github | BitBucket 


-----Original Message-----
From: sydjs@librelist.com [mailto:sydjs@librelist.com] On Behalf Of Jared Wyles
Sent: Tuesday, 22 May 2012 11:40 AM
To: sydjs@librelist.com
Subject: Re: [sydjs] jQuery Mobile with memory leaks

empty and detach will still keep the data associated with the element.
I am surprised that remove did not work.
Do you have a simple test case i can look at?

Thanks,
Jared.

On Tue, May 22, 2012 at 11:29 AM, Michael Ridland <rid00z@gmail.com> wrote:
> Hi Jared
>
> Yes, I've already done all that and found exactly what is leaking, 
> that's easy. Empty/detach etc is not working in this case.
>
> I've dug deep into jquery mobile and found the closures that are 
> holding onto my detached DOM objects. See below.
>
> I posted because I thought there might be some jQuery Mobile experts 
> that could show me a workaround.
>
> // prevent screen drag when slider activated $( document ).bind( 
> "vmousemove", function( event ) { if ( self.dragging ) { // 
> self.mouseMoved must be updated before refresh() because it will be 
> used in the control "change" event self.mouseMoved = true; if ( cType 
> === "select" ) { // make the handle move in sync with the mouse 
> handle.removeClass( "ui-slider-handle-snapping" ); } self.refresh( 
> event ); // only after
> refresh() you can calculate self.userModified self.userModified = 
> self.beforeStart !== control[0].selectedIndex; return false; } });
>
>
> if ( input.is( "textarea" ) ) {
> var extraLineHeight = 15,
> keyupTimeoutBuffer = 100,
> keyup = function() {
> var scrollHeight = input[ 0 ].scrollHeight, clientHeight = input[ 0 
> ].clientHeight;
>
> if ( clientHeight < scrollHeight ) {
> input.height(scrollHeight + extraLineHeight); } }, keyupTimeout;
>
> input.keyup(function() {
> clearTimeout( keyupTimeout );
> keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer ); });
>
> // binding to pagechange here ensures that for pages loaded via // 
> ajax the height is recalculated without user input $( document ).one( 
> "pagechange", keyup );
>
> // Issue 509: the browser is not providing scrollHeight properly until 
> the styles load if ( $.trim( input.val() ) ) { // bind to the window 
> load to make sure the height is calculated based on BOTH // the DOM 
> and CSS $( window ).load( keyup ); } }
>
> On Tue, May 22, 2012 at 10:52 AM, Jared Wyles <jared.wyles@gmail.com> wrote:
>>
>> Well it also showed how to show exactly what is leaking and how to fix it.
>>
>>
>> In this case i would assume that there is a closure being formed by 
>> an anon function which is referencing something in the outer scope.
>> Jquery caches these elements when it accesses a path through the data 
>> object (Why i have not really dug that deep).
>>
>> So when you are detaching the elements you end up with a reference 
>> having to be kept around for the closure as the cache is holding onto 
>> it and vice versa. Try calling .remove() when you pull the element 
>> from the dom.
>>
>>
>>
>>
>> On Tue, May 22, 2012 at 10:49 AM, Michael Ridland <rid00z@gmail.com>
>> wrote:
>> > Hi
>> >
>> > I already discovered the memory leaks I'm just not sure why jquery 
>> > mobile has so many.
>> >
>> >
>> >
>> >
>> > On Tue, May 22, 2012 at 10:47 AM, Jared Wyles 
>> > <jared.wyles@gmail.com>
>> > wrote:
>> >>
>> >> Or payed attention during my talk on how to discover memory leaks!
>> >>
>> >> On Tue, May 22, 2012 at 10:43 AM, Mark Byers @ ibCom 
>> >> <mark.byers@ibcom.biz> wrote:
>> >> > Hi,
>> >> >
>> >> > You should post it on:
>> >> >
>> >> > http://forum.jquery.com/jquery-mobile
>> >> >
>> >> > Mark Byers
>> >> > mydigitalstructure.com
>> >> > @mydsondemand
>> >> >
>> >> >
>> >> >
>> >> > On 22/05/2012, at 10:06 AM, Michael Ridland wrote:
>> >> >
>> >> > Hey Peeps
>> >> >
>> >> > I think I've located memory leaks in jquery mobile. I'm using 
>> >> > jquery mobile in a different way but it still shouldn't leave 
>> >> > the ghosts around. In the attached sample use the 'Empty & 
>> >> > Reload' button and you'll be able to see the memory leak.
>> >> >
>> >> > I've been debugging this for a few days and keep on finding more 
>> >> > issues.
>> >> > I'm
>> >> > not 100% sure if it's me and there's something I can do to fix 
>> >> > the issues or if it's in the framework.
>> >> >
>> >> > I've been looking at the code and found closures like these are 
>> >> > holding onto my detached DOM objects.
>> >> >
>> >> > // prevent screen drag when slider activated $( document ).bind( 
>> >> > "vmousemove", function( event ) { if ( self.dragging ) { // 
>> >> > self.mouseMoved must be updated before refresh() because it will 
>> >> > be used in the control "change" event self.mouseMoved = true; if 
>> >> > ( cType === "select" ) { // make the handle move in sync with 
>> >> > the mouse handle.removeClass( "ui-slider-handle-snapping" ); } 
>> >> > self.refresh( event ); // only after
>> >> > refresh() you can calculate self.userModified self.userModified 
>> >> > = self.beforeStart !== control[0].selectedIndex; return false; } 
>> >> > });
>> >> >
>> >> >
>> >> > if ( input.is( "textarea" ) ) {
>> >> > var extraLineHeight = 15,
>> >> > keyupTimeoutBuffer = 100,
>> >> > keyup = function() {
>> >> > var scrollHeight = input[ 0 ].scrollHeight, clientHeight = 
>> >> > input[ 0 ].clientHeight;
>> >> >
>> >> > if ( clientHeight < scrollHeight ) { input.height(scrollHeight + 
>> >> > extraLineHeight); } }, keyupTimeout;
>> >> >
>> >> > input.keyup(function() {
>> >> > clearTimeout( keyupTimeout );
>> >> > keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer ); });
>> >> >
>> >> > // binding to pagechange here ensures that for pages loaded via 
>> >> > // ajax the height is recalculated without user input $( 
>> >> > document ).one( "pagechange", keyup );
>> >> >
>> >> > // Issue 509: the browser is not providing scrollHeight properly 
>> >> > until the styles load if ( $.trim( input.val() ) ) { // bind to 
>> >> > the window load to make sure the height is calculated based on 
>> >> > BOTH // the DOM and CSS $( window ).load( keyup ); } } 
>> >> > <MemoryLeak.zip>
>> >> >
>> >> >
>> >
>> >
>> >
>> >
>> > --
>> >
>> > Michael Ridland | ThinkSmart Digital Managing Director P. 0404 865 
>> > 350 E. michael@thinksmartdigital.com.au W. 
>> > www.thinksmartdigital.com.au T. www.twitter.com/rid00z L. 
>> > au.linkedin.com/in/michaelridland
>> >
>> >
>> >
>
>
>
>
> --
>
> Michael Ridland | ThinkSmart Digital
> Managing Director
> P. 0404 865 350
> E. michael@thinksmartdigital.com.au
> W. www.thinksmartdigital.com.au
> T. www.twitter.com/rid00z
> L. au.linkedin.com/in/michaelridland
>
>
>

Re: [sydjs] jQuery Mobile with memory leaks

From:
Michael Ridland
Date:
2012-05-22 @ 01:47
Yep.


On Tue, May 22, 2012 at 11:44 AM, Aaron Powell <me@aaron-powell.com> wrote:

> Doesn't empty clean up the data? It calls jQuery.cleanData
>
> Aaron Powell
> MVP - Internet Explorer (Development) | FunnelWeb Team Member
>
> http://apowell.me | http://twitter.com/slace | Skype: aaron.l.powell |
> Github | BitBucket
>
>
> -----Original Message-----
> From: sydjs@librelist.com [mailto:sydjs@librelist.com] On Behalf Of Jared
> Wyles
> Sent: Tuesday, 22 May 2012 11:40 AM
> To: sydjs@librelist.com
> Subject: Re: [sydjs] jQuery Mobile with memory leaks
>
> empty and detach will still keep the data associated with the element.
> I am surprised that remove did not work.
> Do you have a simple test case i can look at?
>
> Thanks,
> Jared.
>
> On Tue, May 22, 2012 at 11:29 AM, Michael Ridland <rid00z@gmail.com>
> wrote:
> > Hi Jared
> >
> > Yes, I've already done all that and found exactly what is leaking,
> > that's easy. Empty/detach etc is not working in this case.
> >
> > I've dug deep into jquery mobile and found the closures that are
> > holding onto my detached DOM objects. See below.
> >
> > I posted because I thought there might be some jQuery Mobile experts
> > that could show me a workaround.
> >
> > // prevent screen drag when slider activated $( document ).bind(
> > "vmousemove", function( event ) { if ( self.dragging ) { //
> > self.mouseMoved must be updated before refresh() because it will be
> > used in the control "change" event self.mouseMoved = true; if ( cType
> > === "select" ) { // make the handle move in sync with the mouse
> > handle.removeClass( "ui-slider-handle-snapping" ); } self.refresh(
> > event ); // only after
> > refresh() you can calculate self.userModified self.userModified =
> > self.beforeStart !== control[0].selectedIndex; return false; } });
> >
> >
> > if ( input.is( "textarea" ) ) {
> > var extraLineHeight = 15,
> > keyupTimeoutBuffer = 100,
> > keyup = function() {
> > var scrollHeight = input[ 0 ].scrollHeight, clientHeight = input[ 0
> > ].clientHeight;
> >
> > if ( clientHeight < scrollHeight ) {
> > input.height(scrollHeight + extraLineHeight); } }, keyupTimeout;
> >
> > input.keyup(function() {
> > clearTimeout( keyupTimeout );
> > keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer ); });
> >
> > // binding to pagechange here ensures that for pages loaded via //
> > ajax the height is recalculated without user input $( document ).one(
> > "pagechange", keyup );
> >
> > // Issue 509: the browser is not providing scrollHeight properly until
> > the styles load if ( $.trim( input.val() ) ) { // bind to the window
> > load to make sure the height is calculated based on BOTH // the DOM
> > and CSS $( window ).load( keyup ); } }
> >
> > On Tue, May 22, 2012 at 10:52 AM, Jared Wyles <jared.wyles@gmail.com>
> wrote:
> >>
> >> Well it also showed how to show exactly what is leaking and how to fix
> it.
> >>
> >>
> >> In this case i would assume that there is a closure being formed by
> >> an anon function which is referencing something in the outer scope.
> >> Jquery caches these elements when it accesses a path through the data
> >> object (Why i have not really dug that deep).
> >>
> >> So when you are detaching the elements you end up with a reference
> >> having to be kept around for the closure as the cache is holding onto
> >> it and vice versa. Try calling .remove() when you pull the element
> >> from the dom.
> >>
> >>
> >>
> >>
> >> On Tue, May 22, 2012 at 10:49 AM, Michael Ridland <rid00z@gmail.com>
> >> wrote:
> >> > Hi
> >> >
> >> > I already discovered the memory leaks I'm just not sure why jquery
> >> > mobile has so many.
> >> >
> >> >
> >> >
> >> >
> >> > On Tue, May 22, 2012 at 10:47 AM, Jared Wyles
> >> > <jared.wyles@gmail.com>
> >> > wrote:
> >> >>
> >> >> Or payed attention during my talk on how to discover memory leaks!
> >> >>
> >> >> On Tue, May 22, 2012 at 10:43 AM, Mark Byers @ ibCom
> >> >> <mark.byers@ibcom.biz> wrote:
> >> >> > Hi,
> >> >> >
> >> >> > You should post it on:
> >> >> >
> >> >> > http://forum.jquery.com/jquery-mobile
> >> >> >
> >> >> > Mark Byers
> >> >> > mydigitalstructure.com
> >> >> > @mydsondemand
> >> >> >
> >> >> >
> >> >> >
> >> >> > On 22/05/2012, at 10:06 AM, Michael Ridland wrote:
> >> >> >
> >> >> > Hey Peeps
> >> >> >
> >> >> > I think I've located memory leaks in jquery mobile. I'm using
> >> >> > jquery mobile in a different way but it still shouldn't leave
> >> >> > the ghosts around. In the attached sample use the 'Empty &
> >> >> > Reload' button and you'll be able to see the memory leak.
> >> >> >
> >> >> > I've been debugging this for a few days and keep on finding more
> >> >> > issues.
> >> >> > I'm
> >> >> > not 100% sure if it's me and there's something I can do to fix
> >> >> > the issues or if it's in the framework.
> >> >> >
> >> >> > I've been looking at the code and found closures like these are
> >> >> > holding onto my detached DOM objects.
> >> >> >
> >> >> > // prevent screen drag when slider activated $( document ).bind(
> >> >> > "vmousemove", function( event ) { if ( self.dragging ) { //
> >> >> > self.mouseMoved must be updated before refresh() because it will
> >> >> > be used in the control "change" event self.mouseMoved = true; if
> >> >> > ( cType === "select" ) { // make the handle move in sync with
> >> >> > the mouse handle.removeClass( "ui-slider-handle-snapping" ); }
> >> >> > self.refresh( event ); // only after
> >> >> > refresh() you can calculate self.userModified self.userModified
> >> >> > = self.beforeStart !== control[0].selectedIndex; return false; }
> >> >> > });
> >> >> >
> >> >> >
> >> >> > if ( input.is( "textarea" ) ) {
> >> >> > var extraLineHeight = 15,
> >> >> > keyupTimeoutBuffer = 100,
> >> >> > keyup = function() {
> >> >> > var scrollHeight = input[ 0 ].scrollHeight, clientHeight =
> >> >> > input[ 0 ].clientHeight;
> >> >> >
> >> >> > if ( clientHeight < scrollHeight ) { input.height(scrollHeight +
> >> >> > extraLineHeight); } }, keyupTimeout;
> >> >> >
> >> >> > input.keyup(function() {
> >> >> > clearTimeout( keyupTimeout );
> >> >> > keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer ); });
> >> >> >
> >> >> > // binding to pagechange here ensures that for pages loaded via
> >> >> > // ajax the height is recalculated without user input $(
> >> >> > document ).one( "pagechange", keyup );
> >> >> >
> >> >> > // Issue 509: the browser is not providing scrollHeight properly
> >> >> > until the styles load if ( $.trim( input.val() ) ) { // bind to
> >> >> > the window load to make sure the height is calculated based on
> >> >> > BOTH // the DOM and CSS $( window ).load( keyup ); } }
> >> >> > <MemoryLeak.zip>
> >> >> >
> >> >> >
> >> >
> >> >
> >> >
> >> >
> >> > --
> >> >
> >> > Michael Ridland | ThinkSmart Digital Managing Director P. 0404 865
> >> > 350 E. michael@thinksmartdigital.com.au W.
> >> > www.thinksmartdigital.com.au T. www.twitter.com/rid00z L.
> >> > au.linkedin.com/in/michaelridland
> >> >
> >> >
> >> >
> >
> >
> >
> >
> > --
> >
> > Michael Ridland | ThinkSmart Digital
> > Managing Director
> > P. 0404 865 350
> > E. michael@thinksmartdigital.com.au
> > W. www.thinksmartdigital.com.au
> > T. www.twitter.com/rid00z
> > L. au.linkedin.com/in/michaelridland
> >
> >
> >
>



-- 

*Michael Ridland | ThinkSmart Digital*
Managing Director
P. 0404 865 350
E. michael@thinksmartdigital.com.au
W. www.thinksmartdigital.com.au
T. www.twitter.com/rid00z
L. au.linkedin.com/in/michaelridland


 <http://au.linkedin.com/in/michaelridland>

Re: [sydjs] jQuery Mobile with memory leaks

From:
Jared Wyles
Date:
2012-05-22 @ 01:48
Only on the child elements. Not the container it self. Which is what
you will have a reference to here.

On Tue, May 22, 2012 at 11:44 AM, Aaron Powell <me@aaron-powell.com> wrote:
> Doesn't empty clean up the data? It calls jQuery.cleanData
>
> Aaron Powell
> MVP - Internet Explorer (Development) | FunnelWeb Team Member
>
> http://apowell.me | http://twitter.com/slace | Skype: aaron.l.powell | 
Github | BitBucket
>
>
> -----Original Message-----
> From: sydjs@librelist.com [mailto:sydjs@librelist.com] On Behalf Of Jared Wyles
> Sent: Tuesday, 22 May 2012 11:40 AM
> To: sydjs@librelist.com
> Subject: Re: [sydjs] jQuery Mobile with memory leaks
>
> empty and detach will still keep the data associated with the element.
> I am surprised that remove did not work.
> Do you have a simple test case i can look at?
>
> Thanks,
> Jared.
>
> On Tue, May 22, 2012 at 11:29 AM, Michael Ridland <rid00z@gmail.com> wrote:
>> Hi Jared
>>
>> Yes, I've already done all that and found exactly what is leaking,
>> that's easy. Empty/detach etc is not working in this case.
>>
>> I've dug deep into jquery mobile and found the closures that are
>> holding onto my detached DOM objects. See below.
>>
>> I posted because I thought there might be some jQuery Mobile experts
>> that could show me a workaround.
>>
>> // prevent screen drag when slider activated $( document ).bind(
>> "vmousemove", function( event ) { if ( self.dragging ) { //
>> self.mouseMoved must be updated before refresh() because it will be
>> used in the control "change" event self.mouseMoved = true; if ( cType
>> === "select" ) { // make the handle move in sync with the mouse
>> handle.removeClass( "ui-slider-handle-snapping" ); } self.refresh(
>> event ); // only after
>> refresh() you can calculate self.userModified self.userModified =
>> self.beforeStart !== control[0].selectedIndex; return false; } });
>>
>>
>> if ( input.is( "textarea" ) ) {
>> var extraLineHeight = 15,
>> keyupTimeoutBuffer = 100,
>> keyup = function() {
>> var scrollHeight = input[ 0 ].scrollHeight, clientHeight = input[ 0
>> ].clientHeight;
>>
>> if ( clientHeight < scrollHeight ) {
>> input.height(scrollHeight + extraLineHeight); } }, keyupTimeout;
>>
>> input.keyup(function() {
>> clearTimeout( keyupTimeout );
>> keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer ); });
>>
>> // binding to pagechange here ensures that for pages loaded via //
>> ajax the height is recalculated without user input $( document ).one(
>> "pagechange", keyup );
>>
>> // Issue 509: the browser is not providing scrollHeight properly until
>> the styles load if ( $.trim( input.val() ) ) { // bind to the window
>> load to make sure the height is calculated based on BOTH // the DOM
>> and CSS $( window ).load( keyup ); } }
>>
>> On Tue, May 22, 2012 at 10:52 AM, Jared Wyles <jared.wyles@gmail.com> wrote:
>>>
>>> Well it also showed how to show exactly what is leaking and how to fix it.
>>>
>>>
>>> In this case i would assume that there is a closure being formed by
>>> an anon function which is referencing something in the outer scope.
>>> Jquery caches these elements when it accesses a path through the data
>>> object (Why i have not really dug that deep).
>>>
>>> So when you are detaching the elements you end up with a reference
>>> having to be kept around for the closure as the cache is holding onto
>>> it and vice versa. Try calling .remove() when you pull the element
>>> from the dom.
>>>
>>>
>>>
>>>
>>> On Tue, May 22, 2012 at 10:49 AM, Michael Ridland <rid00z@gmail.com>
>>> wrote:
>>> > Hi
>>> >
>>> > I already discovered the memory leaks I'm just not sure why jquery
>>> > mobile has so many.
>>> >
>>> >
>>> >
>>> >
>>> > On Tue, May 22, 2012 at 10:47 AM, Jared Wyles
>>> > <jared.wyles@gmail.com>
>>> > wrote:
>>> >>
>>> >> Or payed attention during my talk on how to discover memory leaks!
>>> >>
>>> >> On Tue, May 22, 2012 at 10:43 AM, Mark Byers @ ibCom
>>> >> <mark.byers@ibcom.biz> wrote:
>>> >> > Hi,
>>> >> >
>>> >> > You should post it on:
>>> >> >
>>> >> > http://forum.jquery.com/jquery-mobile
>>> >> >
>>> >> > Mark Byers
>>> >> > mydigitalstructure.com
>>> >> > @mydsondemand
>>> >> >
>>> >> >
>>> >> >
>>> >> > On 22/05/2012, at 10:06 AM, Michael Ridland wrote:
>>> >> >
>>> >> > Hey Peeps
>>> >> >
>>> >> > I think I've located memory leaks in jquery mobile. I'm using
>>> >> > jquery mobile in a different way but it still shouldn't leave
>>> >> > the ghosts around. In the attached sample use the 'Empty &
>>> >> > Reload' button and you'll be able to see the memory leak.
>>> >> >
>>> >> > I've been debugging this for a few days and keep on finding more
>>> >> > issues.
>>> >> > I'm
>>> >> > not 100% sure if it's me and there's something I can do to fix
>>> >> > the issues or if it's in the framework.
>>> >> >
>>> >> > I've been looking at the code and found closures like these are
>>> >> > holding onto my detached DOM objects.
>>> >> >
>>> >> > // prevent screen drag when slider activated $( document ).bind(
>>> >> > "vmousemove", function( event ) { if ( self.dragging ) { //
>>> >> > self.mouseMoved must be updated before refresh() because it will
>>> >> > be used in the control "change" event self.mouseMoved = true; if
>>> >> > ( cType === "select" ) { // make the handle move in sync with
>>> >> > the mouse handle.removeClass( "ui-slider-handle-snapping" ); }
>>> >> > self.refresh( event ); // only after
>>> >> > refresh() you can calculate self.userModified self.userModified
>>> >> > = self.beforeStart !== control[0].selectedIndex; return false; }
>>> >> > });
>>> >> >
>>> >> >
>>> >> > if ( input.is( "textarea" ) ) {
>>> >> > var extraLineHeight = 15,
>>> >> > keyupTimeoutBuffer = 100,
>>> >> > keyup = function() {
>>> >> > var scrollHeight = input[ 0 ].scrollHeight, clientHeight =
>>> >> > input[ 0 ].clientHeight;
>>> >> >
>>> >> > if ( clientHeight < scrollHeight ) { input.height(scrollHeight +
>>> >> > extraLineHeight); } }, keyupTimeout;
>>> >> >
>>> >> > input.keyup(function() {
>>> >> > clearTimeout( keyupTimeout );
>>> >> > keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer ); });
>>> >> >
>>> >> > // binding to pagechange here ensures that for pages loaded via
>>> >> > // ajax the height is recalculated without user input $(
>>> >> > document ).one( "pagechange", keyup );
>>> >> >
>>> >> > // Issue 509: the browser is not providing scrollHeight properly
>>> >> > until the styles load if ( $.trim( input.val() ) ) { // bind to
>>> >> > the window load to make sure the height is calculated based on
>>> >> > BOTH // the DOM and CSS $( window ).load( keyup ); } }
>>> >> > <MemoryLeak.zip>
>>> >> >
>>> >> >
>>> >
>>> >
>>> >
>>> >
>>> > --
>>> >
>>> > Michael Ridland | ThinkSmart Digital Managing Director P. 0404 865
>>> > 350 E. michael@thinksmartdigital.com.au W.
>>> > www.thinksmartdigital.com.au T. www.twitter.com/rid00z L.
>>> > au.linkedin.com/in/michaelridland
>>> >
>>> >
>>> >
>>
>>
>>
>>
>> --
>>
>> Michael Ridland | ThinkSmart Digital
>> Managing Director
>> P. 0404 865 350
>> E. michael@thinksmartdigital.com.au
>> W. www.thinksmartdigital.com.au
>> T. www.twitter.com/rid00z
>> L. au.linkedin.com/in/michaelridland
>>
>>
>>

Re: [sydjs] jQuery Mobile with memory leaks

From:
Michael Ridland
Date:
2012-05-22 @ 02:09
Tried that.... right now I feel like....

while(forever) {
     myhead.bang(wall);
}



On Tue, May 22, 2012 at 11:48 AM, Jared Wyles <jared.wyles@gmail.com> wrote:

> Only on the child elements. Not the container it self. Which is what
> you will have a reference to here.
>
> On Tue, May 22, 2012 at 11:44 AM, Aaron Powell <me@aaron-powell.com>
> wrote:
> > Doesn't empty clean up the data? It calls jQuery.cleanData
> >
> > Aaron Powell
> > MVP - Internet Explorer (Development) | FunnelWeb Team Member
> >
> > http://apowell.me | http://twitter.com/slace | Skype: aaron.l.powell |
> Github | BitBucket
> >
> >
> > -----Original Message-----
> > From: sydjs@librelist.com [mailto:sydjs@librelist.com] On Behalf Of
> Jared Wyles
> > Sent: Tuesday, 22 May 2012 11:40 AM
> > To: sydjs@librelist.com
> > Subject: Re: [sydjs] jQuery Mobile with memory leaks
> >
> > empty and detach will still keep the data associated with the element.
> > I am surprised that remove did not work.
> > Do you have a simple test case i can look at?
> >
> > Thanks,
> > Jared.
> >
> > On Tue, May 22, 2012 at 11:29 AM, Michael Ridland <rid00z@gmail.com>
> wrote:
> >> Hi Jared
> >>
> >> Yes, I've already done all that and found exactly what is leaking,
> >> that's easy. Empty/detach etc is not working in this case.
> >>
> >> I've dug deep into jquery mobile and found the closures that are
> >> holding onto my detached DOM objects. See below.
> >>
> >> I posted because I thought there might be some jQuery Mobile experts
> >> that could show me a workaround.
> >>
> >> // prevent screen drag when slider activated $( document ).bind(
> >> "vmousemove", function( event ) { if ( self.dragging ) { //
> >> self.mouseMoved must be updated before refresh() because it will be
> >> used in the control "change" event self.mouseMoved = true; if ( cType
> >> === "select" ) { // make the handle move in sync with the mouse
> >> handle.removeClass( "ui-slider-handle-snapping" ); } self.refresh(
> >> event ); // only after
> >> refresh() you can calculate self.userModified self.userModified =
> >> self.beforeStart !== control[0].selectedIndex; return false; } });
> >>
> >>
> >> if ( input.is( "textarea" ) ) {
> >> var extraLineHeight = 15,
> >> keyupTimeoutBuffer = 100,
> >> keyup = function() {
> >> var scrollHeight = input[ 0 ].scrollHeight, clientHeight = input[ 0
> >> ].clientHeight;
> >>
> >> if ( clientHeight < scrollHeight ) {
> >> input.height(scrollHeight + extraLineHeight); } }, keyupTimeout;
> >>
> >> input.keyup(function() {
> >> clearTimeout( keyupTimeout );
> >> keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer ); });
> >>
> >> // binding to pagechange here ensures that for pages loaded via //
> >> ajax the height is recalculated without user input $( document ).one(
> >> "pagechange", keyup );
> >>
> >> // Issue 509: the browser is not providing scrollHeight properly until
> >> the styles load if ( $.trim( input.val() ) ) { // bind to the window
> >> load to make sure the height is calculated based on BOTH // the DOM
> >> and CSS $( window ).load( keyup ); } }
> >>
> >> On Tue, May 22, 2012 at 10:52 AM, Jared Wyles <jared.wyles@gmail.com>
> wrote:
> >>>
> >>> Well it also showed how to show exactly what is leaking and how to fix
> it.
> >>>
> >>>
> >>> In this case i would assume that there is a closure being formed by
> >>> an anon function which is referencing something in the outer scope.
> >>> Jquery caches these elements when it accesses a path through the data
> >>> object (Why i have not really dug that deep).
> >>>
> >>> So when you are detaching the elements you end up with a reference
> >>> having to be kept around for the closure as the cache is holding onto
> >>> it and vice versa. Try calling .remove() when you pull the element
> >>> from the dom.
> >>>
> >>>
> >>>
> >>>
> >>> On Tue, May 22, 2012 at 10:49 AM, Michael Ridland <rid00z@gmail.com>
> >>> wrote:
> >>> > Hi
> >>> >
> >>> > I already discovered the memory leaks I'm just not sure why jquery
> >>> > mobile has so many.
> >>> >
> >>> >
> >>> >
> >>> >
> >>> > On Tue, May 22, 2012 at 10:47 AM, Jared Wyles
> >>> > <jared.wyles@gmail.com>
> >>> > wrote:
> >>> >>
> >>> >> Or payed attention during my talk on how to discover memory leaks!
> >>> >>
> >>> >> On Tue, May 22, 2012 at 10:43 AM, Mark Byers @ ibCom
> >>> >> <mark.byers@ibcom.biz> wrote:
> >>> >> > Hi,
> >>> >> >
> >>> >> > You should post it on:
> >>> >> >
> >>> >> > http://forum.jquery.com/jquery-mobile
> >>> >> >
> >>> >> > Mark Byers
> >>> >> > mydigitalstructure.com
> >>> >> > @mydsondemand
> >>> >> >
> >>> >> >
> >>> >> >
> >>> >> > On 22/05/2012, at 10:06 AM, Michael Ridland wrote:
> >>> >> >
> >>> >> > Hey Peeps
> >>> >> >
> >>> >> > I think I've located memory leaks in jquery mobile. I'm using
> >>> >> > jquery mobile in a different way but it still shouldn't leave
> >>> >> > the ghosts around. In the attached sample use the 'Empty &
> >>> >> > Reload' button and you'll be able to see the memory leak.
> >>> >> >
> >>> >> > I've been debugging this for a few days and keep on finding more
> >>> >> > issues.
> >>> >> > I'm
> >>> >> > not 100% sure if it's me and there's something I can do to fix
> >>> >> > the issues or if it's in the framework.
> >>> >> >
> >>> >> > I've been looking at the code and found closures like these are
> >>> >> > holding onto my detached DOM objects.
> >>> >> >
> >>> >> > // prevent screen drag when slider activated $( document ).bind(
> >>> >> > "vmousemove", function( event ) { if ( self.dragging ) { //
> >>> >> > self.mouseMoved must be updated before refresh() because it will
> >>> >> > be used in the control "change" event self.mouseMoved = true; if
> >>> >> > ( cType === "select" ) { // make the handle move in sync with
> >>> >> > the mouse handle.removeClass( "ui-slider-handle-snapping" ); }
> >>> >> > self.refresh( event ); // only after
> >>> >> > refresh() you can calculate self.userModified self.userModified
> >>> >> > = self.beforeStart !== control[0].selectedIndex; return false; }
> >>> >> > });
> >>> >> >
> >>> >> >
> >>> >> > if ( input.is( "textarea" ) ) {
> >>> >> > var extraLineHeight = 15,
> >>> >> > keyupTimeoutBuffer = 100,
> >>> >> > keyup = function() {
> >>> >> > var scrollHeight = input[ 0 ].scrollHeight, clientHeight =
> >>> >> > input[ 0 ].clientHeight;
> >>> >> >
> >>> >> > if ( clientHeight < scrollHeight ) { input.height(scrollHeight +
> >>> >> > extraLineHeight); } }, keyupTimeout;
> >>> >> >
> >>> >> > input.keyup(function() {
> >>> >> > clearTimeout( keyupTimeout );
> >>> >> > keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer ); });
> >>> >> >
> >>> >> > // binding to pagechange here ensures that for pages loaded via
> >>> >> > // ajax the height is recalculated without user input $(
> >>> >> > document ).one( "pagechange", keyup );
> >>> >> >
> >>> >> > // Issue 509: the browser is not providing scrollHeight properly
> >>> >> > until the styles load if ( $.trim( input.val() ) ) { // bind to
> >>> >> > the window load to make sure the height is calculated based on
> >>> >> > BOTH // the DOM and CSS $( window ).load( keyup ); } }
> >>> >> > <MemoryLeak.zip>
> >>> >> >
> >>> >> >
> >>> >
> >>> >
> >>> >
> >>> >
> >>> > --
> >>> >
> >>> > Michael Ridland | ThinkSmart Digital Managing Director P. 0404 865
> >>> > 350 E. michael@thinksmartdigital.com.au W.
> >>> > www.thinksmartdigital.com.au T. www.twitter.com/rid00z L.
> >>> > au.linkedin.com/in/michaelridland
> >>> >
> >>> >
> >>> >
> >>
> >>
> >>
> >>
> >> --
> >>
> >> Michael Ridland | ThinkSmart Digital
> >> Managing Director
> >> P. 0404 865 350
> >> E. michael@thinksmartdigital.com.au
> >> W. www.thinksmartdigital.com.au
> >> T. www.twitter.com/rid00z
> >> L. au.linkedin.com/in/michaelridland
> >>
> >>
> >>
>



-- 

*Michael Ridland | ThinkSmart Digital*
Managing Director
P. 0404 865 350
E. michael@thinksmartdigital.com.au
W. www.thinksmartdigital.com.au
T. www.twitter.com/rid00z
L. au.linkedin.com/in/michaelridland


 <http://au.linkedin.com/in/michaelridland>