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: