interface Web
js tutoriel
Programmation DOM JavaScript haute performance (1)_compétences javascript
Programmation DOM JavaScript haute performance (1)_compétences javascript
Nous savons que DOM est une interface de programmation d'application pour exploiter des documents XML et HTML, et qu'il est très coûteux d'utiliser des scripts pour faire fonctionner DOM. Il existe une métaphore appropriée. Imaginez que DOM et JavaScript (ici ECMScript) soient chacun une île, et qu'ils soient reliés par un pont à péage. Chaque fois qu'ECMAScript accède au DOM, il doit passer par ce pont et payer un « péage de pont ». Plus vous accédez au DOM plusieurs fois, plus le coût est élevé. Par conséquent, l’approche recommandée consiste à traverser le moins de ponts possible et à essayer de rester sur l’îlot ECMAScript. Il nous est impossible de ne pas utiliser l'interface DOM, alors comment pouvons-nous améliorer l'efficacité du programme ?
1. Accès et modification du DOM
Accéder aux éléments du DOM est coûteux (vous connaissez le "péage"), et modifier des éléments est encore plus coûteux car cela oblige le navigateur à recalculer les changements géométriques de la page (redistribution et redessinage).
Bien sûr, le pire des cas est d'accéder ou de modifier des éléments dans une boucle, regardez les deux morceaux de code suivants :
var times = 15000;
// code1
console.time(1);
for(var i = 0; i < times; i++) {
document.getElementById('myDiv1').innerHTML += 'a';
}
console.timeEnd(1);
// code2
console.time(2);
var str = '';
for(var i = 0; i < times; i++) {
str += 'a';
}
document.getElementById('myDiv2').innerHTML = str;
console.timeEnd(2);
Du coup, la première durée de fonctionnement était mille fois plus longue que la deuxième fois ! (version chromée 44.0.2403.130m)
1: 2846.700ms 2: 1.046ms
Le problème avec le premier morceau de code est qu'à chaque itération de boucle, l'élément est accédé deux fois : une fois pour lire la valeur de innerHTML, et une autre fois pour la réécrire, c'est-à-dire à chaque fois que la boucle traverse le pont ( le re-Aviron et le redessin seront expliqués dans le prochain article) ! Les résultats montrent clairement que plus le DOM est accédé, plus le code s'exécute lentement. Par conséquent, le nombre d'accès DOM pouvant être réduits est réduit autant que possible et le traitement est laissé autant que possible du côté ECMAScript.
2. Collection HTML et traversée du DOM
Un autre point consommateur d'énergie dans l'exploitation du DOM est la traversée du DOM. Généralement, nous collecterons une collection de HTML, par exemple en utilisant getElementsByTagName(), ou document.links, etc. Je pense que tout le monde est familier avec cela. Le résultat de la collection est une collection de type tableau qui existe dans un « état actif » en temps réel, ce qui signifie qu'elle se met automatiquement à jour lorsque l'objet document sous-jacent est mis à jour. Comment le dire ? C'est très simple d'offrir une châtaigne :
<body>
<ul id='fruit'>
<li> apple </li>
<li> orange </li>
<li> banana </li>
</ul>
</body>
<script type="text/javascript">
var lis = document.getElementsByTagName('li');
var peach = document.createElement('li');
peach.innerHTML = 'peach';
document.getElementById('fruit').appendChild(peach);
console.log(lis.length); // 4
</script>
Et c’est de là que vient l’inefficacité ! C'est très simple. Tout comme l'opération d'optimisation du tableau, la mise en cache de la variable de longueur est correcte (la lecture de la longueur d'une collection est beaucoup plus lente que la lecture de la longueur d'un tableau ordinaire, car elle doit être interrogée à chaque fois) :
console.time(0);
var lis0 = document.getElementsByTagName('li');
var str0 = '';
for(var i = 0; i < lis0.length; i++) {
str0 += lis0[i].innerHTML;
}
console.timeEnd(0);
console.time(1);
var lis1 = document.getElementsByTagName('li');
var str1 = '';
for(var i = 0, len = lis1.length; i < len; i++) {
str1 += lis1[i].innerHTML;
}
console.timeEnd(1);
Voyons dans quelle mesure l’amélioration des performances peut être obtenue ?
0: 0.974ms 1: 0.664ms
Lorsque la longueur de la collection est grande (la démo est de 1000), l'amélioration des performances est toujours évidente.
"JavaScript haute performance" propose une autre stratégie d'optimisation, qui stipule : "Parce que parcourir un tableau est plus rapide que parcourir une collection, si vous copiez d'abord les éléments de la collection dans le tableau, l'accès à ses propriétés sera plus rapide." n'a pas très bien révélé ce modèle, alors ne vous en souciez pas. Le code du test est le suivant : (Si vous avez des questions, n'hésitez pas à en discuter avec moi)
console.time(1);
var lis1 = document.getElementsByTagName('li');
var str1 = '';
for(var i = 0, len = lis1.length; i < len; i++) {
str1 += lis1[i].innerHTML;
}
console.timeEnd(1);
console.time(2);
var lis2 = document.getElementsByTagName('li');
var a = [];
for(var i = 0, len = lis2.length; i < len; i++)
a[i] = lis2[i];
var str2 = '';
for(var i = 0, len = a.length; i < len; i++) {
str2 += a[i].innerHTML;
}
console.timeEnd(2);
À la fin de cette section, nous introduisons deux méthodes DOM natives, querySelector() et querySelectorAll(), je pense que tout le monde les connaît. La première renvoie un tableau (notez que leurs valeurs de retour ne changent pas dynamiquement). comme les collections HTML), et cette dernière ou renvoie le premier élément correspondant. Eh bien, il ne fonctionne pas toujours mieux que le parcours de collection HTML du premier.
console.time(1);
var lis1 = document.getElementsByTagName('li');
console.timeEnd(1);
console.time(2);
var lis2 = document.querySelectorAll('li');
console.timeEnd(2);
// 1: 0.038ms
// 2: 3.957ms
Mais comme il s'agit d'une méthode de sélection de type CSS, elle est plus efficace et plus pratique lors des sélections combinées. Par exemple, effectuez la requête combinée suivante :
var elements = document.querySelectorAll('#menu a');
var elements = document.querySelectorAll('div.warning, div.notice');
Ce qui précède concerne la programmation DOM JavaScript hautes performances. J'espère que vous pourrez le comprendre et que cela vous sera utile pour votre apprentissage.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
Démystifier javascript: ce qu'il fait et pourquoi c'est important
Apr 09, 2025 am 12:07 AM
JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript?
Apr 04, 2025 pm 05:09 PM
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...
La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents?
Apr 04, 2025 pm 05:12 PM
Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...
Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido?
Apr 04, 2025 pm 05:36 PM
La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...
JavaScript est-il difficile à apprendre?
Apr 03, 2025 am 12:20 AM
Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.
Comment implémenter la fonction de glisser-déposer et de régler la fonction de réglage similaire à VScode dans le développement frontal?
Apr 04, 2025 pm 02:06 PM
Explorez la mise en œuvre de la fonction de glisser et de réglage du panneau de type VScode dans le frontal. Dans le développement frontal, comment implémenter un VScode comme ...
