Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Apr 2007
    Posts
    164
    Vote Rating
    0
    vladsch is on a distinguished road

      0  

    Default High memory consumption in IE9 iframe

    High memory consumption in IE9 iframe


    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.1.1

    Browser versions tested against:
    • IE9

    DOCTYPE tested against:
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Description:
    • If use ExtJS 4.1.1 in the iframe under IE9 (tested in MS VISTA) then after few iframe refreshed the memory consumption is very high

    Steps to reproduce the problem:
    The result that was expected:
    • Low memory consumption

    The result that occurs instead:
    • For me, memory consumption is 714 MB for iexplorer.exe process (in Windows TaskManager)


    HELPFUL INFORMATION

    See this URL for live test case: http://docs.sencha.com/ext-js/4-1/#!...arts/Area.html


    Debugging already done:
    • none

    Possible fix:
    • not provided

    Additional CSS used:
    • only default ext-all.css
    • custom css (include details)

    Operating System:
    • MS VISTA SP2

  2. #2
    Sencha User
    Join Date
    Apr 2007
    Posts
    164
    Vote Rating
    0
    vladsch is on a distinguished road

      0  

    Default


    The problem is reproducible in Chrome v21 also
    For example,
    1. Open http://docs.sencha.com/ext-js/4-1/#!/example ( memory in TaskManager 110 MB )
    2. Open all samples from Chart group ( memory 308 MB )
    3. Close All samples tabs
    4. Memory is not decreased
    5. Open all samples from Grid group ( memory 558 MB )
    6. Close all samples Tab
    7. Memory is not decreased ( still 558 MB )

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha User
    Join Date
    Apr 2007
    Posts
    164
    Vote Rating
    0
    vladsch is on a distinguished road

      0  

    Default


    May be but the problem occurs in Chrome also. Under FF situation is better bot not good also
    The issue occurs only if an iframe with extjs is used in a page

  5. #5
    Sencha User
    Join Date
    Apr 2007
    Posts
    164
    Vote Rating
    0
    vladsch is on a distinguished road

      0  

    Default


    is it really ExtJS memory leaking (if extjs in iframe page then brwser doesn't release a memory after iframe destroying)? Or the issue is not related with ExtJS?
    Just such issue is not observed with ExtJS 3.x

  6. #6
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    113
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Hi Mitchell,

    Please clarify is there any update on this issue?

  7. #7
    Sencha User
    Join Date
    Apr 2007
    Posts
    164
    Vote Rating
    0
    vladsch is on a distinguished road

      0  

    Default


    Bump
    Can you somebody to clarify whether it will be considered as a bug? If yes then could we expect any memory improvements in 4.2?
    Thanks in advance for any info

  8. #8
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    113
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Could someone provide any info on this issue, please?

  9. #9
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,167
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    It's not quite as straight forward.

    outer.html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Outer</title>
        <script type="text/javascript">
            setInterval(function(){
                document.getElementById('frame').contentWindow.location.reload(true);
            }, 1000);
        </script>
    </head>
    <body>
        <iframe id="frame" style="width: 600px; height: 600px;" src="inner.html"></iframe>
    </body>
    </html>
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Test</title>
        <script type="text/javascript" src="../extjs-4.1.2/ext-all.js"></script>
        <script type="text/javascript">
            setTimeout(function(){
                document.body.innerHTML = new Date().toString();
            }, 500);
        </script>
    </head>
    <body>
    </body>
    </html>
    When I look at the memory consumption, it jumps all over the place, but on my machine (IE9, Win7) it always ends up around 109MB as a settling point. The memory does increase slightly over time, however I see the same kind of behaviour with jquery. Obviously the jumps in memory are less severe because the library is smaller, but it's the same thing on a smaller scale.

    The problem is more likely in the application code, since the same thing should be reproducible with just loading the library.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  10. #10
    Sencha User
    Join Date
    Oct 2012
    Posts
    1
    Vote Rating
    0
    JulianPreece is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    It's not quite as straight forward.<br>
    <br>
    outer.html<br>
    Code:
    <br>
    &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;<br>
    &lt;html&gt;<br>
    &lt;head&gt;<br>
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;<br>
    &nbsp;&nbsp; &nbsp;&lt;title&gt;Outer&lt;/title&gt;<br>
    &nbsp;&nbsp; &nbsp;&lt;script type="text/javascript"&gt;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;setInterval(function(){<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById('frame').contentWindow.location.reload(true);<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;}, 1000);<br>
    &nbsp;&nbsp; &nbsp;&lt;/script&gt;<br>
    &lt;/head&gt;<br>
    &lt;body&gt;<br>
    &nbsp;&nbsp; &nbsp;&lt;iframe id="frame" style="width: 600px; height: 600px;" src="inner.html"&gt;&lt;/iframe&gt;<br>
    &lt;/body&gt;<br>
    &lt;/html&gt;<br>
    <br>
    <br>
    Code:
    <br>
    &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;<br>
    &lt;html&gt;<br>
    &lt;head&gt;<br>
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;<br>
    &nbsp;&nbsp; &nbsp;&lt;title&gt;Test&lt;/title&gt;<br>
    &nbsp;&nbsp; &nbsp;&lt;script type="text/javascript" src="../extjs-4.1.2/ext-all.js"&gt;&lt;/script&gt;<br>
    &nbsp;&nbsp; &nbsp;&lt;script type="text/javascript"&gt;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;setTimeout(function(){<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.body.innerHTML = new Date().toString();<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;}, 500);<br>
    &nbsp;&nbsp; &nbsp;&lt;/script&gt;<br>
    &lt;/head&gt;<br>
    &lt;body&gt;<br>
    &lt;/body&gt;<br>
    &lt;/html&gt;<br>
    <br>
    <br>
    When I look at the memory consumption, it jumps all over the place, but on my machine (IE9, Win7) it always ends up around 109MB as a settling point. The memory does increase slightly over time, however I see the same kind of behaviour with jquery. Obviously the jumps in memory are less severe because the library is smaller, but it's the same thing on a smaller scale.<br>
    <br>
    The problem is more likely in the application code, since the same thing should be reproducible with just loading the library.
    <br><br>I've made an example because we are also having problems with memory usage relating to adding and removing Iframes from urls, if you run the example without the ext-js file linked and watch the memory usage while clicking add and remove it'll settle to roughly around what it starts at, maybe 1 or 2k difference which I've always seen drop down to what it starts at after enough time.<br><br>Now if you put the ext-js file reference back and do the same the memory usage goes insane!! i had it up to 200mb+ in a few seconds, this is clearly a leak somewhere in a framework, if Jquery had such a leak the memory usage wouldn't go down but with ext it just keeps going up! is it perhaps because both the child and parent have the ext framework so the child frame interacts with the parent which doesn't get cleaned up on unload of the iframe? If so this is a big problem for us as we use a heavy tab system and once you start using ext controls the memory usage becomes even worse, I had crome at 2gb+ on the sencha examples alone!!<br><br>Are you sure there is nothing that can be done since this is almost a game breaker for us (we are using Ext.Net but the example shows its clearly a JS problem)<br><br>Example:<br>Main page<br>
    Code:
    &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;<br>&lt;html&gt;<br>&lt;head&gt;<br>&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;title&gt;Outer&lt;/title&gt;<br>&nbsp;&nbsp; &nbsp;&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"&gt;&lt;/script&gt;<br>&nbsp;&nbsp; &nbsp;&lt;script type="text/javascript" src="ext-all.js"&gt;&lt;/script&gt;<br>&nbsp;&nbsp;&nbsp; &lt;script type="text/javascript"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(function() {<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$("#add").click(function() {<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if($("#iframe").length == 1) return;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$("#frame").append('&lt;iframe id="iframe" style="width: 600px; height: 600px;" src="iframe.html"&gt;&lt;/iframe&gt;');<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;});<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$("#remove").click(function() {<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$("#iframe").remove();<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;});<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;});<br>&nbsp;&nbsp;&nbsp; &lt;/script&gt;<br>&lt;/head&gt;<br>&lt;body&gt;<br>&nbsp;&nbsp;&nbsp; &lt;a href="#" id="add"&gt;Add&lt;/a&gt;<br>&nbsp;&nbsp; &nbsp;&lt;a href="#" id="remove"&gt;Remove&lt;/a&gt;<br>&nbsp;&nbsp; &nbsp;&lt;div id="frame"&gt;<br>&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;&lt;/div&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;
    <br><br>Iframe:<br>
    Code:
    &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;<br>&lt;html&gt;<br>&lt;head&gt;<br>&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;title&gt;Outer&lt;/title&gt;<br>&nbsp;&nbsp; &nbsp;&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"&gt;&lt;/script&gt;<br>&nbsp;&nbsp; &nbsp;&lt;script type="text/javascript" src="ext-all.js"&gt;&lt;/script&gt;<br>&lt;/head&gt;<br>&lt;body&gt;<br>&nbsp;&nbsp;&nbsp; Added<br>&lt;/body&gt;<br>&lt;/html&gt;
    <br><br>Julian