Gestion mémoire en JavaScript

**artotal** · 04/03/2014, 03h18

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

**SpaceFrog** · 04/03/2014, 08h16

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

**Bovino** · 04/03/2014, 08h24

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...)

**artotal** · 04/03/2014, 15h03

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 :

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

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 :

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   $('#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 :

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

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 :

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
  $.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 ?

**sekaijin** · 04/03/2014, 20h27

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

**artotal** · 04/03/2014, 20h44

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 :

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

$('#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 :

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

**sekaijin** · 05/03/2014, 07h14

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

**artotal** · 05/03/2014, 18h28

Tu n'as pas lu mon message precedent ?

C'est juste un soucis de copier coller:

Code :

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

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

**sekaijin** · 05/03/2014, 21h30

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

**SylvainPV** · 06/03/2014, 00h16

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

**artotal** · 06/03/2014, 19h35

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 !

**SylvainPV** · 07/03/2014, 16h51

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

**artotal** · 07/03/2014, 17h55

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

Gestion mémoire en JavaScript

JavaScript

Discussions similaires

Partager

Partager