Maison > interface Web > js tutoriel > Analyse des exemples d'opérations interactives DOM pour les compétences javascript d'optimisation des performances_javascript

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

WBOY
Libérer: 2016-05-16 15:26:15
original
1505 Les gens l'ont consulté

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更新。
Copier après la connexion

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);
Copier après la connexion

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;
Copier après la connexion

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;
Copier après la connexion

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.

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal