1

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

<!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>

ScreenManager.js

Gracias y un saludo.

2
  • Consideraste utilizar algun timer que recargue la pagina cada X cantidad de horas? Podrias validarlo con el mismo ajax recursivo que estas utilizando haciendo expirar el contenido en un horario donde nadie este monitoreando. Commented el 3 feb. 2017 a las 16:19
  • @MaxDominguez actualmente es lo que usamos, un plugin de chrome para refrescar cada x horas la pagina y limpiar memoria, aunque no es lo mejor funciona. Aún así he migrado el código a angularjs para usar databinding y tener todas las vistas cargadas de inicio. Solo voy por los datos que me hacen falta aunque no ha sido probada esta versión aún. gracias por el interés un saludo :D Commented el 10 abr. 2017 a las 12:41

1 respuesta 1

1

Creo que es necesario más código para darte una respuesta firme:

  1. Revisa los setTimeout que estés utilizando.
  2. Elimina los elementos antiguos (solo veo que estás haciendo un append, pero no veo dónde estás haciendo el remove o el empty del parent).
  3. Evita almacenar elementos del DOM en variables que no vas a limpiar (e.g. this.$el = $('.selector'). Si hay una referencia a un elemento del DOM, pese a que se haya eliminado del DOM, permanecerá en memoria.

Respecto a tu pregunta sobre los iframes, en stackoverflow (inglés) he encontrado este artículo en el que te recomienda que recargues el iframe antes de eliminarlo:

var frame = document.getElementById("myframe");
frame.src = "about:blank";

Y que el propio iframe elimine los datos que pueda almacenar (referencias incluidas):

window.onbeforeunload = function(){
    $(document).unbind().die();    //remove listeners on document
    $(document).find('*').unbind().die(); //remove listeners on all nodes
    //clean up cookies
    /remove items from localStorage
}

Nunca he utilizado iframes de forma intensiva, me parece un caso interesante y lo seguiré hasta que lo resuelvas :)

1
  • Muchas Gracias , tiene mucho sentido el limpiar el iframe, aun así, crearé un ejemplo entero del código para que se entienda perfectamente y puedas debugarlo. un saludo Commented el 1 dic. 2016 a las 8:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.