Fuite m�moire dans ce composant vuejs

Version imprimable

Bonjour,

Voici un composant vuejs qui affiche une modal avec un gif quand on tape le konami code dans le navigateur (haut haut bas bas gauche droite gauche droite BA ENTER)

Il y a une fuite m�moire dans ce code, quelqu'un pourrait m'�clairer ? Je crois que c'est li� au getElementById dans la m�thode handleKeydown. Mais j'aimerais bien une explication �clair�e.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<template>
  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close" @click="closeModal">&times;</span>
      <img alt="Hey" src="../assets/sold.gif">
      <p>{{ message }}</p>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "KonamiCode",
  data() {
    return {
      showGif: false,
      konamiCode: [38, 38, 40, 40, 37, 39, 37, 39, 66, 65, 13],
      enteredCode: [],
      modal:null,
      message: "Bravo pour avoir tapé le Konami Code Secret !"
    };
  },
  methods: {
    closeModal(){
      this.modal.style.display = "none";
    },
    handleKeydown(event) {
      this.enteredCode.push(event.keyCode);
      if (this.enteredCode.toString().indexOf(this.konamiCode) >= 0) {
        console.log("Konami Code entered!");
        this.showGif = true;
        this.modal = document.getElementById("myModal");
        this.modal.style.display = "block";
        this.enteredCode = [];
      }
    }
  },
  mounted() {
    window.addEventListener("keydown", this.handleKeydown);
  },
  beforeDestroy() {
    window.removeEventListener("keydown", this.handleKeydown);
  }
}
</script>
 
<style scoped>
img{
  margin:auto;
}
</style>

En vous remerciant

21/02/2023, 11h20
J�r�mieL
Bonjour,

Qu'est-ce qui te fais dire qu'il y a une fuite m�moire ?
�ventuellement il pourrait y avoir un probl�me avec `enteredCode` si Vue garde des r�f�rences sur les items sachant que c'est un objet r�actif.

D'ailleurs il n'y a pas besoin que `enteredCode` soit r�actif ici. Il est pr�f�rable dans ce cas de le sortir de `data` et l'initialiser dans le hook `created` :
Code:

1 2 3 created() { this.enteredCode = []; }
Pareil pour les autres propri�t�s dont le rendu du composant ne d�pend pas.
21/02/2023, 12h38
Gobble

Citation:

Qu'est-ce qui te fais dire qu'il y a une fuite m�moire ?

Bonjour J�r�mieL,

J'ai eu ce retour de fuite m�moire sur ce composant en livrant un mini projet vuejs pour un emploi.

Citation:

D'ailleurs il n'y a pas besoin que `enteredCode` soit r�actif ici. Il est pr�f�rable dans ce cas de le sortir de `data` et l'initialiser dans le hook `created` :

Woops, bien vu,j'ai toujours pris pour habitude de d�finir mes donn�es m�me non r�actives dans le data du composant.
21/02/2023, 14h44
J�r�mieL

Citation:

Envoy� par Gobble

Bonjour J�r�mieL,
J'ai eu ce retour de fuite m�moire sur ce composant en livrant un mini projet vuejs pour un emploi.

Sans davantage d'explication ?
Si c'est dans le cadre d'un test technique, ce serait logique que le recruteur s'attende � une fuite sur le listener, mais l� il est bien supprim� dans le `beforeDestroy` donc c'est �tonnant.
21/02/2023, 16h34
Gobble

Et bien dans la liste des point positifs il est bien mentionn� la destruction du event listeners. Ensuite dans les points n�gatifs "Fuite de m�moire dans le konami code". mais je n'ai pas pu avoir + de d�tails.
21/02/2023, 16h56
mathieu

tant que le konami code n'est pas d�tect�, le tableau enteredCode stocke toutes les touches. est ce que c'est �a qui serait d�tect� comme une fuite m�moire th�orique ?
je pr�cise "th�orique" parce que dans la pratique, je pense qu'il faudrait �crire un roman pendant plusieurs heures avant de commencer � saturer la m�moire avec �a.
23/02/2023, 09h57
NoSmoking
Bonjour,
en regardant rapidement tu gardes une r�f�rence avec ton

Code:

this.modal = document.getElementById("myModal");

donc
Code:

1 2 3 4 beforeDestroy() { this.modal = null; window.removeEventListener("keydown", this.handleKeydown); }
23/02/2023, 21h50
J�r�mieL

Non NoSmoking, pas besoin car lors de la destruction du composant, la r�f�rence est automatiquement supprim�e. ;)

Donc il y a effectivement une v�rification � faire sur la variable modal pour �viter de r�assigner plusieurs fois l'�l�ment DOM � cette modal.

Et ensuite, il y a effectivement un probl�me avec la variable enteredCode, je vidais la variable uniquement si le konami code �tait d�tect�.
Donc il faut rajouter une condition qui vide la variable r�cup�rant les touches si la taille d�passe le konami code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<template>
  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close" @click="closeModal">&times;</span>
      <img alt="Hey" src="../assets/sold.gif">
      <p>{{ message }}</p>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "KonamiCode",
  data() {
    return {
      konamiCode: [38, 38, 40, 40, 37, 39, 37, 39, 66, 65, 13],
      enteredCode: [],
      modal:null,
      message: "Bravo pour avoir tapé le Konami Code Secret !"
    };
  },
  methods: {
    closeModal(){
      if (this.modal) {
        this.modal.style.display = "none";
      }
    },
    handleKeydown(event) {
      this.enteredCode.push(event.keyCode);
      if (this.enteredCode.toString().indexOf(this.konamiCode) >= 0) {
        console.log("Konami Code entered!");
       
        if (this.modal) {
          this.modal.style.display = "block";
        }
        this.enteredCode = [];
      } else if (this.enteredCode.length > this.konamiCode.length) {
        this.enteredCode = [];
      }
    }
  },
  mounted() {
    this.modal = document.getElementById("myModal");
    window.addEventListener("keydown", this.handleKeydown);
  },
  beforeDestroy() {
    window.removeEventListener("keydown", this.handleKeydown);
  }
}
</script>
 
<style scoped>
img{
  margin:auto;
}
</style>

Apr�s concernant la remarque de noSmoking de r�initialiser � null, dans la documentation de vuejs sur les fuites m�moires ils font cela, mais peut �tre que c'est fait automatiquement au destroy du composant ?

04/03/2023, 22h28
Gobble
Bon du coup je me suis document� et vuejs ne fait pas automatiquement le vidage, les r�f�rences ne sont pas supprim�es, elles peuvent persister en m�moire du coup il est bon de le faire manuellement dans chaque composant
d'ailleurs dans vuejs 3 ce n'est plus beforeDestroy mais
Code:

1 2 3 beforeUnmount() { this.variable = null; }
Bon � savoir pour �viter un prochain fail pour un poste de d�veloppeur front-end :lol: