Discussion :

[Tron01]

Bonjour à tous,

Je suis en train de modifier une application jquery qui me permet de créer un e-book, l’outil ce nomme Bookblock http://tympanus.net/codrops/2012/09/...t-flip-plugin/.
Actuellement j'ai inséré des vidéos dans mes différentes pages, mais je me rend compte que Firefox utilise bien trop de mémoire pour charger les pages. (je n'ai pas de problème avec Chrome ou Opéra quoi que ça utilise quand même pas mal de mémoire, mais pas autant que sous Firefox).
Firefox semble charger mes différentes vidéos dans la ram, et à chaque changement de page, il continu à charger de nouveau les vidéos, jusqu'au plantage du programme.
Si je retire les vidéos, je n'ai plus de soucis au niveau de la mémoire.
En regardant le gestionnaire des tâches et la console de firebug, je pense avoir trouvé une partie de mon problème

Voici une partie de la fonction qui permet de charger et d'afficher le contenu des pages

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
_layout: function(dir) {
            var self = this,
                // basic structure:
                // 1 element for the left side.
                $s_left = this._addSide('left', dir),
                // 1 element for the flipping/middle page
                $s_middle = this._addSide('middle', dir),
                // 1 element for the right side
                $s_right = this._addSide('right', dir),
                // overlays
                $o_left = $s_left.find('div.bb-overlay'),
                $o_middle_f = $s_middle.find('div.bb-flipoverlay:first'),
                $o_middle_b = $s_middle.find('div.bb-flipoverlay:last'),
                $o_right = $s_right.find('div.bb-overlay'),
                speed = this.end ? 400 : this.options.speed;
            this.$items.hide();
 
            this.$el.prepend($s_left, $s_middle, $s_right);

Les variables $s_left $s_middle $s_right contiennent des objets, qui sont le contenu de mes différentes pages.
La mémoire alloué augmente de 40-50mo à chaque passage sur la fonction _addSide.

Voici la fonction _addSide, qui sélectionne le contenu des pages en fonction du type de clique.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
_addSide: function(side, dir) {
        var $side;
 
        switch (side) {
 
        case 'left':
 
            $side = $('<div class="bb-page"><div class="bb-back"><div class="bb-outer"><div class="bb-content" style="width:' + this.elWidth + 'px"><div class="bb-inner">' + (dir === 'next' ? this.$current.html() : this.$nextItem.html()) + '</div></div><div class="bb-overlay"></div></div></div></div>').css('z-index', 102);
            break;
 
        case 'middle':
            $side = $('<div class="bb-page"><div class="bb-front"><div class="bb-outer"><div class="bb-content" style="left:' + (-this.elWidth / 2) + 'px;width:' + this.elWidth + 'px"><div class="bb-inner">' + (dir === 'next' ? this.$current.html() : this.$nextItem.html()) + '</div></div><div class="bb-flipoverlay"></div></div></div><div class="bb-back"><div class="bb-outer"><div class="bb-content" style="width:' + this.elWidth + 'px"><div class="bb-inner">' + (dir === 'next' ? this.$nextItem.html() : this.$current.html()) + '</div></div><div class="bb-flipoverlay"></div></div></div></div>').css('z-index', 103);
            break;
 
        case 'right':
 
            $side = $('<div class="bb-page"><div class="bb-front"><div class="bb-outer"><div class="bb-content" style="left:' + (-this.elWidth / 2) + 'px;width:' + this.elWidth + 'px"><div class="bb-inner">' + (dir === 'next' ? this.$nextItem.html() : this.$current.html()) + '</div></div><div class="bb-overlay"></div></div></div></div>').css('z-index', 101);
            break;
 
        }
        return $side;
 
    }

Maintenant, je n'arrive pas à comprendre pourquoi et comment les données de la page précédente sont stockées, malgré le changement de page.
Est-ce au niveau de la sélection du contenu à insérer dans les pages ?
Jquery met-il mes vidéos dans des variables, qu'il ne supprime pas ?

Merci d'avance pour vos réponses.

[SpaceFrog]

Quand tu parles de chargement de page , tu parles de celle du book ?
il charge les videos par ajax... tu reste donc sur la page principale sans rechargement, tout se charge donc sur la même page

[Tron01]

Merci pour ta réponse SpaceFrog.

Quand tu parles de chargement de page , tu parles de celle du book ?

Oui je parle bien du book.
J'avoue que je débute en jquery et Ajax, y'aurait-il un moyen de décharger ce qui ne m’intéresse plus au fur et à mesure?

[SpaceFrog]

pas à ma connaissance.
un remove enlèverait l'objet du flux de la page mais pas de la mémoire

[Tron01]

Je suis étonné qu'il n'y est aucun moyen de supprimer la mémoire alloué:
J'avais fait un:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $('video').remove();

, ce qui me supprime bien entendu toutes mes vidéos, mais libère aussi la mémoire.
Le problème c'est que je me retrouve sans aucune vidéo à la fin, et il faut recharger la page web pour revenir à l'état initial.

[SpaceFrog]

soit plus selectif au niveau du selecteur jquery ...

[Tron01]

C'était un exemple, que je choisisse une vidéo en fonction d'un id ou toutes les vidéos.

[SpaceFrog]

si tu supprimes sur un id il te supprime toutes les vidéos ?

[Tron01]

Non.
Ce que je veux dire c'est que la vidéo supprimé est définitivement supprimé.
j'avais fait un script, qui sélectionne l'id de la page précédemment chargé pour faire un remove(), une fois que la page suivante est affichée.
Ce qui libère bien la mémoire de page en page mais toutes les vidéos sont supprimées, une fois qu'on a terminé de lire le e-book.

[SpaceFrog]

Tu es contradictoire dans tes explications ...

Tu veux supprimer a chaque nouvelle video la video précédente ...
Mais à le finc tu veux que les vidéos soient conservées ...

[Darkaurora]

Effectivement c'est un casse tête cette histoire...

SpaceFrog a raison ! Si tu souhaites garder les vidéos mais pas la mémoire alloué ça va être difficile.

Si le remove() supprime non seulement l'élément mais libère aussi la mémoire peut être vaudrait il mieux décharger l'élément précédent au chargement de l'élément suivant.

[Tron01]

Tu es contradictoire dans tes explications ...

Tu veux supprimer a chaque nouvelle video la video précédente ...
Mais à le finc tu veux que les vidéos soient conservées ...

J'ai mal expliqué.
L'utilisateur tourne les pages du e-book qui contient des vidéos, les vidéos sont chargées dans la mémoire à chaque fois que l'utilisateur tourne une page.
En tournant 10 pages ( avec une vidéo par page), je me retrouve avec 1go de mémoire alloué, et ainsi de suite jusqu'au plantage.
A partir d'un moment je dois décharger les vidéos que l'utilisateur ne visionne pas, mais les remove() supprime l'élément.
Si l'utilisateur veut revenir à la page précédente il faut la recharger dans ce cas la.

[SpaceFrog]

Oui bien entendu ...
soit tu conserves la video et elle sera accessible immediatement,
soit tu la remove() mais du coup faudra la recharger.

Pas d'alternative possible

[Darkaurora]

Si j'ai bien compris ton explication tu souhaites le beurre, l'argent du beurre et le cul de la crémière là

Malheureusement c'est le plus viable possible.

Tu charges la vidéo suivante lorsque l'utilisateur change de page une fois chargé tu supprime la vidéo précédente.

Tu n'es pas obligé de supprimer l'élément parent qui contient la vidéo mais juste la vidéo en elle même. Ainsi tu préserves ton "book" et tu auras un fonctionnement plus fluide et plus logique.

[SpaceFrog]

tu peux essayer avec detach() au lieu de remove() mais je ne suis pas sur que la video soit supprimée de la mémoire, a mon avis elle y restera.
le detach ne doit supprimer que du DOM ...

[Tron01]

Merci à vous de suivre toujours le sujet et pour vos réponses.
J'ai testé un bout de code pour supprimer et rajouter les vidéos.
Je me rend compte que:
remove() et detach() ne supprime pas la mémoire ou très peu.
Par contre quand les vidéos sont retirés, jquery n'alloue plus trop de mémoire, mais garde en mémoire les vidéos précédement chargées.
J'en conclus que le problème vient toujours des vidéos, mais que je n'arrive toujours pas a les supprimer de la mémoire.
Peut-être que je m'y prend mal

Ci-joint mon code ( attention c'est principalement en dur).

je déclare mon objet $toto qui est une copie de toutes les vidéos.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function() {
	var $container = $( '#container' ),
		$bookBlock = $( '#bb-bookblock' ),
		$items = $bookBlock.children(),
		itemsCount = $items.length,
		current = 0,
		$toto=$("video").clone(true),

Lorsque qu'un utilisateur clique sur un bouton next( qui est une fonction pour passer de page en page), une autre fonction est lancée pour supprimer toutes les vidéos, et ajouter les vidéos de $toto en fonction de la page courante du ebook.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function supprimeitem(idx){
	switch(idx)  //idx est le numéro de page{
                //En fonction de la page j’intègre ou je supprime les vidéos. 
		case (1): for(var i =1;i<=itemsCount;i++){
			if(i==3){
				if($('#video2').get(0)==undefined){$("#separation2").append($toto[1].outerHTML);}
			}
			else if (i==4){ 
				$("#separation3").append($toto[2].outerHTML);
			}
			else {$('#video'+i).detach();}
		}
		break; ...

Les vidéos s'ajoutent et ce suppriment bien, mais la mémoire ne suit toujours pas.

[Darkaurora]

Je ne connais pas réellement le fonctionnement ni de ton script ni du chargement des vidéos.

Si à chaque fois que tu tournes une page tu charge la vidéo en mémoire alors il faut changer de fonctionnement.

Essaye de la charger lorsque tu appuis sur un bouton "play" par exemple.

Ma réponse est peut être complètement fausse, ne maîtrisant pas cette technologie, mais je pense que le raisonnement apporté est un début de réponse.

[danielhagnoul]

Bonsoir

Pour libérer la mémoire, je vous suggère de tester le code ci-dessous.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$( ".videoContainer" )
    .find( "video" ).each( function( i, item ){
        item.pause();
        delete( item );
        $( item ).remove();
    })
    .empty();

L'utilisation du delete( item ) et puis du $( item ).remove() serait nécessaire selon ce que j'ai lu sur un forum anglophone.

Si j'ai bien compris, le navigateur n'essaye pas de récupérer la mémoire tant que l'élément parent des vidéos supprimées n'est pas explicitement vidé par un empty().

[Darkaurora]

Pour information et suite à ça, je n'ose pas utiliser la commande delete.

Pourrais tu m'expliquer ce qu'il en est ?

[danielhagnoul]

Vous pouvez commencer par essayer le code sans le delete pour voir le résultat.

Si le code sans delete ne fonctionne pas, j'en pense que le fait que delete ne marche pas partout et toujours ne vous empêche pas de faire plusieurs tests (si vous obtenez le résultat espéré ce qui n'est pas encore prouvé) sur plusieurs jours, avec plusieurs navigateurs récents et obsolètes, pour être certain que l'utilisation de ce code.n'est pas source de problèmes.