Warum Debounce und Throttle in UIs wichtig sind

Bestimmte DOM-Ereignisse werden mit extrem hoher Frequenz ausgelöst. Das keypress-Ereignis wird bei jedem Tastendruck ausgelöst. Das scroll-Ereignis wird während des Scrollens dutzende Male pro Sekunde ausgelöst. Das resize-Ereignis wird kontinuierlich ausgelöst, während der Benutzer den Fensterrand zieht. Die Verarbeitung jedes einzelnen Ereignisses kann sowohl den Browser als auch Ihren Server überlasten.

Wenn Ihr keypress-Handler bei jedem Tastendruck einen API-Aufruf ausführt, löst ein Benutzer, der „React hooks“ (11 Zeichen) eingibt, 11 Netzwerkanfragen aus – die meisten davon betreffen unvollständige Suchanfragen. Ebenso führt die Aktualisierung einer Parallax-Animation bei jedem einzelnen Scroll-Pixel zu Hunderten von React-Neurenderings pro Sekunde. Das verschwendet CPU-Leistung, Netzwerkressourcen und Akkuladung.

Debounce verzögert die Ausführung, bis das Ereignis für einen bestimmten Zeitraum nicht mehr ausgelöst wurde. Wenn der Benutzer weiter tippt, wird der Timer bei jedem Tastendruck zurückgesetzt. Erst nach N Millisekunden ohne Eingabe wird der Handler schließlich genau einmal ausgeführt. Debounce bedeutet: „Dies ausführen, nachdem der Benutzer mit einer Aktion fertig ist.“

Throttle begrenzt die Ausführung unabhängig von der Anzahl ausgelöster Ereignisse auf höchstens einmal pro Zeitintervall. Wenn der Benutzer schnell scrollt, stellt ein Throttle von 100 ms sicher, dass Ihr Handler höchstens zehnmal pro Sekunde ausgeführt wird. Throttle bedeutet: „Regelmäßig ausführen, aber nicht häufiger als alle N ms.“

Debounce ist die richtige Wahl, wenn Sie nur den endgültigen Wert benötigen, nachdem der Benutzer aufgehört hat. Typische Fälle sind ein Sucheingabefeld (API-Anfrage nach einer Tipp-Pause senden), ein Handler für die Fenstergröße (Layout nach Ende der Größenänderung neu berechnen) und die Validierung eines Formularfelds über einen Server (mit der Validierung warten, bis die vollständige Eingabe vorliegt).

Throttle ist die richtige Wahl, wenn Sie während einer kontinuierlichen Aktivität regelmäßige Aktualisierungen benötigen. Typische Fälle sind ein Handler für die Scrollposition (eine Lesefortschrittsanzeige oder einen Sticky Header mit höchstens 30 fps aktualisieren), die Verfolgung von Mausbewegungen (die Cursorposition für Analytics-Daten erfassen) und Handler für Drag-Ereignisse (die Position eines verschiebbaren Elements flüssig aktualisieren, ohne eine Flut von Ereignissen zu erzeugen).

Wenn Sie Debounce oder Throttle ohne vollständiges Verständnis selbst implementieren, kann das zu Fehlern führen, etwa zum Auslassen des letzten Ereignisses (Trailing Edge), zum Auslösen am falschen Rand oder dazu, dass Timer beim Unmounten einer Komponente nicht bereinigt werden. Im Allgemeinen ist es besser, bewährte Implementierungen aus Bibliotheken wie lodash zu verwenden, die alle Sonderfälle korrekt behandeln.

Lodash stellt _.debounce(fn, wait) und _.throttle(fn, wait) mit Optionen für das Verhalten am Leading und Trailing Edge bereit. Die zurückgegebene Funktion verfügt über eine .cancel()-Methode, um einen ausstehenden Aufruf abzubrechen, und eine .flush()-Methode, um ihn sofort auszuführen. In React sollten diese Funktionen in useRef gespeichert werden, damit sie bei einem erneuten Rendern nicht neu erstellt werden.

Selbst 50 zusätzliche React-Neurenderings pro Sekunde durch einen ungebremsten Scroll-Handler können erheblich CPU-Leistung beanspruchen, insbesondere auf leistungsschwachen Mobilgeräten. Ein Frame-Budget von 16 ms (60 fps) bedeutet, dass jedes Neurendering in weniger als 16 Millisekunden abgeschlossen sein muss, damit keine Frames verloren gehen. Debounce und Throttle sind Ihre erste Verteidigungslinie gegen Probleme mit der Bildrate.

Nicht alle Handler mit hoher Frequenz müssen per Debounce begrenzt werden. Wenn der Event-Handler lediglich einen Wert ausliest, ohne den State zu aktualisieren oder APIs aufzurufen – beispielsweise indem er die letzte Mausposition in einer Ref speichert –, ist kein Debounce erforderlich. Verwenden Sie Debounce oder Throttle nur für Handler, die aufwendige Vorgänge auslösen: State-Updates, API-Aufrufe oder DOM-Messungen.

Wenn eine Komponente ungemountet wird, sollte jeder ausstehende Debounce-Aufruf abgebrochen werden, damit danach kein State-Update mehr erfolgt. Wenn Sie eine useRef zum Speichern der debouncten Funktion verwenden, rufen Sie debouncedFn.cancel() in der Bereinigung von useEffect auf. Debouncte Funktionen von Lodash stellen diese Methode genau für diesen Zweck bereit.

Welche Technik sollten Sie verwenden, um einen API-Aufruf auszulösen, wenn der Benutzer die Eingabe in einem Suchfeld beendet?

Ereignisse mit hoher Frequenz wie keypress, scroll und resize können zu Performanceproblemen führen, wenn Handler bei jedem Ereignis ausgeführt werden. Debounce wartet auf eine Pause und eignet sich am besten für Sucheingaben und Handler zur Größenänderung. Throttle begrenzt die Frequenz und eignet sich am besten für Scroll- und Drag-Ereignisse. Verwenden Sie in Refs gespeicherte Lodash-Implementierungen und brechen Sie sie beim Unmounten der Komponente immer ab.