Eine Reihe von Techniken zur Beschleunigung von DHTML
Autor：Eve Cole
Aktualisierungszeit：2009-06-20 16:59:57
Dynamisches HTML (DHTML) bei Microsoft? Im Internet Explorer 4.0
Eingeführt, um Webautoren und -entwicklern neue Programmiermodelle zur Verfügung zu stellen. Seitdem haben Webautoren
Nutzen Sie diese leistungsstarke Funktion voll aus, um dynamische Inhalte, Stile und Positionierungen bereitzustellen, damit Webbenutzer dies tun können
Erleben Sie umfangreiche interaktive Funktionen. Die Flexibilität von DHTML bedeutet, dass es normalerweise mehrere Möglichkeiten zur Implementierung gibt
Ihre Idee. Verstehen Sie, wie die HTML-Analyse- und Anzeigekomponenten des Internet Explorers funktionieren
um Ihnen dabei zu helfen, den besten Weg zu finden, Ihre Arbeit zu erledigen. In diesem Artikel werden einige Funktionen von DHTML beschrieben
Dies wirkt sich erheblich auf die Leistung aus und bietet einige Tipps zur Verbesserung der Seitenleistung.
Batch-DHTML-Änderungen
Auf DHTML-Webseiten besteht die effektivste Möglichkeit zur Verbesserung der Leistung darin, die zu verbessern
Inhaltliche Änderungen. Es gibt verschiedene Möglichkeiten, eine Webseite zu aktualisieren. Es ist wichtig, diese zu verstehen. Congke
Dem Feedback der Benutzer zufolge können Webautoren HTML-Textblöcke oder DHTML verwenden
Object Model (Englisch) oder W3C Document Object Model (DOM) (Englisch) für den Zugriff auf einzelnes HTML
Element. Wann immer Sie den HTML-Inhalt ändern, wird der HTML-Code von Internet Explorer analysiert und angezeigt
Alle Anzeigekomponenten müssen die interne Darstellung der Seite neu organisieren, das Dokumentlayout und das Dokument neu berechnen
Diese Änderungen streamen und anzeigen. Die tatsächliche Leistung wird jedoch durch den Inhalt der Webseite und die von Ihnen vorgenommenen Änderungen bestimmt
, aber diese Operationen sind relativ teuer. Wenn Sie HTML-Textblöcke anstelle einzelner verwenden
Um auf das Element zuzugreifen, muss der HTML-Parser aufgerufen werden, was zu zusätzlichem Leistungsaufwand führt. Akzeptieren Sie HTML
Zu den Textmethoden und -eigenschaften gehören insertAdjacentHTML (Englisch) und pasteHTML (Englisch).
text)-Methode sowie die Attribute „innerHTML“ (Englisch) und „outerHTML“ (Englisch).
Tipp 1: Nehmen Sie Änderungen an HTML-Inhalten in einer Skriptfunktion vor. Wenn Ihr Design verwendet
Wenn Sie über mehrere Event-Handler verfügen (z. B. als Reaktion auf Mausbewegungen), sollten die Aktualisierungen zentralisiert erfolgen
ändern.
Eine weitere wichtige Tatsache beim Parsen und Anzeigen von HTML-Komponenten ist, dass, sobald das Skript die Kontrolle zurückgibt (z. B.
Wenn der Skript-Ereignishandler beendet wird oder wenn Methoden wie setTimeout (Englisch) aufgerufen werden),
Diese Komponente berechnet das Layout neu und zeigt die Webseite an. Jetzt kennen Sie den Internet Explorer
Im Folgenden erfahren Sie, wie Sie mit Änderungen umgehen, um die Leistung Ihrer Webseiten zu verbessern.
Tipp 2: Erstellen Sie eine HTML-Zeichenfolge und nehmen Sie eine statt mehrerer Änderungen am Dokument vor
mal aktualisiert. Wenn HTML-Inhalte nicht erforderlich sind, sollten Sie die Verwendung in Betracht ziehen
innerText-Eigenschaft (Englisch).
Im folgenden Beispiel ruft die langsamere Methode jedes Mal HTML auf, wenn die innerHTML-Eigenschaft festgelegt wird
Analysator. Um die Leistung zu verbessern, können Sie zunächst eine Zeichenfolge erstellen und diese dann innerHTML zuweisen
Eigentum.
langsam:
divUpdate.innerHTML = "";
für (var i=0; i<100; i++)
{
divUpdate.innerHTML += „Dies ist eine langsamere Methode!“;
}
schnell:
var str="";
für (var i=0; i<100; i++)
{
str += "Da diese Methode Strings verwendet, ist sie schneller!";
}
divUpdate.innerHTML = str;
Verwenden Sie innerText
Das DHTML-Objektmodell greift über das Attribut innerText (Englisch) auf den Text eines HTML-Elements zu.
Inhalt, während das W3C DOM einen unabhängigen untergeordneten Textknoten bereitstellt. Direkt über das innerText-Attribut
Aktualisieren Sie den Inhalt des Elements dauerhaft und schneller als der Aufruf der DOM-Methode createTextNode (Englisch).
Tipp 3: Verwenden Sie die innerText-Eigenschaft, um Textinhalte zu aktualisieren.
Das folgende Beispiel zeigt, wie Sie die innerText-Eigenschaft verwenden, um die Leistung zu verbessern.
langsam:
Var-Knoten;
für (var i=0; i<100; i++)
{
node = document.createElement( "SPAN" );
node.appendChild( document.createTextNode( "Verwenden Sie createText
Node() ") );
divUpdate.appendChild(node);
}
schnell:
Var-Knoten;
für (var i=0; i<100; i++)
{
node = document.createElement( "SPAN" );
node.innerText = „InnerText-Eigenschaft verwenden“;
divUpdate.appendChild(node);
}
Fügen Sie mithilfe des DOM ein einzelnes Element hinzu
Wie bereits erwähnt, führt die Anwendung der Zugriffsmethode für HTML-Text dazu, dass der HTML-Parser aufgerufen wird
Dadurch wird die Leistung verringert. Also mit createElement (Englisch) und insertAdjacent
Die Methode Element (Englisch) fügt Elemente schneller hinzu als der einmalige Aufruf der Methode insertAdjacentHTML.
Tipp 4: Rufen Sie die Methoden createElement und insertAdjacentElement schneller auf als den Aufruf
Die Methode insertAdjacentHTML ist schnell.
Durch das Stapeln von DHTML-Aktualisierungen und den einmaligen Aufruf der Methode insertAdjacentHTML kann eine Verbesserung erreicht werden
Leistung, aber manchmal ist es effizienter, Elemente direkt aus dem DOM zu erstellen. Im folgenden Szenario ist dies möglich
Probieren Sie beide Methoden aus und ermitteln Sie, welche schneller ist.
langsam:
für (var i=0; i<100; i++)
{
divUpdate.insertAdjacentHTML( "beforeEnd", " Einfügen verwenden
AdjacentHTML() " );
}
schnell:
Var-Knoten;
für (var i=0; i<100; i++)
{
node = document.createElement( "SPAN" );
node.innerText = "InsertAdjacentElement() verwenden";
divUpdate.insertAdjacentElement( "beforeEnd", node );
}
Erweitern von Optionen in einem SELECT-Element
Für die vorherige Regel, die die HTML-Textmethode verwendet, gibt es eine große Anzahl von OPTIONS (Englisch)
Eine Ausnahme bildet der Fall, wenn Elemente zu SELECT hinzugefügt werden (Englisch). Verwenden Sie zu diesem Zeitpunkt innerHTML
Eigenschaften sind effizienter als der Aufruf der Methode „createElement“, um auf eine Sammlung von Optionen zuzugreifen.
Tipp 5: Verwenden Sie innerHTML, um dem SELECT-Element eine große Anzahl von Optionen hinzuzufügen.
Verwenden Sie Zeichenfolgenverkettungsoperationen, um den HTML-Text des SELECT-Elements zu erstellen, und verwenden Sie diesen dann
Tipps zum Festlegen des innerHTML-Attributs. Für eine besonders große Anzahl von Optionen wird auch die String-Verkettungsoperation verwendet
die Leistung beeinträchtigen. Erstellen Sie in diesem Fall ein Array und rufen Sie Microsoft JScript Join auf
(Englisch) Methode zur endgültigen Verkettung des HTML-Textes des OPTION-Elements.
langsam:
var opt;
divUpdate.innerHTML = "〈SELECT ID='selUpdate'〉";
für (var i=0; i<1000; i++)
{
opt = document.createElement( "OPTION" );
selUpdate.options.add(opt);
opt.innerText = „Item“ + i + „Item“;
}
schnell:
var str="〈SELECT ID='selUpdate'〉";
für (var i=0; i<1000; i++)
{
str += "〈OPTION〉th" + i + " item〈/OPTION〉";
}
str += "";
divUpdate.innerHTML = str;
Schneller:
var arr = neues Array(1000);
für (var i=0; i<1000; i++)
{
arr[i] = "〈OPTION〉th" + i + " item〈/OPTION〉";
}
divUpdate.innerHTML = "〈SELECT ID='selUpdate'〉" + arr.join() + "
";
Tabelle mit DOM aktualisieren
Die Verwendung der DOM-Methode zum Einfügen von Tabellenzeilen und -zellen ist besser als die Verwendung von insertRow (Englisch) und insert
Die Cell-Methode (Englisch) (Teil des DHTML-Tabellenobjektmodells) ist effizienter. vor allem in
Bei der Erstellung großer Tabellen ist der Unterschied in der Effizienz noch deutlicher.
Tipp 6: Verwenden Sie DOM-Methoden, um große Tabellen zu erstellen.
langsam:
var-Reihe;
Var-Zelle;
für (var i=0; i<100; i++)
{
row = tblUpdate.insertRow();
für (var j=0; j<10; j++)
{
cell = row.insertCell();
cell.innerText = "Row " + i + " , cell " + j + " ";
}
}
schnell:
var-Reihe;
Var-Zelle;
var tbody = tblUpdate.childNodes[0];
tblUpdate.appendChild(tbody);
für (var i=0; i<100; i++)
{
row = document.createElement( "TR" );
tbody.appendChild( row );
für (var j=0; j<10; j++)
{
cell = document.createElement( "TD" );
row.appendChild( cell );
cell.innerText = "Row " + i + " , cell " + j + " ";
}
}
Einmal schreiben, viele verwenden
Wenn Ihre Website Skripts verwendet, um allgemeine Vorgänge auszuführen, sollten Sie erwägen, diese Funktionen hinzuzufügen
Kann in einer separaten Datei abgelegt werden, sodass sie von mehreren Webseiten wiederverwendet werden kann. Dabei nicht nur
Dadurch kann die Wartbarkeit des Codes verbessert und die Skriptdatei somit im Browser-Cache gehalten werden
Es muss nur einmal lokal heruntergeladen werden, wenn der Benutzer die Website besucht. Legen Sie häufig verwendete Stilregeln separat fest
Die gleichen Vorteile können in Dateien erzielt werden.
Tipp 7: Verwenden Sie Skripte wieder, indem Sie häufig verwendeten Code in Aktionen oder eigenständige Dateien einfügen
Um die Wiederverwendung von Skripten besser zu nutzen, platzieren Sie häufig verwendete Skriptvorgänge in DHTML-Add-Ins.
Code- oder Elementverhalten (Englisch). Verhaltensweisen bieten eine effiziente Möglichkeit zur Wiederverwendung von Skripten und
Erstellen Sie Komponenten, auf die über HTML zugegriffen werden kann, und ermöglichen Sie die Verwendung Ihrer eigenen Objekte, Methoden, Eigenschaften und Ereignisse
Erweitertes DHTML-Objektmodell. Bei Verhalten, bei dem die Viewlink-Funktion (Englisch) nicht verwendet wird, können Sie dies tun
Erwägen Sie die Verwendung der Lightweight-Verhaltensfunktion in Internet Explorer 5.5
Effizientere Codekapselung. Auch wenn Ihr Skriptcode in einem SCRIPT-Format (Englisch) vorliegt
Blockweise wird eine höhere Leistung erzielt.
Verwenden Sie dynamische Attribute nicht zu häufig
Dynamische Eigenschaften (Englisch) bieten Webautoren die Möglichkeit, Ausdrücke als Eigenschaftswerte zu verwenden.
Der Ausdruck wird zur Laufzeit ausgewertet und der resultierende Wert auf das Attribut angewendet. Dies ist eine leistungsstarke Funktion. Das
Die Funktion kann verwendet werden, um die Menge an Skripten auf der Seite zu reduzieren, da Ausdrücke jedoch regelmäßig neu ausgewertet werden müssen
Dieser Ausdruck hängt häufig mit anderen Eigenschaftswerten zusammen und kann sich daher negativ auf die Leistung auswirken. So etwas
Dies gilt insbesondere für Positionierungseigenschaften.
Tipp 8: Beschränken Sie die Verwendung dynamischer Eigenschaften.
Die Datenbindung funktioniert super
Datenbindung (Englisch) ist eine leistungsstarke Funktion, mit der Sie die Ergebnisse einer Datenbankabfrage kombinieren können
Frucht- oder XML-Dateninselinhalt (auf Englisch), gebunden an das HTML-Element auf der Webseite. Das hast du nicht
Wenn Sie zum Extrahieren von Daten zum Server zurückkehren müssen, kann dieser Funktionen zum Sortieren und Filtern von Daten sowie für verschiedene Daten bereitstellen
Datenansicht. Stellen Sie sich eine Webseite vor, die die Daten eines Unternehmens als Liniendiagramm, Balkendiagramm oder Kreisdiagramm anzeigt
Das Diagramm verfügt außerdem über Schaltflächen zum Sortieren der Daten nach Büro, Produkt, Verkaufsphase usw
Zur Implementierung muss die Funktion nur einmal auf den Server zugreifen.
Tipp 9: Nutzen Sie die Datenbindung, um eine umfassende Client-Ansicht Ihrer Daten bereitzustellen.
Legen Sie das Expando-Attribut nicht für das Dokumentobjekt fest
Das Attribut expando (Englisch) kann jedem Objekt hinzugefügt werden. Diese Eigenschaft ist sehr nützlich, sie kann
um Informationen innerhalb der aktuellen Wed-Seite zu speichern und eine weitere Möglichkeit zur Erweiterung des DHTML-Objektmodells bereitzustellen
Gesetz. Sie können beispielsweise einem DHTML-Element ein angeklicktes Attribut zuweisen und dieses Attribut verwenden, um den Benutzer aufzufordern
Auf welches Element der Benutzer geklickt hat. Wenn Sie ein Ereignis auslösen, können Sie auch das Expando-Attribut verwenden
Ereignishandler stellen mehr Kontextinformationen bereit. Unabhängig davon, wie Sie das Expando-Attribut verwenden, schneiden Sie
Denken Sie daran, sie nicht für das Dokumentobjekt (Englisch) festzulegen. Wenn Sie dies bei Ihrem Besuch tun
Beim Anfordern dieser Eigenschaft muss das Dokument zusätzliche Neuberechnungsvorgänge durchführen.
Tipp 10: Legen Sie das Expando-Attribut für das Fensterobjekt (Englisch) fest.
langsam:
für (var i=0; i<1000; i++)
{
var tmp;
window.document.myProperty = "Item" + i + "Item";
tmp = window.document.myProperty;
}
schnell:
für (var i=0; i<1000; i++)
{
var tmp;
window.myProperty = „Item“ + i + „Item“;
tmp = window.myProperty;
}
Vermeiden Sie es, Klassen- und Stilregeln zu ändern
Das Ändern von Klassen- und Stilregeln ist ein sehr kostspieliger Vorgang, der eine Neuberechnung und Anpassung des Gesamten erfordert
Das Layout eines Dokuments. Wenn Ihre Website Stylesheets verwendet, um alternative Ansichten des Inhalts bereitzustellen, können Sie dies tun
Erwägen Sie, das Stilobjekt (Englisch) des zu ändernden Elements direkt zu ändern, anstatt den Stil des Elements zu ändern
className (Englisch)-Attribut oder styleSheet (Englisch)-Objekt, das der Klasse zugeordnet ist.
Tipp 11: Wenn Sie das Erscheinungsbild von Inhalten ändern, ändern Sie das Stilobjekt direkt.
Reduzieren Sie den Textbereich, bevor Sie das übergeordnete Element finden
Ein TextRange-Objekt (Englisch) stellt ein vom Benutzer ausgewähltes oder aus einem HTML-Element abgerufenes Element dar
Textbereich, z. B. BODY (Englisch). Durch Aufrufen der Methode parentElement (Englisch)
Kann das übergeordnete Element eines Textbereichs identifizieren. Rufen Sie für komplexe Textbereiche parentElement auf
Vor der Methode ist es effizienter, zuerst die Collapse-Methode (Englisch) aufzurufen.
Tipp 12: Reduzieren Sie den Textbereich, bevor Sie auf die Methode parentElement zugreifen.
Auszug aus http://www.microsoft.com/china/msdn/?MSCOMTB=ICP_MSDN
