JavaScript-Ausführung optimieren

JavaScript löst häufig visuelle Änderungen aus. Manchmal geschieht dies direkt durch Stiländerungen und manchmal sind es Berechnungen, die visuelle Änderungen zur Folge haben, z. B. das Durchsuchen oder Sortieren von Daten. JavaScript mit schlechtem Zeitlimit oder mit langer Ausführungszeit ist eine häufige Ursache für Leistungsprobleme. Versuchen Sie, die Auswirkungen möglichst gering zu halten.

JavaScript löst häufig visuelle Änderungen aus. Manchmal ist das direkt durch Stiländerungen und manchmal sind es Berechnungen, die visuelle Änderungen wie Suchen oder Sortieren von Daten führen. Falsches Timing oder JavaScript mit langer Ausführungszeit eine häufige Ursache für Leistungsprobleme. Versuchen Sie, die Auswirkungen möglichst gering zu halten.

Die Erstellung von JavaScript-Leistungsprofilen kann eine Kunst sein, weil das von Ihnen geschriebene JavaScript der tatsächlich ausgeführt wird. Moderne Browser nutzen JIT-Compiler und alle möglichen Optimierung und Tricks zur schnellstmöglichen Umsetzung. die Dynamik des Codes erheblich verändert.

Vor diesem Hintergrund gibt es jedoch einige Dinge, die Sie tun können, um die Ausführung Ihrer Apps zu verbessern. und JavaScript verwenden.

Zusammenfassung

• Vermeiden Sie setTimeout oder setInterval für visuelle Updates. Verwenden Sie stattdessen immer requestAnimationFrame.
• JavaScript mit langer Ausführungszeit aus dem Hauptthread zu Web Workern verschieben
• Mithilfe von Mikroaufgaben können Sie DOM-Änderungen über mehrere Frames hinweg vornehmen.
• Nutze die Zeitachse und den JavaScript-Profiler der Chrome-Entwicklertools, um die Auswirkungen von JavaScript zu bewerten.

requestAnimationFrame für visuelle Änderungen verwenden

Wenn sich die visuelle Darstellung auf dem Bildschirm ändert, sollten Sie die Arbeit zum richtigen Zeitpunkt für die Browser, der sich direkt am Anfang des Frames befindet. Die einzige Möglichkeit, sicherzustellen, am Anfang eines Frames ausgeführt wird, ist die Verwendung von requestAnimationFrame.

/**
    * If run as a requestAnimationFrame callback, this
    * will be run at the start of the frame.
    */
function updateScreen(time) {
    // Make visual updates here.
}

requestAnimationFrame(updateScreen);

Frameworks oder Beispiele können setTimeout oder setInterval verwenden, um visuelle Änderungen wie Animationen, Das Problem dabei ist, dass der Callback an einer bestimmten Stelle im Frame ausgeführt wird. Dies kann oft dazu führen, dass wir einen Frame übersehen, was zu Verzögerungen führt.

Tatsächlich wurde in jQuery setTimeout für sein animate-Verhalten verwendet. Es wurde geändert zu requestAnimationFrame in Version 3. Wenn Sie eine ältere Version von jQuery verwenden, Patch es zur Verwendung von requestAnimationFrame, Dies wird dringend empfohlen.

Weniger Komplexität oder Einsatz von Web Workern

JavaScript wird im Hauptthread des Browsers ausgeführt, direkt neben Stilberechnungen, Layout und in vielen Fällen, Farbe. Wenn Ihr JavaScript über einen längeren Zeitraum ausgeführt wird, werden diese anderen Aufgaben blockiert, möglicherweise dazu führen, dass Frames übersehen werden.

Überlegen Sie genau, wann und wie lange JavaScript ausgeführt wird. Wenn Sie sich zum Beispiel in einem wie z. B. Scrollen, sollten Sie darauf achten, dass Ihr JavaScript Region von 3–4 ms. Je länger dieser Wert ist, desto mehr nimmst du möglicherweise zu viel Zeit in Anspruch. Wenn Sie inaktiv sind Zeit haben, können Sie es sich leisten, weniger Zeit in Anspruch zu nehmen.

In vielen Fällen können Sie reine Rechenarbeit Web Worker wenn beispielsweise kein DOM-Zugriff erforderlich ist. Datenmanipulation oder Datendurchlauf, wie Sortieren oder Suchen, eignen sich für dieses Modell oft gut, ebenso wie das Laden und die Modellgenerierung.

var dataSortWorker = new Worker("sort-worker.js");
dataSortWorker.postMesssage(dataToSort);

// The main thread is now free to continue working on other things...

dataSortWorker.addEventListener('message', function(evt) {
    var sortedData = evt.data;
    // Update data on screen...
});

Nicht jede Arbeit passt zu diesem Modell: Web Worker haben keinen DOM-Zugriff. Wenn sich Ihre Arbeit im Hauptthread befinden muss, sollten Sie einen Batch-Ansatz in Betracht ziehen, bei dem Sie die größere Aufgabe in Mikroaufgaben aufteilen, die jeweils nicht länger als ein paar Millisekunden dauern und in jedem Frame innerhalb von requestAnimationFrame-Handlern ausgeführt werden.

Dieser Ansatz hat Auswirkungen auf die UX und die Benutzeroberfläche und Sie müssen sicherstellen, dass die Nutzenden wissen, dass eine Aufgabe verarbeitet wird, entweder über eine Fortschritts- oder Aktivitätsanzeige. In jedem Fall bleibt der Hauptthread Ihrer App kostenlos, sodass sie weiterhin auf Nutzerinteraktionen.

Die „Frame Tax“ in JavaScript

Wenn Sie ein Framework, eine Bibliothek oder Ihren eigenen Code bewerten, ist es wichtig, wie viel es kostet, den JavaScript-Code auf Frame-für-Frame-Basis auszuführen. Dies ist sind besonders wichtig, wenn leistungskritische Animationen wie oder Scrollen.

Der Bereich „Leistung“ der Chrome-Entwicklertools ist die beste Möglichkeit, JavaScript-Kosten. In der Regel erhalten Sie Low-Level-Datensätze wie folgt:

Der Bereich Main enthält ein Flame-Diagramm mit JavaScript-Aufrufen, können Sie genau analysieren, welche Funktionen aufgerufen wurden und wie lange diese gedauert haben.

Anhand dieser Informationen können Sie dann die Auswirkungen des und beheben Sie Hotspots, die Ausführung der Funktionen zu lange dauert. Wie bereits erwähnt, sollten Sie JavaScript mit langer Ausführungszeit entfernen oder, falls dies nicht möglich ist, an einen Web Worker senden, sodass der Hauptthread freigegeben und andere Aufgaben erledigt werden können.

Unter Erste Schritte mit der Analyse der Laufzeitleistung erfahren Sie mehr über die Verwendung von „Leistung“.

Vermeiden Sie eine Mikrooptimierung Ihres JavaScript-Codes.

Es mag cool sein zu wissen, dass ein Browser eine Version einer Sache 100 Mal schneller ausführen kann etwas anderes, z. B. dass die Anforderung des offsetTop eines Elements schneller ist als die Berechnung getBoundingClientRect(), aber es stimmt fast immer, dass Sie nur Funktionen wie nur wenige Male pro Frame. Es ist also keine Mühe wert, sich auf diesen Aspekt des JavaScript-Leistung Normalerweise sparen Sie nur Sekundenbruchteile.

Wenn Sie ein Spiel oder eine rechenintensive Anwendung entwickeln, sind Sie wahrscheinlich eine Ausnahme. da Sie in der Regel viele Berechnungen auf einen einzelnen Frame in diesem Fall ist alles hilfreich.

Kurz gesagt: Sie sollten bei Mikrooptimierungen vorsichtig sein, da diese in der Regel nicht den die Sie entwickeln.