Gestion mémoire en JavaScript

Version imprimable

04/03/2014, 03h18
artotal

Gestion mémoire en JavaScript

Bonjour,
j'ai un fichier javascript volumineux de 650 ligne et j'utilise jquery pour le DOM.
Apres une heure d'utilisation de l'application "plugin wordpress", j'arrive a plus de 800 mo de mo utilise ?
Comment faire pour eliminer le probleme, je pensais naivement que js gerait le ramasse miette ?
Merci
PS: j'utilise un clavier qwerty
04/03/2014, 08h16
SpaceFrog

Citation:

PS: j'utilise un clavier qwerty

tu es donc double ?
un homme à qwerty en vaut deux ?

Pour ton souci de mémoire, il faudrait savoir ce que fait ton plugin ...
et éventuellement fiare de remove() sur des élements insérés si possible ...
Il n'y a pas de gestion de mémoire en javascript qui permettre de flusher ou quoi que ce soit
04/03/2014, 08h24
Bovino

Citation:

Envoyé par artotal

je pensais naivement que js gerait le ramasse miette

Encore heureux que JavaScript utilise un ramasse-miette...
Ensuite, si ton script consomme autant de mémoire, c'est peut-être parce qu'il est mal conçu ou qu'il trop de données par exemple, un datagrid sur un tableau de 80000 entrées comme on a vu récemment...)

Ce plugin permet de creer la css d'un menu sous Wordpress.
degrade, couleur, marge.
Pour la portee des variables, je les assemble en debut de page pour les declarer, mais pas toutes, j'y travail.

Code:

1
2
3
  4   var $menu_load = null, content, $gradient_1_load_bgc, $gradient_2_load_bgc, $horizontal_bgc_load,
  5   $vertical_bgc_load, $gradient_bgc_load, $color_bgc_load, $links_load, $gradient_1_load_link, $gradient_2_load_link,
  6   $horizontal_link_load, $vertical_link_load, $gradient_link_load, $color_link_load, $effet, $val, $val_l;

Par exemple, au chargement de la page, je recupere les valeurs enregistrer et les affiches comme ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 17   $('#drag-bloc').draggable();
 18 
 19   $gradient_1_load_bgc = $('#bgc-1-bgc').val();
 20   $gradient_2_load_bgc = $('#bgc-2-bgc').val();
 21   if( $gradient_1_load_bgc === '' || $gradient_2_load_bgc=== '') { 
 22     $menu_load.css("background-color", $gradient_1_load_bgc);
 23     $menu_load.css("background-image", 'none');
 24   }else if( ( $gradient_2_load_bgc !== '' ) && ( $gradient_1_load_bgc !== '' ) ) {
 25     $menu_load.css("background-image", "-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, " + $gradient_1_load_bgc ⇉
 26     $menu_load.css("background-image", "-webkit-linear-gradient(top, " + $gradient_1_load_bgc + " 0%, " + $gradient_2_load_⇉
 27     $menu_load.css("background-image", "-moz-linear-gradient(top, " + $gradient_1_load_bgc + " 0%," + $gradient_2_load_bgc ⇉
 28     $menu_load.css("background-image", "-o-linear-gradient(top, " + $gradient_1_load_bgc + " 0%," + $gradient_2_load_bgc + ⇉
 29     $menu_load.css("background-image", "linear-gradient(top, " + $gradient_1_load_bgc + " 0%," + $gradient_2_load_bgc + " 1⇉
 30     $menu_load.css("background-image: -ms-linear-gradient(bottom, " + $gradient_1_load_bgc + " 0%, " + $gradient_2_load_bgc⇉
 31     $menu_load.css("filter","progid:DXImageTransform.Microsoft.Gradient( startColorstr='" + $gradient_1_load_bgc + "', endC⇉
 32   }

J'en ai moins de cent

J'utilise aussi ui slider, deux fois:

Code:

1
2
3
4
5
6
7
8
9
10
11
  // slider bgc
195   $val = $( "#opacity-bgc" ).val();
196   $( "#slider" ).slider({
197     value: $val,
198     min: 0,
199     max: 100,
200     slide: function( ui ) {
201       $( "#opacity-bgc" ).val( ui.value );
202       $("#primary-navigation").css('opacity', ui.value / 100);
203     }
204   });

Ainsi que google font

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  $.get("https://www.googleapis.com/webfonts/v1/webfonts?key=API",  {},
612   function (data) {
613     // charge toutes les polices dans le select
614     $.each(data.items, function (value) {
615       $('#fonts-l').append($("<option class='google'></option>").attr("value", value.family).text(value.family));
616 
617     });
618 
619     // au chargement de la page on affiche la police enregistrer
620     var t = $.trim( $('.hide-fonts').text() );
621     $("#fonts-l ").val(t).attr('selected', 'selected');
622 
623    if($("#fonts-l").find('option:selected').hasClass('google') ){
624       $('body')
625         .append("<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=" + t.replace(/\s+/g," ") +"' type='te⇉
626         $('#primary-navigation a').css({'font-family':'"' + t + '"'});
627         $('#font-type').val('google');
628     }else{
629         $('#font-type').val('classique');
630     }
631   });

Le probleme du window.remove, c'est que cela fonctionne seulement sur les objets, mais peut-etre que si je met a null les varaibles var ...;
Quand je n'en ai plus besoin, comme dans ce cas de figure apres le chargement et l'affichage des donnees ?

a chaque fois que je recherge la page, j'ai 20 mo en memoire suplementaires ?

04/03/2014, 20h27
sekaijin

en regardant la coloration de tes post tu vois que certain élément sont devenu rouge alors qu'il ne devrait pas l'être

cela signifie que ton code est incorrect

corrige les ' et " avant tout.
A+JYT

cette ligne est rouge je ne vois pas d'erreur, par contre je fais beaucoup de fautes d'orthographes, je dois me relire souvant trois fois sa fait partie de la magie du qwerty, dans mon cas ?

Code:

$('#drag-bloc').draggable();

C'est difficilement possible que j'ai une erreur de syntaxe parce que j'utilise jshint couple a Grunt ?

Je suis donc instentanement au courant de la moindre erreur :)

C'est surrement en recopiant le code, j'utilise Vim et pour copier sur un autre logiciel c'est un peu la galere.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 OK >> File "assets/javascript/src/jquery.menu_css3.js" changed. Running "jshint:src" (jshint) task >> 2 files lint free. Running "concat:dist" (concat) task File "assets/javascript/jquery.menu_css3.min.js" created. Running "less:prod" (less) task File assets/styles/src/less.menu_css3.css created. Running "autoprefixer:single_file" (autoprefixer) task File assets/styles/src/less.menu_css3.css created. Running "cssmin:add_banner" (cssmin) task File assets/styles/menu_css3.css created. Running "uglify:cible" (uglify) task File assets/javascript/jquery.prod.menu_css3.min.js created. Done, without errors. Completed in 8.144s at Tue Mar 04 2014 12:51:11 GMT-0600 (CST) - Waiting...
Merci a toi, et effectivement c'est en recopiant le code, je navais pas ete au bout de la ligne.
Vim c'est beau mais le copier coller est vraiment galere !
C'est un autre sujet

D'autre part je constate que
http://www.developpez.net/forums/e
a un probleme similaire au mien en terme de memoire:

Sa chauffe sec chez moi !

05/03/2014, 07h14
sekaijin

la coloration syntaxique ne trompe pas elle est bête et mécanique

dans le 2eme bloc de code ligne 29 une erreur à la fin
du coup ligne 30 le début est rouge
ligne 30 erreur apres le premier paramètre puis encore à la fin
du coup ligne 31 le début est rouge

il ne faut jamais se fier à un outil quelqu'il soit. tous ont des limites.

donc premère étape revoir le code point par point et éliminer toutes les fautes de frappes qui générent des erreur de syntaxe.

ensuite tu pourras traquer le bug.

si tu crée et référence des objets dans une partie de ton code
et que dans une autre tu déréférence le GC va ramasser les miètes
Mais si dans cette dernière partie tu as des erreur de syntaxe, jamais tu déréférence
le GC ne peux pas ramaser de miettes tu n'a rien libéré

A+JYT
05/03/2014, 18h28
artotal

Tu n'as pas lu mon message precedent ?

C'est juste un soucis de copier coller:

Code:

.append("<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=" + $(this).val().replace(/\s+/g," ") + >"' type='text/css' media='all' />");

j'ai ajoute set wrap a mon .vimrc pour ne plus avoir ce probleme de copier coller.

Je suis en desacord complet sur la question de se fier a des outils !

jshint couple a Grunt, me permet de ne laisser passer aucune erreur, tu devrais essayer.
05/03/2014, 21h30
sekaijin

ben je peux pas grands chose pour toi

Ce que tu décrit comme comportement de ton appli est typique d'une fuite mémoire.

Avec un code clean ce n'est pas facile à trouver
Mais là il y a des variables globales des bout de code js d'autre en Jquey
pa d'explication sur l'organisation du code

s'il y a des prototypes défini on ne les vois pas. les méthodes des objets ne sont pas clairement identifiées.
la porté des variables ne semble pas maitrisée.
Je me trompe surement mais le code n'étant pas lisible c'est l'effet qu'il me fait.

je dirais donc que tu crée des objets que tu attache indirectement à ton instance de navigateur. vu qu'il reste des référence le Garbage Collector ne peux les récupérer.

il n'y a pas 36 solution. il te faut dérouler ton code pas à pas. à chaque référencent voir pourquoi l'affectation est faite et quand elle est relâchée.

A+JYT
06/03/2014, 00h16
SylvainPV

Question bête, tu as essayé avec un autre navigateur ? ça vient peut-être pas de ta page mais d'une extension.
06/03/2014, 19h35
artotal

sekaijin,
Oui c'est ce que je pense aussi, je n'ai pas definit de variables local ou tres peu !
Il me faut tout repenser, c'est pas evident de trouver une bonne facon de faire et quel organisation est la meilleurs ?

SylvainPV,
D'apres moi, non !
J'ai sous les yeux le "Task manager" de Chrome, c'est bien mon plugin qui va jusqu'a 1 GB, apres deux jours d'utilisation intensive.
Ca pique les yeux !
07/03/2014, 16h51
SylvainPV

Si tu utilises Chrome, il y a de très bons outils de profiling mémoire intégrés. Ça devrait t'aider à trouver la fuite mémoire.
Voilà un tuto vidéo en anglais
http://www.youtube.com/watch?v=KKwmdTByxLk
07/03/2014, 17h55
artotal

Belle trouvaille effectivement , des a present c'est bien plus clair !