Analyse des exemples d'opérations interactives DOM pour les compétences javascript d'optimisation des performances_javascript

Les exemples de cet article décrivent les techniques d'opération interactives du DOM pour l'optimisation des performances javascript. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Dans tous les aspects de JavaScript, DOM est sans aucun doute la partie la plus lente. La manipulation et l'interaction du DOM prennent beaucoup de temps car elles nécessitent souvent de restituer la page entière ou une certaine partie. Comprendre comment optimiser l'interaction avec le DOM peut améliorer considérablement la vitesse d'exécution du script.

1. Réduire la mise à jour du DOM

Regardez l'exemple ci-dessous :

var list = document.getElementById("ul");
for (var i=0; i < 10; i++){
  var item = document.createELement("li");
  item.appendChild(document.createTextNode("item" + i));
  list.appendChild(item);
}
//这段代码为列表添加10个项目。添加每个项目时，都有两次DOM更新。总共需要20次DOM更新。

Nous pouvons utiliser la fragmentation des documents pour minimiser les mises à jour du DOM.

var list = document.getElementById("ul");
var fragment = document.createDocumentFragment();
for (var i=0; i < 10; i++){
  var item = document.createELement("li");
  item.appendChild(document.createTextNode("item" + i));
  fragment.appendChild(item);
}
list.appendChild(fragment);

Pour plus d'informations sur la fragmentation de documents, veuillez consulter l'article précédent "Analyse d'exemples d'opérations de fragmentation de documents JavaScript"

2. Utilisez innerHTML

Pour les modifications plus importantes du DOM, l'utilisation de innerHTML est plus rapide que createElement() et appendChild().

var list = document.getElementById("ul");
var html = "";
for (var i=0; i < 10; i++){
  html += "<li>item" + i + "<li>";
}
list.innerHTML = html;

3. Utiliser la délégation d'événement

Pour plus de détails, veuillez vous référer à l'article précédent "Explication détaillée des instances de délégation d'événements pour l'optimisation des performances javascript"

4. Faites attention à NodeList

Minimiser le nombre d'accès à NodeList peut grandement améliorer les performances du script, car chaque fois qu'une NodeList est accédée, une requête basée sur le document sera exécutée.

var imgs = document.getElementsByTagName("img");
for (var i=0, len=imgs.length; i < len; i++){
  var image = imgs[i];
  //more code
}
//这里的关键是长度length存入了len变量，而不是每次都去访问NodeList的length属性。当在循环中使用NodeList的时候，把imgs[i]放入image变量中，以避免在循环体内多次调用NodeList;

Pour plus d'informations sur NodeList, veuillez consulter l'article précédent "Comment traiter NodeList en tant que tableau Array en javascript"

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.