Arayüzlerde Debounce ve Throttle Neden Önemlidir

Bazı DOM olayları son derece yüksek sıklıkta tetiklenir. keypress olayı her tuş vuruşunda tetiklenir. scroll olayı kaydırma sırasında saniyede onlarca kez tetiklenir. Kullanıcı pencerenin kenarını sürüklerken resize olayı sürekli tetiklenir. Her olayı ayrı ayrı işlemek hem tarayıcıyı hem de sunucunuzu aşırı yükleyebilir.

Tuş vuruşu işleyiciniz her tuş vuruşunda bir uygulama programlama arayüzü çağrısı yapıyorsa, "React kancaları" yazan bir kullanıcı (11 karakter) çoğu tamamlanmamış sorgular için olmak üzere 11 ağ isteği tetikler. Benzer şekilde, her kaydırma pikselinde paralaks animasyonunu güncellemek saniyede yüzlerce React yeniden çizimi tetikler. Bu durum CPU'yu, ağı ve pili gereksiz yere tüketir.

Gecikmeli çalıştırma, olay belirli bir süre boyunca tetiklenmeyi bıraktıktan sonra çalıştırmayı geciktirir. Kullanıcı yazmaya devam ediyorsa zamanlayıcı her tuş vuruşunda sıfırlanır. İşleyici ancak N milisaniye boyunca sessizlik olduktan sonra bir kez çalışır. Gecikmeli çalıştırma şu soruya yanıt verir: "Kullanıcı bir işi bitirdikten sonra bunu çalıştır."

Hız sınırlama, kaç olay tetiklenirse tetiklensin çalıştırmayı bir zaman aralığında en fazla bir kez olacak şekilde sınırlar. Kullanıcı hızla kaydırıyorsa 100 ms'lik hız sınırlama, işleyicinizin saniyede 10 kereden fazla çalışmamasını sağlar. Hız sınırlama şu soruya yanıt verir: "Bunu düzenli olarak, ancak N ms'den daha sık olmayacak şekilde çalıştır."

Gecikmeli çalıştırma, yalnızca kullanıcı durduktan sonraki son değerle ilgilendiğinizde doğru seçimdir. Klasik durumlar şunlardır: arama girdisi (yazmaya ara verildikten sonra uygulama programlama arayüzüne istek gönderme), pencere yeniden boyutlandırma işleyicisi (yeniden boyutlandırma bittikten sonra yerleşimi yeniden hesaplama) ve bir sunucuyu denetleyen form alanı doğrulaması (doğrulamadan önce tam girişin yapılmasını bekleme).

Hız sınırlama, sürekli etkinlik sırasında düzenli güncellemeler istediğinizde doğru seçimdir. Klasik durumlar şunlardır: kaydırma konumu işleyicisi (okuma ilerleme çubuğunu veya sabit başlığı saniyede en fazla 30 kare hızında güncelleme), fare hareketi izleme (imleç konumunu analiz için kaydetme) ve sürükleme olayı işleyicileri (aşırı yükleme yapmadan sürüklenebilir öğenin konumunu akıcı biçimde güncelleme).

Bir gecikmeli çalıştırma veya hız sınırlama işlevini tüm ayrıntılarını anlamadan sıfırdan yazmak; son olayı kaçırma (bitiş kenarı), yanlış kenarlarda tetiklenme veya bileşen kaldırıldığında zamanlayıcıları temizlememe gibi hatalara yol açar. Genellikle, tüm uç durumları doğru biçimde ele alan lodash gibi kütüphanelerdeki kapsamlı şekilde sınanmış uygulamaları kullanmak daha iyidir.

Lodash, başlangıç ve bitiş kenarı davranışları için seçeneklerle birlikte _.debounce(fn, wait) ve _.throttle(fn, wait) işlevlerini sağlar. Döndürülen işlevde bekleyen bir çağrıyı iptal etmek için .cancel(), çağrıyı hemen çalıştırmak için .flush() yöntemi bulunur. Yeniden çizim sırasında yeniden oluşturulmalarını önlemek için bunlar React'te useRef ile sarılmalıdır.

Hız sınırlaması uygulanmamış bir kaydırma işleyicisinin saniyede yalnızca 50 ek React yeniden çizimi bile, özellikle düşük donanımlı mobil cihazlarda önemli miktarda CPU tüketebilir. 16 ms'lik kare bütçesi (saniyede 60 kare), kare atlamalarını önlemek için her yeniden çizimin 16 milisaniyeden kısa sürede tamamlanması gerektiği anlamına gelir. Gecikmeli çalıştırma ve hız sınırlama, kare hızı sorunlarına karşı ilk savunma hattınızdır.

Yüksek frekanslı her işleyicinin gecikmeli çalıştırmaya ihtiyacı yoktur. Olay işleyicisi yalnızca bir değeri okuyorsa ve durumu güncellemiyor ya da uygulama programlama arayüzlerini çağırmıyorsa — örneğin son fare konumunu bir referansta kaydediyorsa — gecikmeli çalıştırma gerekmez. Yalnızca pahalı işlemleri tetikleyen işleyicilere gecikmeli çalıştırma veya hız sınırlama uygulayın: durum güncellemeleri, uygulama programlama arayüzü çağrıları veya DOM ölçümleri.

Bir bileşen kaldırıldığında, kaldırma sonrasında bir durum güncellemesini önlemek için bekleyen gecikmeli çağrı iptal edilmelidir. Gecikmeli işlevi depolamak için useRef kullanıyorsanız, useEffect temizleme işleminde debouncedFn.cancel() çağrısını yapın. Lodash gecikmeli işlevleri bu yöntemi tam olarak bu amaçla sunar.

Kullanıcı bir arama alanında yazmayı bıraktığında bir uygulama programlama arayüzü çağrısı yapmak için hangi tekniği kullanmalısınız?

keypress, scroll ve resize gibi yüksek frekanslı olaylar, işleyiciler her olayda çalışırsa performans sorunlarına yol açabilir. Gecikmeli çalıştırma sessizliği bekler ve arama girdileri ile yeniden boyutlandırma işleyicileri için en uygunudur. Hız sınırlama sıklığı sınırlar ve kaydırma ile sürükleme için en uygunudur. Lodash uygulamalarını referanslarda saklayın ve bileşen kaldırıldığında her zaman iptal edin.