Buenas,

Tengo una web que debe estar siempre corriendo en un monitor a modo de información para la gente que entra en la empresa pueda ver noticias , datos economicos etc.

La página principal gestiona el resto de pantallas que se van mostrando creando efecto slider hacia la izquierda agregando iframes y eliminándolos.

Con la primera carga y con cada vuelta completa un objeto llamado ScreenManager realiza una consulta por ajax para obtener que pantallas debe mostrar y que tiempo le da a cada una.


Este objeto se encarga de crear elementos iframe para la pagina actual y la siguiente, ademas de insertarlas en el contenedor correspondiente para realizar el efecto slide.


El caso es que funciona bastante bien durante 1 día completo más o menos, pero al volver al trabajo al día siguiente nos encontramos una pagina por defecto de Google Chrome indicando que se ha quedado sin memoria.


Entiendo que el error debe estar en la página principal que es donde se instancia el objeto ScreenManager que es el que realiza el Ajax.

Elegí el uso de iframes ya que se pueden configurar dos pantallas seguidas con diferente idioma (y el código javascript de cada pantalla se pegaba con su versión en otro idioma en el caso de ir una detrás de la otra) y también porque entendí que al ir removiendo los iframes la memoria usada por las sub-pantallas se liberaría inmediatamente.

¿ alguien tiene idea de como optimizar el uso de memoria?
¿ debo asignar la variable Screens a null antes de hacer el Ajax para limpiarla?
¿ el uso de iframes aumenta considerablemente el uso de memoria a largo plazo?


Para que tengáis una idea más clara del código os dejo un ejemplo:
Home.html

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF8"/>
        <style>
        #Mask{position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-color:         transparent; z-index: 1000000;}
    </style>
    </head>
    <body>
        <div id="main"></div>
        <div id="Mask">
            <!-- Zone to control key events , because we lose the events in iframes.pages -->
        </div>
        <!-- Scripts -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script>
    $.fn.ScreenManager = function (options) {

        /**
         * Helpper var to this 
         */
        var PL = this;

        /**
         * RebindData
         */
        this.RebindData = function (firstTime) { 
            /** the original code is ajax request **/
            PL.DataManager.CurrentPage = 0;
                    PL.NextScreenLoad = true;
            /** fake Screen Array Objects **/
                    PL.DataManager.ScreensData = [
                    {
                      Title:"Wikipedi Javascript",
                      Controller:'https://es.wikipedia.org/wiki/JavaScript',
                      TimeToNext:10 //seconds
                    },
                    {
                      Title:"wikipedia home",
                      Controller:'https://es.wikipedia.org/wiki/Wikipedia:Portada',
                      TimeToNext:10 //seconds
                    }];
                    if (firstTime)
                        PL.ChargeFirstScreen();
                    else { 
                        PL.ChargeScreen();
                    }
        }

        this.ChargeFirstScreen = function () { 
            PL.NextScreenLoad = false;

            var screen = PL.DataManager.ScreensData[0];
            $(document).prop('title', screen.Title); 
             
            var firstScreen = $(PL.DataManager.PageHTML);
            PL.PrevTitle = screen.Title;

            firstScreen.attr("src", screen.Controller);
            firstScreen.addClass('current');
            firstScreen.css('left','0px');
            firstScreen.load(function () {
                try {
                    //this is for prevent init screen efects on document ready 
                    //$(PL).find('iframe.current')[0].contentWindow.InitOnCharge();
                } catch (e) {
                    window.location.href = window.location.href;
                } 
            });

            $(PL).append(firstScreen); 

            if (!PL.CheckIfRebind(screen, true)) {
                PL.DataManager.CurrentPage = PL.WhatIsTheNext();
                var screen2 = PL.DataManager.ScreensData[PL.DataManager.CurrentPage];
                PL.PrintTheNextScreen(screen2, PL.WhatIsTheNext());
                PL.TransitionTimeOut = setTimeout(function() {
                    PL.ChargeScreen();
                }, screen.TimeToNext * 1000);

            }  
        }

        this.CheckIfRebind = function (screen, firstTime) {

            if (PL.WhatIsTheNext() == 0) {
                if (firstTime) {
                    PL.PrintTheNextScreen(screen,0);
                    PL.TransitionTimeOut = setTimeout(function () {
                        PL.RebindData(false);
                    }, screen.TimeToNext * 1000);
                }
                return true;
            } else {
                return false;
            }
        }

        this.PrintTheNextScreen = function (screen,n) {
            var nextScreen = $(PL.DataManager.PageHTML);
            PL.PrevTitle = screen.Title;
            nextScreen.attr("src", screen.Controller);
            nextScreen.addClass('next');
            nextScreen.load(function () {
                PL.NextScreenLoad = true;
            });
            $(PL).append(nextScreen);

        }

        this.NextScreen = function (screen) {
            //clean the  global vars 
            PL.NextScreenLoad = false; 

            $(document).prop('title', PL.PrevTitle);

            PL.PrevTitle = screen.Title;

            $(PL).find('.current').animate({
                left: '-100%'
            }, 'slow', function () {
                $(this).remove();
            });

            $(PL).find('.next').animate({
                left: '0%'
            }, 'slow', function () {

                $(this).removeClass('next').addClass('current');

                try {
                   //this is for prevent init screen efects on document ready 
                    //$(PL).find('iframe.current')[0].contentWindow.InitOnCharge();
                } catch (e) {
                    window.location.href = window.location.href;
                }
                

                if (PL.WhatIsTheNext() == 0) {
                    PL.DataManager.CurrentPage =  PL.WhatIsTheNext();
                    PL.PrintTheNextScreen(PL.DataManager.ScreensData[PL.DataManager.CurrentPage], PL.DataManager.CurrentPage);
                    PL.TransitionTimeOut = setTimeout(function () {
                        PL.RebindData(false);
                    }, screen.TimeToNext * 1000);

                } else {
                    PL.DataManager.CurrentPage ++;
                    PL.PrintTheNextScreen(PL.DataManager.ScreensData[PL.DataManager.CurrentPage], PL.DataManager.CurrentPage);
                    PL.TransitionTimeOut = setTimeout(function() {
                        PL.ChargeScreen();
                    }, screen.TimeToNext * 1000);
                }
            });
             
        }

        this.WhatIsTheNext = function() {
            if (PL.DataManager.CurrentPage == PL.DataManager.ScreensData.length - 1)  
                return 0; 
            else return PL.DataManager.CurrentPage+1;
        }

        this.WhatIsThePrev = function () {
            if (PL.DataManager.CurrentPage != 0)
                return PL.DataManager.CurrentPage -1;
            else return PL.DataManager.ScreensData.length-1;
        }

        this.ChargeScreen = function () { 
            if (PL.NextScreenLoad) {
                    PL.NextScreen(PL.DataManager.ScreensData[PL.DataManager.CurrentPage]);
            }
            else
                PL.TransitionTimeOut = setTimeout(function () {
                    PL.ChargeScreen();
                }, 10); 
        }

        /**
         * Initialize function
         */ 
        this.Initialize = function () { 
            if (this.Select != '' || this.Select != null) {
                $(this).css({
                    position: 'absolute',
                    width: '100%',
                    height: '100%',
                    top: '0px',
                    left: '0px',
                    overflow: 'hidden'
                });

                this.RebindData(true); 
            }
            else
                alert("Hay un error en el parametro Select de Screen Manager");
        }
        /**
         * Properties
         */
        this.Select = options.Select;
        this.TransitionTimeOut = false;
        this.NextScreenLoad = false; 
        this.PrevTitle = null; 

        //default Configuration
        this.DataManager = {
            ScreenTimeToNext: 30, 
            CurrentPage: 0,
            ScreensData: [],
            PageHTML: '<iframe style="position: absolute;width: 100%; height: 100%;left:100%;top:0px;border:none;" class="page" />'
        } 
        //run Init
        this.Initialize();

        //set this plugin to data element
        this.data('ScreenManager', this); 

        //return this plugin
        return this;
    }
    </script>
        <script>
          var ScreenManager = null;
          $(document).ready(function() {
            ScreenManager = $('#main').ScreenManager({
                Select: 'UrlToGetScreensJson', Callback: "InitOnCharge"
            });
            $(document).keydown(function(e) {
                if (e.keyCode == 39) {
                    clearInterval(ScreenManager.TransitionTimeOut);
                    ScreenManager.ChargeScreen();
                }
            });
          });
        </script> 
    </body>
    </html>

<!-- end snippet -->

ScreenManager.js


Gracias y un saludo.