Windows Dev Center

Effizientes Verwalten des Layouts (HTML)

Um eine App auf dem Bildschirm zu rendern, muss das System komplexe Verarbeitungsschritte durchführen, bei denen die Regeln von HTML, CSS und anderen Spezifikationen auf die Größe und Position der Elemente im DOM angewendet werden. Dieser Vorgang wird als Layoutdurchlauf bezeichnet und kann sehr kostspielig sein. Die Auswirkungen auf die Leistung können je nach Größe und Komplexität des DOMs und der zugehörigen Stile sehr unterschiedlich sein. Die Ausführung kann durchschnittlich einige wenige bis zu mehreren Hundert Millisekunden dauern.

Wenn Sie für Ihre App eine optimale Leistung erzielen möchten, sollten Sie sich Möglichkeiten überlegen, wie Sie die zum Durchführen eines Layoutdurchlaufs erforderliche Zeit minimieren können.

API-Aufrufe, die einen Layoutdurchlauf auslösen, im Stapel verarbeiten

Verschiedene APIs können einen Layoutdurchlauf auslösen. Hierzu zählen die APIs window.getComputedStyle, offsetHeight, offsetWidth, scrollLeft und scrollTop. Da diese APIs die Durchführung eines Layoutdurchlaufs erzwingen, sollten Sie mit der Verwendung dieser APIs in Ihrer App vorsichtig sein.

Eine Möglichkeit, die Anzahl der Layoutdurchläufe zu reduzieren, besteht darin, API-Aufrufe, die einen Layoutdurchlauf auslösen, im Stapel zu verarbeiten.

Wie Sie dabei vorgehen müssen, erfahren Sie anhand des folgenden Codeausschnitts. In beiden Beispielen wird die offsetHeight und offsetWidth eines Elements mit dem Wert 5 angepasst.

Betrachten wir zunächst eine häufig verwendete, aber ineffiziente Möglichkeit, offsetHeight und offsetWidth anzupassen:



// Don't use: inefficient code.
function updatePosition(){
// Calculate the layout of this element and retrieve its offsetHeight
  var oH = e.offsetHeight; 

// Set this element's offsetHeight to a new value
  e.offsetHeight = oH + 5; 

// Calculate the layout of this element again because it was changed by the  
// previous line, and then retrieve its offsetWidth
  var oW = e.offsetWidth; 

// Set this element's offsetWidth to a new value
  e.offsetWidth = oW + 5; 
}

// At some later point the Web platform will calculate layout again to take this change into account 
// and render element to the screen


Beim vorherigen Beispiel werden drei Layoutdurchläufe ausgelöst. Betrachten wir nun eine bessere Möglichkeit, dasselbe Ergebnis zu erzielen:


Function updatePosition(){
// Calculate the layout of this element and retrieve its offsetHeight
  var height  = e.offsetHeight + 5;  

// Because the previous line already did the layout calculation and no fields were changed, 
// this line will retrieve the offsetWidth from the previous line
  var width = e.offsetWidth + 5; 

//set this element's offsetWidth to a new value
  e.offsetWidth = height;

//set this element's offsetHeight to a new value
  e.offsetHeight = width;
}

// At some later point the system will calculate layout 
// again to take this change into account and render element to the screen


Obwohl sich das zweite Beispiel nur geringfügig vom ersten unterscheidet, löst es nur zwei statt drei Layoutdurchläufe aus, was gegenüber dem ersten Beispiel eine Verbesserung um 33 % bedeutet. Da im zweiten Beispiel nach der Änderung einer Eigenschaft nicht auf diese zugegriffen wird, muss das System keinen Layoutdurchlauf durchführen, um den Wert abzurufen.

Erstellen und Initialisieren von UI-Elementen vor dem Anfügen an das DOM

Um bei der Aktualisierung der Benutzeroberfläche unnötige Formatierungs- oder Layoutupdates für unvollständige UI-Elemente zu vermeiden, sollten Sie die UI-Elemente zunächst erstellen und deren Initialisierung abschließen, bevor Sie sie an das aktive DOM anfügen. Falls Sie ein noch nicht bereites Element an das DOM anfügen müssen, legen Sie die style.display-Eigenschaft des Elements auf "none" fest, um die Elemente auszublenden. (Beispielsweise müssen Sie dem DOM unvollständige Elemente hinzufügen, um bestimmte Steuerelemente aus der Windows-Bibliothek für JavaScript verwenden zu können.) Blenden Sie das Element nur mithilfe von style.display aus und nicht durch Festlegen von style.visibility auf "hidden" oder durch Festlegen von style.opacity auf "0". Der Grund: Ist display auf "none" festgelegt, weiß die App, dass das Element keinen Platz benötigt und bei Layoutberechnungen ignoriert werden kann. Falls Sie dagegen style.visibility auf "hidden" oder style.opacity auf "0" festlegen, kann die App das Element bei Berechnungen nicht ignorieren.

 

 

Anzeigen:
© 2015 Microsoft