Comment démarrer rapidement avec VUE3.0 : Entrez
les recommandations liées à l'apprentissage : Tutoriel JavaScript
les gestionnaires d'événements peuvent interagir dans les applications Web modernes, de nombreux développeurs en utiliseront par erreur un grand nombre dans la page. En JavaScript, le nombre de gestionnaires d'événements sur une page est directement lié aux performances globales de la page. Il y a de nombreuses raisons, par exemple ① chaque fonction est un objet et occupe de l'espace mémoire. Plus il y a d'objets, plus les performances sont mauvaises ; ② Le nombre de visites DOM requises pour un gestionnaire d'événements spécifié entraînera d'abord un retard dans l'ensemble ; interaction avec les pages.
pour (laissez la valeur des valeurs) {
ul.innerHTML += '<li>${value}</li>';} Ce code est inefficace car innerHTML doit être défini une fois pour chaque itération. De plus, innerHTML doit être lu en premier pour chaque boucle, et c'est le cas. pour dire, innerHTML doit être accessible deux fois en une seule boucle.
let itemsHtml = "";for(let valeur des valeurs){
itemsHtml += '<li>${value}</li>';}ul.innerHTML = itemsHtml; Après cette modification, l'efficacité sera beaucoup plus élevée. Seul innerHTML se verra attribuer une valeur. :
ul.innerHTML = values.map(value => '<li>${value}</li>').join(' ');
La solution au trop grand nombre de gestionnaires d’événements consiste à utiliser la délégation d’événements. La délégation d'événements exploite le bouillonnement d'événements, vous permettant d'utiliser un seul gestionnaire d'événements pour gérer un type d'événement. Par exemple, l'événement click remonte jusqu'au document. Cela signifie que vous pouvez spécifier un gestionnaire d'événements onclick pour la page entière, plutôt que de spécifier des gestionnaires d'événements distincts pour chaque élément cliquable.
<ul id="myGirls"> <li id="girl1">Bibi Dong</li> <li id="girl2">Yun Yun</li> <li id="girl3">Medusa</li></ul>
Ceci contient trois éléments de liste qui doivent effectuer une certaine action lorsque vous cliquez dessus. La manière habituelle consiste à spécifier trois gestionnaires d'événements :
let item1 = document.getElementById("girl1). ");let item2 = document.getElementById("girl2");let item3 = document.getElementById("girl3");item1.addEventListener("click",(event) => {
console.log("Je suis Bibi Dong!");})item2.addEventListener("click",(event) => {
console.log("Je suis Yunyun!");})item3.addEventListener("click",(event) => {
console.log("Je suis Méduse!");}) Il y a trop de codes identiques et le code est trop moche.
En utilisant la délégation d'événements, ajoutez simplement un gestionnaire d'événements au nœud ancêtre commun de plusieurs éléments et vous pourrez résoudre la laideur !
let list = document.getElementById("myGirls");list.addEventListener("click",(event) => {
laissez target = event.target;
commutateur (target.id) {
cas "fille1":
console.log("Je suis Bibi Dong!");
casser;
cas "fille2":
console.log("Je suis Yunyun!");
casser;
cas "fille3":
console.log("Je suis Méduse !");
casser;
}}) L'objet document est disponible à tout moment et vous pouvez y ajouter un gestionnaire d'événements à tout moment (sans attendre les événements DOMContentLoaded ou de chargement) et l'utiliser pour gérer tous les événements d'un certain type dans la page. Cela signifie que tant que la page affiche des éléments cliquables, elle fonctionnera sans délai.
Gagnez du temps passé à configurer les routines d’événements de page.
Réduisez la mémoire requise pour la page entière et améliorez les performances globales.
En attribuant des gestionnaires d'événements aux éléments, une connexion est établie entre le code du navigateur et le code JavaScript responsable de l'interaction avec la page. Plus ces contacts reprennent, plus les performances de la page seront mauvaises. En plus de limiter ces connexions via la délégation d'événements, les gestionnaires d'événements inutilisés doivent être rapidement supprimés. Les mauvaises performances de nombreuses applications Web sont causées par des gestionnaires d'événements inutiles restant en mémoire.
Il y a deux raisons à ce problème :
comme la suppression de nœuds via la méthode DOM removeChild() ou replaceChild(). La solution la plus courante consiste à utiliser innerHTML pour remplacer une certaine partie de la page dans son ensemble. À ce stade, s'il existe un gestionnaire d'événements sur l'élément supprimé par innerHTML, il ne sera pas nettoyé normalement par le programme de récupération de place.
Par conséquent, si vous savez qu'un élément sera supprimé, vous devez supprimer manuellement son gestionnaire d'événements, par exemple btn.onclick = null;//删除事件处理程序. La délégation d'événements peut également aider à résoudre ce problème. remplacé par innerHTML, n'ajoutez pas de gestionnaire d'événements à l'élément, ajoutez-le simplement à un nœud de niveau supérieur.
Si les gestionnaires d'événements ne sont pas nettoyés après le déchargement de la page, ils resteront toujours en mémoire. Après cela, chaque fois que le navigateur charge et décharge la page (par exemple en avançant, en arrière ou en actualisant), le nombre d'objets résiduels en mémoire augmente car les gestionnaires d'événements ne sont pas recyclés.
De manière générale, il est préférable de supprimer tous les gestionnaires d'événements du gestionnaire d'événements onunload avant le déchargement de la page. L'avantage de la délégation d'événements est également visible à ce stade. Comme il y a peu de gestionnaires d'événements, il est facile de se rappeler lesquels supprimer.
let ps = document.getElementsByTagName("p");for(let i = 0;i<ps.length;++i){
let p = document.createElement("p");
document.body.appendChild(p);} let ps = document.getElementsByTagName("p");for(let i = 0,len=ps.length;i<len;++i){
let p = document.createElement("p");
document.body.appendChild(p);} La première ligne de l'expression ① obtient une HTMLCollection contenant tous les éléments <p> du document. Étant donné que cette collection est en temps réel, chaque fois que vous ajoutez un nouvel élément <p> à la page, puis que vous interrogez cette collection, il y aura un élément supplémentaire. Étant donné que le navigateur ne souhaite pas enregistrer la collection à chaque création, il mettra à jour la collection à chaque visite. Chaque boucle évaluera i < ps.length , ce qui signifie une requête pour obtenir tous les éléments <p> . Étant donné qu'un nouvel élément <p> est créé et ajouté au document dans le corps de la boucle, la valeur de ps.length sera également incrémentée à chaque fois dans la boucle. Parce que les deux valeurs seront incrémentées, je ne serai jamais égal ps.length , donc l'expression ① provoquera une boucle infinie.
Dans l'expression ②, une variable len qui contient la longueur de l'ensemble est initialisée, car len contient la longueur de l'ensemble au début de la boucle, et cette valeur n'augmentera pas dynamiquement à mesure que l'ensemble augmente ( for循环中初始化变量处只会初始化一次), donc le problème de boucle infinie qui apparaît dans l'expression ① peut être évité.
Si vous ne souhaitez pas initialiser une variable, vous pouvez également utiliser l'itération inverse :
let ps = document.getElementsByTagName("p");for(let i = ps.length-1;i>=0;--i ){
let p = document.createElement("p");
document.body.appendChild(p);} 
Recommandations associées : Tutoriel JavaScript
Ce qui précède est une compréhension approfondie des problèmes de mémoire et de performances de JavaScript. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !
