locked
Memory leaks when embed YouTube videos in Metro App using iframe.

    Question

  • Hi, 

    I want to play some YouTube video in my Metro app. I embed YouTube video in my app using YouTube Iframe API. Then I meet a serious problem of memory leak. If I embed a YouTube video and then remove it, the memory will increase about 5MB and nerver decrease any more. Demo code is here:

    default.html:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>iframeTest</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
        <!-- iframeTest references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
    </head>
    <body style ="">   
        <button id="remove" style="display:block; float:left;">remove a video</button>
        <button id="add" style="display:block; float:left;">add a video</button>
    </body>
    </html>

    default.js fragment:

     document.getElementById("remove").addEventListener("click", function () {
                var ifrs = document.querySelectorAll('div');
                if (ifrs.length > 0) {
                    document.body.removeChild(ifrs[ifrs.length - 1]);
                }
            });
            document.getElementById("add").addEventListener("click", function(){
                var testYoutubeDiv = document.createElement('div');
                testYoutubeDiv.style.cssFloat = 'left';
                testYoutubeDiv.style.width = '400px';
                testYoutubeDiv.style.height = '300px';
                MSApp.execUnsafeLocalFunction(function () {
                    testYoutubeDiv.innerHTML = "<iframe id='player' type='text/html' width='400' height='300' src='http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com' frameborder='0'></iframe>";
    
                });
                document.body.appendChild(testYoutubeDiv);
            });

    Then, I write a similar .html file and test it in IE10.0 and Chrome. I find IE10.0 also has memory leak problem but chrome has not. And the memory leak problem in IE10.0 is less serious than in Metro App.

    test html code was here:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>iframeTest</title>
    <script type = "text/javascript">
        function load() {
            document.getElementById("remove").addEventListener("click", function () {
                var ifrs = document.querySelectorAll('div');
                if (ifrs.length > 0) {
                    document.body.removeChild(ifrs[ifrs.length - 1]);
                }
            });
            document.getElementById("add").addEventListener("click", function () {
                var testYoutubeDiv = document.createElement('div');
                testYoutubeDiv.style.cssFloat = 'left';
                testYoutubeDiv.style.width = '400px';
                testYoutubeDiv.style.height = '300px';
                testYoutubeDiv.innerHTML = "<iframe id='player' type='text/html' width='400' height='300' src='http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com' frameborder='0'></iframe>"; 
                document.body.appendChild(testYoutubeDiv);
            });
        }
    </script>
    </head>
    <body onload ="load()">
        <button id="remove" style="display:block; float:right;">remove a video</button>
        <button id="add" style="display:block; float:right;">add a video</button>
    </body>
    </html>


    • Edited by Lattimore Wednesday, March 27, 2013 4:52 AM
    Wednesday, March 27, 2013 4:51 AM

All replies

  • We can file a bug on this but that's probably about it.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Wednesday, March 27, 2013 3:42 PM
    Moderator