Un ensemble de techniques pour accélérer le DHTML
Auteur：Eve Cole
Date de mise à jour：2009-06-20 16:59:57
HTML dynamique (DHTML) chez Microsoft ? Dans Internet Explorer 4.0
Introduit pour mettre de nouveaux modèles de programmation à la disposition des auteurs et développeurs Web. Depuis, les auteurs du Web ont
Profitez pleinement de cette fonctionnalité puissante pour fournir un contenu, un style et un positionnement dynamiques afin que les utilisateurs Web puissent
Découvrez de riches fonctionnalités interactives. La flexibilité du DHTML signifie qu'il existe généralement plusieurs façons de mettre en œuvre
Votre idée. Comprendre le fonctionnement des composants d'analyse et d'affichage HTML d'Internet Explorer
pour vous aider à déterminer la meilleure façon de faire le travail. Cet article décrit certaines fonctionnalités de DHTML
impact significatif sur les performances et fournit quelques conseils pour améliorer les performances des pages.
Modifications DHTML par lots
Sur les pages Web DHTML, le moyen le plus efficace d'améliorer les performances consiste à améliorer la
Modifications du contenu. Il existe plusieurs façons de mettre à jour une page Web, qu’il est important de comprendre. Congke
À en juger par les commentaires des utilisateurs, les auteurs Web peuvent utiliser des blocs de texte HTML ou DHTML.
Modèle d'objet (anglais) ou modèle d'objet de document (DOM) du W3C (anglais) pour accéder au code HTML individuel
élément. Chaque fois que vous modifiez le contenu HTML, l'analyse et l'affichage HTML d'Internet Explorer
Tous les composants d'affichage doivent réorganiser la représentation interne de la page, recalculer la mise en page et le document
diffuser et afficher ces modifications. Bien que les performances réelles soient déterminées par le contenu de la page Web et les modifications que vous apportez
, mais ces opérations sont relativement coûteuses. Si vous utilisez des blocs de texte HTML au lieu de blocs de texte individuels
Pour accéder à l'élément, l'analyseur HTML doit être appelé, ce qui entraînera une surcharge de performances supplémentaire. Accepter le HTML
Les méthodes et propriétés de texte incluent insertAdjacentHTML (anglais) et pasteHTML (anglais)
text), ainsi que les attributs innerHTML (anglais) et externalHTML (anglais).
Astuce 1 : apportez des modifications au contenu HTML dans une fonction de script. Si votre conception utilise
Si vous disposez de plusieurs gestionnaires d'événements (par exemple en réponse aux mouvements de la souris), les mises à jour doivent être centralisées
changement.
Un autre fait important concernant l'analyse et l'affichage des composants HTML est qu'une fois que le script rend le contrôle (par ex.
Lorsque le gestionnaire d'événements de script se termine ou lorsque des méthodes telles que setTimeout (anglais) sont appelées),
Ce composant recalculera la mise en page et affichera la page Web. Vous connaissez maintenant Internet Explorer
Comment gérer les modifications ci-dessous commencera à améliorer les performances de vos pages Web.
Astuce 2 : créez une chaîne HTML et apportez une modification au document au lieu de plusieurs
horaires mis à jour. Si le contenu HTML n'est pas nécessaire, envisagez d'utiliser
propriété innerText (anglais).
Dans l'exemple suivant, la méthode la plus lente appelle HTML chaque fois que la propriété innerHTML est définie
Analyseur. Pour améliorer les performances, vous pouvez d'abord créer une chaîne, puis l'attribuer à innerHTML
propriété.
lent:
divUpdate.innerHTML = "";
pour (var i=0; i<100; i++)
{
divUpdate.innerHTML += "C'est une méthode plus lente !";
}
rapide:
var str="";
pour (var i=0; i<100; i++)
{
str += "Comme elle utilise des chaînes, cette méthode est plus rapide !";
}
divUpdate.innerHTML = str;
Utiliser le texte interne
Le modèle objet DHTML accède au texte d'un élément HTML via l'attribut innerText (anglais).
contenu, tandis que le DOM du W3C fournit un nœud de texte enfant indépendant. Directement via l'attribut innerText
Mettez à jour le contenu de l'élément de manière permanente, plus rapidement que d'appeler la méthode DOM createTextNode (anglais).
Astuce 3 : utilisez la propriété innerText pour mettre à jour le contenu du texte.
L'exemple suivant montre comment utiliser la propriété innerText pour améliorer les performances.
lent:
nœud var ;
pour (var i=0; i<100; i++)
{
node = document.createElement( "SPAN" );
node.appendChild( document.createTextNode( "Utiliser createText
Nœud() ") );
divUpdate.appendChild(nœud);
}
rapide:
nœud var ;
pour (var i=0; i<100; i++)
{
node = document.createElement( "SPAN" );
node.innerText = "Utiliser la propriété innerText";
divUpdate.appendChild(nœud);
}
Ajouter un seul élément à l'aide du DOM
Comme mentionné précédemment, l'application de la méthode d'accès au texte HTML entraînera l'appel de l'analyseur HTML, depuis
Cela réduira les performances. Donc en utilisant createElement (anglais) et insertAdjacent
La méthode Element (anglais) ajoute des éléments plus rapidement que l'appel unique de la méthode insertAdjacentHTML.
Astuce 4 : Appelez les méthodes createElement et insertAdjacentElement plus rapidement que l'appel
La méthode insertAdjacentHTML est rapide.
Le regroupement des mises à jour DHTML et l'appel de la méthode insertAdjacentHTML une fois peuvent améliorer
Performance, mais il est parfois plus efficace de créer des éléments directement à partir du DOM. Dans le scénario ci-dessous, vous pouvez
pour essayer les deux méthodes et déterminer laquelle est la plus rapide.
lent:
pour (var i=0; i<100; i++)
{
divUpdate.insertAdjacentHTML( "beforeEnd", " Utiliser l'insertion
AdjacentHTML() " );
}
rapide:
nœud var ;
pour (var i=0; i<100; i++)
{
node = document.createElement( "SPAN" );
node.innerText = "Utiliser insertAdjacentElement() ";
divUpdate.insertAdjacentElement( "beforeEnd", noeud );
}
Extension des options dans un élément SELECT
Pour la règle précédente utilisant la méthode texte HTML, un grand nombre d'OPTIONS (anglais)
Une exception est le cas où des éléments sont ajoutés à SELECT (anglais). Pour le moment, utilisez innerHTML
Les propriétés sont plus efficaces que l'appel de la méthode createElement pour accéder à une collection d'options.
Astuce 5 : utilisez innerHTML pour ajouter un grand nombre d'options à l'élément SELECT.
Utilisez les opérations de concaténation de chaînes pour créer le texte HTML de l'élément SELECT, puis utilisez ceci
Conseils pour définir l'attribut innerHTML. Pour un nombre particulièrement important d'options, l'opération de concaténation de chaînes sera également
affecter les performances. Dans ce cas, créez un tableau et appelez Microsoft JScript join
(Anglais) Méthode pour effectuer la concaténation finale du texte HTML de l'élément OPTION.
lent:
var opt;
divUpdate.innerHTML = "〈SELECT ID='selUpdate'〉";
pour (var i=0; i<1000; i++)
{
opt = document.createElement( "OPTION" );
selUpdate.options.add(opt);
opt.innerText = "Article" + i + "Article" ;
}
rapide:
var str="〈SELECT ID='selUpdate'〉";
pour (var i=0; i<1000; i++)
{
str += "〈OPTION〉th" + i + " item〈/OPTION〉";
}
str += "";
divUpdate.innerHTML = str;
Plus rapide:
var arr = nouveau tableau (1000);
pour (var i=0; i<1000; i++)
{
arr[i] = "〈OPTION〉th" + i + " item〈/OPTION〉";
}
divUpdate.innerHTML = "〈SELECT ID='selUpdate'〉" + arr.join() + "
" ;
Mettre à jour la table avec DOM
Il est préférable d'utiliser la méthode DOM pour insérer des lignes et des cellules dans un tableau plutôt que d'utiliser insertRow (anglais) et insert
La méthode Cell (anglais) (qui fait partie du modèle objet de table DHTML) est plus efficace. surtout dans
Lors de la création de grandes tables, la différence d’efficacité est encore plus évidente.
Astuce 6 : utilisez les méthodes DOM pour créer de grandes tables.
lent:
var rangée ;
cellule var ;
pour (var i=0; i<100; i++)
{
rangée = tblUpdate.insertRow();
pour (var j=0; j<10; j++)
{
cell = row.insertCell();
cell.innerText = "Ligne " + i + " , cellule " + j + " ";
}
}
rapide:
var rangée ;
cellule var ;
var tbody = tblUpdate.childNodes[0];
tblUpdate.appendChild(tbody);
pour (var i=0; i<100; i++)
{
row = document.createElement( "TR" );
tbody.appendChild(ligne);
pour (var j=0; j<10; j++)
{
cell = document.createElement( "TD" );
row.appendChild( cellule );
cell.innerText = "Ligne " + i + " , cellule " + j + " ";
}
}
Écrivez une fois, utilisez-en plusieurs
Si votre site Web utilise des scripts pour effectuer des opérations courantes, pensez à ajouter ces fonctions
Peut être placé dans un fichier séparé afin de pouvoir être réutilisé par plusieurs pages Web. Ce faisant, non seulement
Cela peut améliorer la maintenabilité du code et conserver le fichier de script dans le cache du navigateur, ainsi
Il ne doit être téléchargé localement qu’une seule fois lorsque l’utilisateur visite le site. Mettez les règles de style couramment utilisées dans des sections séparées
Les mêmes avantages peuvent être obtenus dans les fichiers.
Astuce 7 : Réutilisez les scripts en plaçant le code fréquemment utilisé dans des actions ou des fichiers autonomes
Pour mieux tirer parti de la réutilisation des scripts, placez les opérations de script fréquemment utilisées dans des compléments DHTML.
comportement du code ou de l'élément (anglais). Les comportements fournissent un moyen efficace de réutiliser les scripts et
Créez des composants accessibles à partir de HTML et vous permettent d'utiliser vos propres objets, méthodes, propriétés et événements pour
Modèle objet DHTML étendu. Pour un comportement qui n'utilise pas la fonctionnalité viewlink (anglais), vous pouvez
Pensez à utiliser la fonctionnalité de comportement léger dans Internet Explorer 5.5
Encapsulation de code plus efficace. De plus, si votre code de script est dans un SCRIPT (anglais)
En blocs, des performances plus élevées seront obtenues.
N'utilisez pas trop d'attributs dynamiques
Les propriétés dynamiques (anglais) fournissent aux auteurs Web un moyen d'utiliser des expressions comme valeurs de propriété.
L'expression est évaluée au moment de l'exécution et sa valeur résultante est appliquée à l'attribut. Il s’agit d’une fonctionnalité puissante. ce
Cette fonctionnalité peut être utilisée pour réduire la quantité de script sur la page, mais comme les expressions doivent être réévaluées périodiquement, et
Cette expression est souvent liée à d’autres valeurs de propriété et peut donc avoir un impact négatif sur les performances. Ce genre de
Cela est particulièrement vrai pour les propriétés de positionnement.
Astuce 8 : Limitez l’utilisation des propriétés dynamiques.
La liaison de données fonctionne très bien
La liaison de données (anglais) est une fonctionnalité puissante qui vous permet de combiner les résultats d'une requête de base de données
Contenu de fruit ou d'îlot de données XML (en anglais), lié à l'élément HTML de la page Web. Tu n'as pas
Besoin de revenir au serveur pour extraire les données, il peut fournir des fonctions de tri et de filtrage des données, ainsi que différentes données
vue des données. Imaginez une page Web qui affiche les données d'une entreprise sous forme de graphique linéaire, de graphique à barres ou de diagramme circulaire.
graphique, comporte également des boutons pour trier les données par bureau, produit ou étape de vente, et tout
La fonction n’a besoin d’accéder au serveur qu’une seule fois pour l’implémenter.
Astuce 9 : utilisez la liaison de données pour fournir une vue client enrichie de vos données.
Ne définissez pas l'attribut expando sur l'objet document
L'attribut expando (anglais) peut être ajouté à n'importe quel objet. Cette propriété est très utile, elle peut
pour stocker des informations dans la page Wed actuelle et fournir un autre moyen d'étendre le modèle objet DHTML
Loi. Par exemple, vous pouvez attribuer un attribut cliqué à un élément DHTML et utiliser cet attribut pour inviter l'utilisateur
Sur quel élément l'utilisateur a cliqué. Lorsque vous déclenchez un événement, vous pouvez également utiliser l'attribut expando pour
Les gestionnaires d'événements fournissent plus d'informations contextuelles. Quelle que soit la manière dont vous utilisez l'attribut expando, coupez
N'oubliez pas de ne pas les définir sur l'objet document (anglais). Si vous faites cela, lors de votre visite
Lors de la demande de cette propriété, le document doit effectuer des opérations de recalcul supplémentaires.
Astuce 10 : définissez l'attribut expando sur l'objet window (anglais).
lent:
pour (var i=0; i<1000; i++)
{
var tmp;
window.document.myProperty = "Article" + i + "Article" ;
tmp = window.document.myProperty;
}
rapide:
pour (var i=0; i<1000; i++)
{
var tmp;
window.myProperty = "Article" + i + "Article" ;
tmp = window.myProperty;
}
Évitez de changer de règles de classe et de style
Changer de règle de classe et de style est une opération très coûteuse qui nécessite un recalcul et un ajustement de l'ensemble de la classe.
La mise en page d'un document. Si votre site Web utilise des feuilles de style pour proposer d'autres vues du contenu, vous pouvez
Envisager de modifier directement l'objet style (anglais) de l'élément à modifier, plutôt que de modifier le style de l'élément
Attribut className (anglais) ou objet styleSheet (anglais) associé à la classe.
Astuce 11 : Lorsque vous modifiez l'apparence du contenu, modifiez directement l'objet de style.
Réduire la plage de texte avant de trouver le parent
Un objet TextRange (anglais) représente un élément sélectionné par l'utilisateur ou récupéré à partir d'un élément HTML.
Zone de texte, telle que BODY (anglais). En appelant la méthode parentElement (anglais),
Peut identifier le parent d'une plage de texte. Pour les plages de texte complexes, appelez parentElement
Avant la méthode, il sera plus efficace d'appeler d'abord la méthode collapsus (anglais).
Astuce 12 : Réduisez la plage de texte avant d’accéder à la méthode parentElement.
Extrait de http://www.microsoft.com/china/msdn/?MSCOMTB=ICP_MSDN
