Dieser Artikel wird aus dem von Tiffany Brown geschriebenen Buch "The Master of CSS" abgezogen. Das Buch ist in wichtigen Buchhandlungen auf der ganzen Welt erh?ltlich und Sie k?nnen die E-Book-Version hier auch kaufen.
CSS Bestimmte Eigenschaften und Werte ausl?sen Reflow, der teuer ist und die Reaktionsgeschwindigkeit der Benutzeroberfl?che reduzieren kann - Seitenrendern, Animationsflüssigkeit und Bildlaufleistung werden betroffen, insbesondere auf Mobiltelefonen und Tablets auf Ger?ten mit geringer Leistung wie z. B. Fernseher.
Was ist eine Umlagerung? {.title}
Umlagerung bezieht sich auf einen Betrieb, der einen Teil oder das gesamte Layout der Seite ?ndert. ?ndern Sie beispielsweise die Gr??e eines Elements oder aktualisieren Sie seine linke Position. Sie veranlassen den Browser, die H?he, Breite und Position anderer Elemente im Dokument neu zu berechnen.
Repaint (Repaint) ?hnelt der Neulackierung und zwingt den Browser, einen Teil des Dokuments erneut zu renderieren. Beispielsweise ist das ?ndern der Farbe der Maus, wenn Sie über einen Taste schweben, ein neuer Betrieb. Das Neuwagen hat weniger Auswirkungen auf die Neuanordnung, da es die Gr??e oder Position des Knotens nicht beeinflusst.
Umlagerung und Neubildung werden normalerweise durch DOM -Operationen ausgel?st, z. B. durch Hinzufügen oder Entfernen von Elementen. Sie k?nnen aber auch durch ?nderungen der Attribute verursacht werden, die die Elementgr??e, Sichtbarkeit oder Position beeinflussen. Dies gilt, ob die ?nderungen durch JavaScript- oder CSS-basierte Animationen verursacht werden.
Hinweis: Seite Laden {.title}
Wenn die Seite geladen wird, analysiert der Browser die anf?nglichen HTML, CSS und JavaScript, die immer wieder nachordnen und neu zeichnen.
Es ist schwierig, in Projekten neu zu zeichnen und neu zu ordnen. Wir k?nnen jedoch Timeline -Tools verwenden, um sie zu identifizieren und deren Auswirkungen zu verringern.
Das Timeline -Tool kann zun?chst etwas verwirrend sein. Sie messen die Leistung des Front-Ends und erfassen die Zeit, die für verschiedene Aufgaben erforderlich ist. Durch die Aufzeichnung von Aktivit?ten w?hrend der Interaktion mit der Seite k?nnen wir herausfinden, welcher CSS -Code Leistungs Engp?sse verursachen kann.
Klicken Sie auf die Registerkarte Timeline in der Schnittstelle für Entwickler -Tools, um die Registerkarte Timeline zu verwenden. In Chrome, Opera und Firefox wird es treffend "Timeline" bezeichnet. Safari nannte es die Pluralform "Zeitleiste". Internet Explorer 11 verwendet den beschreibenderen Namen "UI Responsivit?t". [9]
Drücken Sie in jedem Browser die Taste "Aufzeichnung", um den Aufzeichnungsvorgang zu starten. Interagieren Sie mit dem Teil der Seite, der Probleme hat, und klicken Sie nach Abschluss auf die entsprechende Schaltfl?che, um die Aufzeichnung zu stoppen.
Abh?ngig vom von Ihnen verwendeten Browser sehen Sie die Daten m?glicherweise sofort oder nach dem Stoppen der Aufzeichnung. Safari und Firefox zeigen Daten in Echtzeit an, w?hrend Chrome-, Opera- und Internet Explorer -Leistungsdiagramme nach der Aufnahme der Aufzeichnung aufnehmen.
Dokumentlade-, Funktionsaufrufe, DOM -Ereignisse, Neuberechnung und Zeichnungsvorg?nge werden in jedem Browser aufgezeichnet, sodass wir die Leistungsgp?sse skizzieren k?nnen. Bei der CSS -Leistung müssen wir uns auf mindestens zwei verwandte Aspekte konzentrieren:
- Viele Stil -Neuberechnung und Zeichnungsvorg?nge
-
lang zeitaufw?ndiger Betrieb, gr??ere Bl?cke in der Zeitleiste repr?sentieren
left Um die tats?chliche Situation zu verstehen, werden wir zwei grundlegende Dokumente vergleichen, Beispiel A und Beispiel B In beiden F?llen bewegen wir eine Reihe von Div {.literal} Elementen von x Position 0 bis x Position 1000. Beide Beispiele verwenden CSS -Umwandlung. In Beispiel A werden wir jedoch das Attribut transform animieren. In Beispiel B verwenden wir die Transformationstransformation und animieren das
Attribut.
Die Markierungen der beiden Beispiele sind gleich (die Ergebnisse sind in Abbildung 3.16 dargestellt):
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Performance example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button type="button" id="move">Move</button>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<??>
</body>
</html>
Abbildung 3.16. Wenn Sie auf die Schaltfl?che "Verschieben" klicken
moved
unser CSS -Code ist ein anderer Teil der beiden. Das in Beispiel A verwendete CSS ist wie folgt:
var move = document.getElementById('move');
move.addEventListener('click', function(e) {
var objs = document.body.querySelectorAll('div');
Array.prototype.forEach.call(objs, function(o){
o.classList.toggle('moved');
});
});
Nach
erzeugt diese Animation eine gro?e Anzahl von Stilberechnungen und zeichne Indikatoren in unserer Zeitleiste neu. Das folgende Bild zeigt die Zeitleisteausgabe dieser Umwandlung in Safari (Abbildung 3.17), Chrom (Abbildung 3.18), Internet -Explorer (Abbildung 3.19) und Firefox (Abbildung 3.20).
div {
background: #36f;
margin-bottom: 1em;
width: 30px;
height: 30px;
position: relative;
left: 0;
transition: left 2s ease-in;
}
.moved {
left: 1000px;
}
Abbildung 3.17. Timeline -Ausgabe der linken Positionskonvertierung im Internet Explorer 11 Browser Abbildung 3.20. . Attribute ausl?sen Neubestehen bei der ?nderung, auch wenn die ?nderungen durch Animation oder Transformation verursacht werden.
Schauen wir uns nun die CSS von Beispiel B: an
Hier verwenden wir die Konvertierung und konvertieren zwischen und . left
left In den meisten Browsern l?st Conversions keine Neuordnung aus, und unsere Zeitleiste enth?lt weniger Repaint -Operationen. Dies zeigt sich in Safari (Abbildung 3.21), Chrom (Abbildung 3.22) und Internet Explorer (Abbildung 3.23). Firefox ist die Ausnahme; Die Zeitpl?ne der linken Umwandlung und die Umwandlungstransformation sind sehr ?hnlich.
Abbildung 3.21. Browser -webkit-transform Abbildung 3.23. von Code zu beseitigen {.title}
transform Leider gibt es keine klare Liste, von denen Eigenschaften eine Umlagerung und das erneute Abziehen verursachen. Die CSS-Ausl?ser von Paul Lewis sind am n?chsten, aber es ist chromspezifisch. Browser verhalten sich jedoch für viele dieser Eigenschaften ?hnlich, sodass diese Ressourcen zumindest eine Vorstellung davon gibt, welche Eigenschaften Probleme verursachen k?nnen.
Wenn Sie wissen, welche Eigenschaften problematisch sein k?nnen, besteht der n?chste Schritt darin, die Hypothese zu testen. Verwenden Sie einen Kommentar oder fügen Sie ein tempor?res Pr?fix hinzu, um die Eigenschaft zu deaktivieren und den Timeline -Test erneut auszusetzen.
Denken Sie daran, dass die Leistung relativ, nicht absolut oder perfekt ist. Das Ziel ist es, sich zu verbessern: Es ist besser als zuvor funktioniert. Wenn die Leistung des Attributs oder der Effekt zu langsam ist, um es zu akzeptieren, wird es vollst?ndig entfernt. transform
Das obige ist der detaillierte Inhalt vonDebuggen von CSS für die Reaktionsf?higkeit der Benutzeroberfl?che. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!