So erreichen Sie eine leistungsstarke mobile Entwicklung

Wie wir alle wissen, sollten mobile Endgeräte nicht nur schnell laden, sondern auch Inhalte ohne Benutzererfahrung bieten. Sie sollten auch reibungslos funktionieren, wie zum Beispiel schnelle Interaktionen und seidenweiche Animationen...

Wie können die oben genannten Effekte in der tatsächlichen Entwicklung erzielt werden?

1. Bestätigen Sie die Analysestandards der Rendering-Leistung

2. Bereiten Sie ein Lineal vor, um die Rendering-Leistungsstandards zu messen

Optimieren Sie die zeitaufwändigsten Bereiche

Wir können ungefähr die folgenden Optimierungsziele erreichen

Das erste ist die erste Bildschirmpräsentationszeit Es gibt viele, viele komprimierte Codes, die Verwendung von WebP-Bildern, die Verwendung von Sprites, das Laden bei Bedarf, „Direct Out“, CDN ...

Der zweite Punkt ist die 16-ms-Optimierung Optimierung.

1. Browser-Rendering Prinzipielle Einführung

Die Aktualisierungsfrequenz der meisten Geräte beträgt 60 Mal/Sekunde (1000/60 = 16,6 ms) Mit anderen Worten: Das Rendern jedes Frames durch den Browser muss innerhalb von 16 ms abgeschlossen sein. Über diese Zeit hinaus bleibt das Rendern der Seite hängen, was sich auf das Benutzererlebnis auswirkt.

Das ist im Bild oben zu sehen

Wenn das Attribut weiter links im Bild oben geändert wird, wirkt sich das aus wird größer und die Effizienz geringer sein.

Der Prozess des Browser-Renderings ist wie folgt:

Holen Sie sich das DOM und teilen Sie es in mehrere Ebenen auf (RenderLayer)

Rasterisieren Sie jede Ebene und zeichnen Sie sie unabhängig In der Bitmap,

Laden Sie diese Bitmaps als Texturen auf die GPU hoch

, um mehrere Ebenen zu kombinieren und das endgültige Bildschirmbild (ultimative Ebene) zu generieren.

Wie Sie auf dem obigen Bild sehen können, wird die Effizienz erheblich verbessert, wenn Sie nur den Verbund ändern (Zusammenführung von Rendering-Ebenen).

Im Folgenden finden Sie eine grobe Liste, welche Stile welches Modul des Rendering-Prozesses ändern.

Wie Sie auf dem Bild oben sehen können, verändern Transformation und Deckkraft nur die Zusammensetzung (Zusammenführung der Rendering-Ebene). Weil die GPU-Beschleunigung aktiviert ist.

GPU-Beschleunigung aktivieren

Wörtliche Erklärung: Texturen können zu sehr geringen Kosten auf verschiedene Orte abgebildet werden, und sie können auch auf eine sehr einfache Weise in ein rechteckiges Raster umgewandelt werden.

[Die wörtliche Interpretation ist sehr kompliziert, aber es ist immer noch die gleiche alte Wahrheit. Verwenden Sie keine Worte, wenn Sie sie mit Bildern klar erklären können. 】

Tipps: Wählen Sie zuerst einen Frame der Zeitleiste aus und wählen Sie dann die Registerkarte „Ebenenbeschriftung“ unten aus. Sie können das Modul nach links und rechts ziehen, um es in 3D anzuzeigen.

Wir können sehen, dass die Seite zusammengesetzt ist der folgenden Ebenen:

Obwohl das, was wir am Ende im Browser sehen, nur eine Fotokopie ist, d. h. es gibt am Ende nur eine Ebene. Ähnlich dem Konzept der „Ebenen“ in der PhotoShop-Software, schließlich alle verfügbaren Ansichtsebenen zusammenführen und ein Bild auf dem Bildschirm ausgeben

Aber tatsächlich wird eine Seite angezeigt Einige Regeln sind in entsprechende Ebenen unterteilt. Sobald sie unabhängig sind, haben sie keinen Einfluss auf das Layout anderer DOMs, da sie nach der Änderung nur auf der Seite „eingefügt“ werden.

Derzeit führen folgende Faktoren dazu, dass Chrome Ebenen erstellt:

3D- oder Perspektivtransformation (Perspektivtransformation) CSS-Eigenschaften

Verwenden Sie das 39000f942b2545a5315c57fa3276f220-Element, um das Video zu beschleunigen Dekodierung

5ba626b379994d53f7acf72a64f9b697-Elemente mit 3D-Kontext (WebGL) oder beschleunigtem 2D-Kontext

Hybrid-Plugins (wie Flash)

Erstellen Sie CSS-Animationen auf Ihrer eigenen Deckkraft oder verwenden Sie eine Animations-Webkit-transformiertes Element

hat beschleunigtes CSS Filter Element

Element hat einen untergeordneten Knoten, der eine zusammengesetzte Ebene enthält (mit anderen Worten, ein Element hat ein untergeordnetes Element). Das untergeordnete Element befindet sich in einer eigenen Ebene)

Das Element hat ein Geschwisterelement mit einem niedrigeren Z-Index und enthält eine zusammengesetzte Ebene (mit anderen Worten, das Element wird über der zusammengesetzten Ebene gerendert)

Wenn in Webkit-basierten Browsern die oben genannte Situation eintritt, wird eine unabhängige Ebene erstellt.

Achten Sie darauf, nicht zu viele Renderebenen zu erstellen, was eine neue Speicherzuweisung und eine komplexere Ebenenverwaltung bedeutet. Missbrauchen Sie die GPU-Beschleunigung nicht, achten Sie darauf, ob zusammengesetzte Layouts 16 ms überschreiten

Nach so vielen Prinzipien des Browser-Renderings ist es sinnlos, ohne Lineal zu messen. Wählen wir also ein Lineal zum Messen aus: Zeitleiste der Google-Entwicklungstools.

2. Allgemeine Funktionen des Google-Entwicklungstools Timeline

1. Die Aufnahme endet. Der rote Bereich ist der Frame. Wenn er höher ist, können Sie die Frequenz jedes Frames sehen.

2 Unter der Zeitleiste können Sie den Zeitverbrauch jedes Moduls sehen und die Zeit finden. verbrauchen Über der Funktion optimieren Sie die Funktion.

3. Befolgen Sie die Schritte unten, um die unabhängige Ebene auszuwählen und den neu gezeichneten Bereich hervorzuheben praktisch Finden Sie die unnötigen Neuzeichnungsbereiche und optimieren Sie sie

Nach der Auswahl erscheinen die folgenden 2 Farbränder auf der aktuellen Seite

gelber Rand: Elemente mit animierten 3D-Transformationen werden in einer neuen zusammengesetzten Ebene (zusammengesetzte Ebene) platziert, um

blaues Gitter zu rendern: Diese Blöcke können als Einheiten auf einer niedrigeren Ebene als die Ebene betrachtet werden. Chrome nimmt diese Blöcke als Einheiten Der Inhalt eines Blocks wird jeweils auf die GPU hochgeladen.

Tools sind ebenfalls verfügbar und die Prinzipien des Browser-Renderings sind ebenfalls bekannt. Der nächste Schritt besteht darin, basierend auf tatsächlichen Projekten zu optimieren.

3 tatsächliche Projekte 16,6 ms Optimierung

In Kombination mit dem obigen Rendering-Flussdiagramm können wir einige der folgenden Schritte gezielt analysieren und optimieren

Optimieren Sie die Ausführungseffizienz von JavaScript

Reduzieren Sie den Umfang und die Komplexität der Stilberechnung

Vermeiden Sie große und komplexe Layouts

Vereinfachen Sie die Komplexität des Zeichnens und reduzieren Sie die Zeichenfläche

Priorisieren Sie die Verwendung von Rendering-Ebenen zum Zusammenführen von Attributen. Anzahl der Steuerungsebenen

Entprellungsverarbeitungsfunktion für Benutzereingabeereignisse (mobile Geräte)

1 Schreibtrennung, Stapeloperationen

Wenn das JavaScript-Skript ausgeführt wird, stammen die Elementstilattributwerte, die es abrufen kann, alle aus dem vorherigen Frame und sind alle alte Werte.

Wenn Sie also Änderungen am Elementknoten vornehmen, bevor Sie die Attribute im aktuellen Frame erhalten, führt dies dazu, dass der Browser zuerst die Attributänderungen anwendet, dann den Layoutprozess ausführt und schließlich die JavaScript-Logik ausführt.

// 先写后读，触发强制布局
function logBoxHeight() {
    // 更新box样式
    box.classList.add('super-big');
 
    // 为了返回box的offersetHeight值
    // 浏览器必须先应用属性修改，接着执行布局过程
    console.log(box.offsetHeight);
}

Nach der Optimierung:

// 先读后写，避免强制布局
function logBoxHeight() {
    // 获取box.offsetHeight
    console.log(box.offsetHeight);
 
    // 更新box样式
    box.classList.add('super-big');
}

2. Ergebnisse der Schließung des Caches (Funktionen, die häufige Aufrufe und Berechnungen erfordern)

getMaxWidth: (function () {
            var cache = {};
            function getwidth() {
                if (maxWidth in cache) {
                    return cache[maxWidth];
                }
                var target = this.node,
                 width = this.width,
                  screen = document.body.clientWidth,
                   num = target.length,
                  maxWidth = num * width + 10 * num + 20 - screen;
                cache[maxWidth] = maxWidth;
                 return maxWidth;
             }
             return getwidth;
})(),

Nach dem Wechsel zu dieser Methode funktioniert es einfach~ Es reduziert mehr als 10 ms

3. Entprellen Sie die Funktion zur Verarbeitung von Benutzereingabeereignissen

Wenn das berührte Element an eine Eingabefunktion Ereignisverarbeitung gebunden ist, wie z. B. touchstart/touchmove/touchend, muss der Thread zum Zusammenführen der Rendering-Ebene warten, bis diese gebundenen Verarbeitungsfunktionen abgeschlossen sind, bevor er ausgeführt wird. Der Seitenlaufvorgang des Benutzers ist blockiert und das angezeigte Verhalten besteht darin, dass der Bildlauf verzögert ist oder hängen bleibt.

Kurz gesagt, Sie müssen sicherstellen, dass jede an das Benutzereingabeereignis gebundene Verarbeitungsfunktion schnell ausgeführt werden kann, um dem Rendering-Layer-Merger-Thread Zeit zu geben, seine Arbeit abzuschließen.

Eingabeereignisverarbeitungsfunktionen, wie z. B. Scroll-/Touch-Ereignisverarbeitung, werden vor requestAnimationFrame aufgerufen und ausgeführt. Wenn Sie daher die Stilattribute im obigen Eingabeereignishandler ändern, werden diese Vorgänge vorübergehend vom Browser gespeichert.

Wenn Sie dann beim Aufrufen von requestAnimationFrame die Stilattribute am Anfang lesen, wird die erzwungene Synchronisierung des Layoutvorgangs des Browsers ausgelöst (dh das Layout wird in der Javascript-Phase ausgeführt). Dies führt zu mehreren und niedrigen Layouts Effizienz.

Die Optimierung ist wie folgt:

window.requestAnimationFrame(function () {
    context.animateTo(nowPos);  //需要更新位置的交给RAF
});

4. Reduzieren Sie unnötiges Neuzeichnen

Fortsetzung von oben nach dem Einschalten der Farbe Wenn die Anzeige blinkt, können Sie sehen, welche Bereiche der Browser neu zeichnet. Ich habe festgestellt, dass auch einige unnötige Neuzeichnungsbereiche neu gezeichnet wurden ~ Aktivieren Sie die GPU-Optimierung für diese (oben erwähnt)

Schauen Sie sich direkt den Timeline-Effekt an, alles ist grün~ Ich habe endlich meine Sorgen losgelassen

Es gibt viele Tipps für die mobile Entwicklung. Heute werde ich Ihnen diesen leistungsstarken Entwicklungstipp geben Achten Sie weiterhin auf unsere Website PHP.cn

Verwandte Lektüre:

Die Entwicklung mobiler Endgeräte verwaltet die horizontalen und vertikalen Bildschirme mobiler Geräte

Grundlegende Kenntnisse für die Entwicklung mobiler Endgeräte (nachgedruckt)_html/css_WEB-ITnose

Einige Tipps für die mobile Entwicklung_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine leistungsstarke mobile Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!