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 sind eine mögliche Ursache für Leistungsprobleme in Ihren Apps, da sie das Abschließen von Frames blockieren und zusätzlichen und unnötigen Layoutaufwand verursachen können.

Zusammenfassung

• Vermeiden Sie lang laufende Eingabe-Handler, da sie das Scrollen blockieren können.
• Nehmen Sie keine Stiländerungen in Eingabe-Handlern vor.
• Entprellen Sie Ihre Handler, speichern Sie Ereigniswerte und nehmen 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 Touch-Eingabe des Nutzers übernehmen 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. Auch wenn Sie preventDefault() nicht aufrufen, muss der Renderer warten. Das Scrollen des Nutzers wird blockiert, was zu Rucklern und fehlenden 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 die für Scrollen und Berühren werden kurz vor allen requestAnimationFrame-Callbacks ausgeführt.

Wenn Sie in einem dieser Handlers eine visuelle Änderung vornehmen, werden zu Beginn der requestAnimationFrame ausstehende Stiländerungen angezeigt. Wenn Sie dann visuelle Eigenschaften zu Beginn des requestAnimationFrame-Callbacks lesen, wie in der Empfehlung unter Große, komplexe Layouts und Layout-Trashing vermeiden vorgeschlagen, lösen Sie ein erzwungenes synchrones Layout aus.

Scroll-Handler entkoppeln

Die Lösung für die beiden oben genannten 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);

Außerdem haben Sie so den Vorteil, dass Ihre Eingabe-Handler schlanker bleiben. Das ist großartig, weil Sie jetzt keine Dinge wie Scrollen oder Touch-Ereignisse durch rechenswüstigen Code blockieren.