Eingabe-Handler entprellen

Eingabe-Handler sind eine mögliche Ursache für Leistungsprobleme in Ihren Apps, da sie die Ausführung von Frames blockieren und zusätzliche und unnötige Layoutarbeiten verursachen können.

Eingabe-Handler können eine mögliche Ursache für Leistungsprobleme in Ihren Apps sein, da sie die Ausführung von Frames blockieren und zusätzliche und unnötige Layoutarbeiten verursachen können.

Zusammenfassung

• Vermeiden Sie Eingabe-Handler mit langer Ausführungszeit, da sie das Scrollen blockieren können.
• Nehmen Sie keine Stiländerungen in Eingabe-Handlern vor.
• Entprellen Sie Ihre Handler. Speichern Sie Ereigniswerte und gehen Sie Stiländerungen im nächsten requestAnimationFrame-Callback vor.

Eingabe-Handler mit langer Ausführungszeit vermeiden

Im schnellstmöglichen Fall, wenn ein Nutzer mit der Seite interagiert, kann der Compositor-Thread der Seite die Eingabe per Berührung übernehmen und den Inhalt einfach verschieben. Der Hauptthread muss nicht bearbeitet werden. JavaScript, Layout, Stile oder Paint werden ausgeführt.

Wenn Sie jedoch einen Eingabe-Handler wie touchstart, touchmove oder touchend anhängen, muss der Compositor-Thread warten, bis dieser Handler ausgeführt wurde, da Sie preventDefault() aufrufen und das Scrollen durch Berührung stoppen können. Auch wenn Sie nicht preventDefault() aufrufen, muss der Compositor warten. Daher wird das Scrollen des Nutzers blockiert, was zu Ruckeln und verpassten Frames führen kann.

Kurz gesagt: Sie sollten darauf achten, dass alle von Ihnen ausgeführten Eingabe-Handler schnell ausgeführt werden und dem Compositor die Ausführung seiner Aufgabe ermöglichen.

Stiländerungen in Eingabe-Handlern vermeiden

Eingabe-Handler, z. B. für Scrollen und Tippen, werden so geplant, dass sie unmittelbar vor requestAnimationFrame-Callbacks ausgeführt werden.

Wenn Sie in einem dieser Handler eine visuelle Änderung vornehmen, stehen am Anfang von requestAnimationFrame Stiländerungen aus. Wenn Sie dann zu Beginn des requestAnimationFrame-Callbacks die visuellen Eigenschaften lesen, wie unter Große, komplexe Layouts und Layoutänderungen vermeiden beschrieben wird, wird ein erzwungenes synchrones Layout ausgelöst.

Scroll-Handler entfesseln

Die Lösung für die beiden oben genannten Probleme ist dieselbe: Du solltest visuelle Änderungen am nächsten requestAnimationFrame-Callback immer entwerten:

function onScroll (evt) {

    // Store the scroll value for laterz.
    lastScrollY = window.scrollY;

    // Prevent multiple rAF callbacks.
    if (scheduledAnimationFrame)
    return;

    scheduledAnimationFrame = true;
    requestAnimationFrame(readAndUpdatePage);
}

window.addEventListener('scroll', onScroll);

Dies hat auch den zusätzlichen Vorteil, dass die Eingabe-Handler gering sind. Das ist praktisch, weil Sie Elemente wie Scrollen oder Tippen auf rechenintensiven Code nicht mehr blockieren.