Introduction détaillée à l'impact des événements JavaScript sur la mémoire et les performances

Bien que les gestionnaires d'événements puissent ajouter de fortes capacités interactives aux pages Web modernes, il est absolument insensé d'ajouter un grand nombre de gestionnaires d'événements sans discernement.

Analysons-le : Le gestionnaire d'événements est essentiellement une fonction et un objet, stockés en mémoire. La définition d'un grand nombre de gestionnaires d'événements augmentera le nombre d'objets en mémoire Web. deviendra de pire en pire, et l'expérience utilisateur sera très mauvaise.

Afin de mieux utiliser les gestionnaires d'événements, la délégation d'événements semble améliorer les performances.

Délégation d'événement

Délégation d'événement : Lier les fonctions de traitement d'un même événement sur plusieurs nœuds enfants à son nœud parent, sur le nœud parent Les événements bouillonnent à partir des nœuds enfants sont traités de manière uniforme. Cette technologie est appelée délégation d’événements.

À ajouter : la délégation d'événements ne se limite pas aux nœuds parents et aux nœuds enfants. Vous pouvez également jouer comme ceci. Par exemple, il existe de nombreux boutons à différentes positions dans le document de page, qui sont tous liés à des événements de clic. Grâce à la délégation d'événements, nous pouvons lier ces événements à l'élément body puis les traiter (bien que). généralement rarement utilisé).

Ce qui suit est un exemple pour illustrer étape par étape les avantages de la délégation d'événements :

<ul id="parent-list">
    <li id="list-1">List 1</li>
    <li id="list-2">List 2</li>
    <li id="list-3">List 3</li>
    <li id="list-4">List 4</li>
    <li id="list-5">List 5</li>
</ul>

En supposant le code ci-dessus, nous avons maintenant une exigence : quel que soit le sous-enfant du ci-dessus sur la liste (ul) est cliqué sur Liste (li), une boîte apparaîtra pour montrer sur quelle sous-liste nous avons cliqué.

La demande n'est pas difficile, non ? En gardant les exigences à l'esprit, il est temps d'écrire du code js. Vous avez maintenant deux méthodes : 1. Liez l'événement click à chaque sous-élément li, puis définissez la fonction de gestionnaire <.> 2. Utilisez la délégation d'événement pour lier l'événement click à l'élément parent ul, puis définissez la fonction de gestionnaire

// 方法一
var list1 = document.getElementById("list-1");
list1.addEventListener("click",function(){
  alert(this.firstChild.nodeValue);
},false);
var list2 = document.getElementById("list-2");
list2.addEventListener("click", function() {
  alert(this.firstChild.nodeValue);
}, false);
var list3 = document.getElementById("list-3");
list3.addEventListener("click", function() {
  alert(this.firstChild.nodeValue);
}, false);
var list4 = document.getElementById("list-4");
list4.addEventListener("click", function() {
  alert(this.firstChild.nodeValue);
}, false);
var list5 = document.getElementById("list-5");
list5.addEventListener("click", function() {
  alert(this.firstChild.nodeValue);
}, false);

// 方法二
var parentList = document.getElementById("parent-list");
parentList.addEventListener("click",function(){
  var target = event.target;
  if(target.nodeName.toLowerCase() === "li"){
    alert(target.firstChild.nodeValue);
  }
},false);

En regardant le code ci-dessus, je vais en écrire quelques-uns avantages de la deuxième méthode : 1. Réduit le nombre d'accès au DOM et améliore les performances 2. Lie de manière unifiée les gestionnaires d'événements des éléments enfants à leurs éléments parents, réduisant ainsi l'utilisation de la mémoire 3. Peut mieux gérer les gestionnaires d'événements, tels que le déplacement ; En plus de la référence à un gestionnaire d'événements

Remarque : Si les exigences pour chaque sous-élément sont différentes, nous pouvons également réécrire la méthode 2 ci-dessus comme ceci :

// 方法二
var parentList = document.getElementById("parent-list");
parentList.addEventListener("click",function(){
  var target = event.target;
  if(target.nodeName.toLowerCase() === "li"){
    switch(target.id){
      case "list-1":
        alert("学的越多，越觉得自己无知！");
        break;
      case "list-2":
        alert("爱是一种艺术！");
        break;
      case "list-3":
        target.innerHTML = "呵呵，我改了啊！";
        break;
      case "list-4":
        target.style.background = "#aaa";
        break;
      case "list-5":
        target.style.color = "red";
        target.style.fontSize = "2em";
        break;
      default:
        break;
    }
  }
},false);

Étant donné que la délégation d'événements repose sur le mécanisme de bouillonnement d'événements, tous les événements ne peuvent pas être délégués.

Les événements les plus adaptés à la délégation d'événements sont : clic, mousedown, mouseup, keydown, keyup et keypress.

La délégation d'événements n'est qu'une très bonne idée de liaison d'événements, vous ne devriez donc pas vous en tenir à l'exemple ci-dessus, apprenez-le et utilisez-le ! ^_^

Suppression des gestionnaires d'événements

Nous avons dit plus tôt que les gestionnaires d'événements existent en mémoire,

Chaque fois qu'un gestionnaire d'événements est affecté à un élément, la connexion en cours d'exécution est établie entre le navigateur code et le code JavaScript qui prend en charge l'interaction avec la page . Plus il y a de telles connexions, plus l'exécution de la page sera lente. La délégation d'événement mentionnée précédemment permet de limiter le nombre de connexions établies .

De plus, les gestionnaires d'événements en mémoire qui ne sont plus utilisés après utilisation affecteront également la mémoire et les performances de l'application Web s'ils ne sont pas libérés.

<button id="button">提交</button>
var button = document.getElementById("button");
button.onclick = function(){
  // 提交某个表单的操作代码

  button.onclick = null; // 移除事件处理程序
  event.target.firstChild.nodeValue = "提交中。。。";
};

Le principe général est le suivant :

Supprimez les gestionnaires d'événements qui ne sont plus utilisés et libérez de la mémoire !

Ce qui précède est une introduction détaillée de l'impact des événements JavaScript sur la mémoire et les performances. Pour plus de contenu connexe, veuillez prêter attention au site Web PHP chinois (www.php. cn) !