Debuggen von CSS für die Reaktionsfähigkeit der Benutzeroberfläche

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.

Timeline -Tool {.title}

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!