Lorsque nous développons des applications Internet riches (RIA), nous écrivons souvent des scripts javascript pour modifier ou ajouter des éléments de page. Ces tâches sont finalement accomplies par DOM - ou Document Object Model - et notre méthode d'implémentation affectera la vitesse de réponse de l'application.
Les opérations DOM entraîneront une réanalyse (redistribution) du navigateur, qui est un processus de calcul du navigateur qui détermine la manière dont les éléments de la page sont affichés. La modification directe du DOM, la modification du style CSS d'un élément ou la modification de la taille de la fenêtre du navigateur déclencheront l'analyse. La lecture des propriétés de mise en page d'un élément telles que offsetHeithe ou offsetWidth déclenchera également une analyse. La réanalyse prend du temps de calcul, donc moins la réanalyse est déclenchée, plus l'application sera rapide.
Les opérations DOM modifient généralement les éléments de page existants ou créent de nouveaux éléments de page. Les quatre solutions d'optimisation suivantes couvrent deux méthodes de modification et de création de nœuds DOM, vous aidant à réduire le nombre de fois qui déclenche une nouvelle analyse du navigateur.
Solution 1 : modifier le DOM en changeant les noms de classes CSS
Cette solution nous permet de modifier plusieurs attributs de style d'un élément et de ses éléments enfants à la fois et de déclencher une seule analyse.
besoin:
( note emu : L'auteur de l'article original avait manifestement eu un court-circuit dans son cerveau lorsqu'il a écrit ceci, et a mis ici les problèmes à résoudre dans le mode de manipulation DOM hors flux ultérieur. Cependant, c'est facile à comprendre l'auteur à partir du code de démonstration. Le problème que je veux vraiment décrire, donc emu ne reproduira pas le texte original)
Nous devons maintenant écrire une fonction pour modifier plusieurs règles de style d'un lien hypertexte. C’est très simple à mettre en œuvre, il suffit de changer un à un les attributs correspondant à ces règles. Mais le problème est que chaque fois qu’un attribut de style est modifié, cela entraînera une nouvelle analyse de la page.
fonction selectAnchor (élément) {
element.style.fontWeight = 'gras';
element.style.textDecoration = 'aucun';
element.style.color = '#000';
}
Solution:
Pour résoudre ce problème, nous pouvons d'abord créer un nom de style et mettre toutes les règles de style à modifier sur ce nom de classe. Ensuite, nous ajoutons ce nouveau nom de classe au lien hypertexte, afin de pouvoir ajouter plusieurs règles de style et seule une analyse est effectuée. déclenché. Un autre avantage de ce modèle est qu’il réalise également la séparation entre performances et logique.
.selectedAnchor {
poids de la police : gras ;
décoration de texte : aucune ;
couleur : #000 ;
}
fonction selectAnchor (élément) {
element.className = 'selectedAnchor';
}