javascript - AJAX based application memory leak? -
i'm making mobile app using phone gap (html, css , javascript/jquery). application mobile interface larger website, , uses ajax load web pages , display them.
my application loads pages follows:
the html in question looks this:
<div class="content"> </div> and snippet of java code displays content:
if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid("content").innerhtml = ""; var obj = json.parse(xmlhttp.responsetext); document.getelementbyid("content").innerhtml = obj["data"]; } basically, response contains json data html displayed in <div> element mentioned setting it's innerhtml.
however after loading few pages, app crashed on android device. since seemed less responsive between pages (ajax pages), figured sort of memory leak. examined web application in chrome, took memory profiles , found memory footprint increasing between pages. i'm not expert on chrome developer tools, caught eye these "detached dom tree" appeared after loading second page indicates first page's dom elements weren't freed memory when new ajax page loaded.
what cause these dom elements not freed properly? innerhtml = ""; not proper way clear of dom elements element?
i prefer keep application pure ajax, if have physically switch pages clear memory properly, guess don't have choice.
as far know, if still references objects, dom objects, gc won't collect them. goes elements, if removed dom. check code these.
also:
shouldn't caching
document.getelementbyid("content")? calling them on , on not change it's value. store in variable instead.and
innerhtmlshould replace all element's contents. no need clear before putting stuff.if debugging return, shouldn't logging
consoleor something?
like this:
var content = document.getelementbyid("content"); ... if (xmlhttp.readystate==4 && xmlhttp.status==200) { var obj = json.parse(xmlhttp.responsetext); content.innerhtml = obj["data"]; }
Comments
Post a Comment