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.

Paul Lewis

Eingabe-Handler sind eine mögliche Ursache für Leistungsprobleme in Ihren Apps, Sie können Frames blockieren und zu zusätzlichen und unnötigen Layoutarbeit.

Zusammenfassung

• Vermeiden Sie Eingabe-Handler mit langer Ausführungszeit. das Scrollen blockieren.
• Nehmen Sie keine Stiländerungen in Eingabe-Handlern vor.
• Entprellen Sie Ihre Handler: Ereigniswerte speichern und Stiländerungen im nächsten requestAnimationFrame-Callback behandeln.

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 Berührungseingabe des Nutzers annehmen und den Inhalt einfach verschieben. Dies erfordert keine Arbeit durch den Hauptthread, in dem JavaScript, Layout, Styles oder Paint erstellt werden.

Wenn Sie jedoch einen Eingabe-Handler wie touchstart, touchmove oder touchend anhängen, muss der Compositor-Thread warten, bis dieser Handler ausgeführt wird. Sie haben dann die Möglichkeit, preventDefault() aufzurufen und das Scrollen durch Berührung zu stoppen. Selbst wenn Sie preventDefault() nicht aufrufen, muss der Compositor warten, wodurch das Scrollen des Nutzers blockiert wird, was zu Ruckeln und verpassten Frames führen kann.

Kurz gesagt: Sie sollten sicherstellen, dass alle von Ihnen ausgeführten Eingabe-Handler schnell ausgeführt werden, damit der Compositor seine Aufgabe erledigen kann.

Stiländerungen in Eingabe-Handlern vermeiden

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

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

Scroll-Handler entprellen

Die Lösung für die beiden obigen Probleme ist dieselbe: Du solltest visuelle Änderungen immer an den nächsten requestAnimationFrame-Callback entprellen:

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);

Das hat auch den zusätzlichen Vorteil, dass die Eingabe-Handler möglichst klein gehalten werden. Das ist großartig, weil jetzt Dinge wie das Scrollen oder das Tippen auf rechenintensiven Code nicht blockiert werden.