Giriş işleyicileri, karelerin tamamlanmasını engelleyebileceği ve ek ve gereksiz düzen çalışmasına neden olabileceği için uygulamalarınızdaki performans sorunlarının olası bir nedenidir.
Giriş işleyicileri, karelerin tamamlanmasını engelleyebileceği ve ek ve gereksiz düzen çalışmasına neden olabileceği için uygulamalarınızdaki performans sorunlarının olası bir nedenidir.
Özet
- Uzun süre çalışan giriş işleyicilerden kaçının. Bunlar kaydırmayı engelleyebilir.
- Giriş işleyicilerinde stil değişiklikleri yapmayın.
- İşleyicilerinizin gecikmesini kaldırın; etkinlik değerlerini saklayın ve bir sonraki requestAnimationFrame geri çağırma işlevinde stil değişiklikleriyle ilgilenin.
Uzun süre çalışan giriş işleyicilerden kaçının
Mümkün olan en hızlı durumda, kullanıcı sayfayla etkileşimde bulunduğunda sayfanın derleyici iş parçacığı, kullanıcının dokunma girişini alıp içeriği kolayca taşıyabilir. Bu işlem için ana iş parçacığının (JavaScript, düzen, stiller veya boyamanın yapıldığı) çalışması gerekmez.
Ancak touchstart, touchmove veya touchend gibi bir giriş işleyici eklerseniz preventDefault()'ı çağırıp dokunma kaydırma işlemini durdurmayı seçebileceğiniz için, birleştirici iş parçacığı bu işleyicinin yürütülmesinin tamamlanmasını beklemelidir. preventDefault() çağrısı yapmasanız bile, derleyicinin beklemesi gerekir. Bu nedenle, kullanıcının kaydırma işlemi engellenir. Bu da takılmalara ve atlanan karelere neden olabilir.
Özetle, çalıştırdığınız tüm giriş işleyicilerinin hızlı bir şekilde yürütüldüğünden ve birleştiricinin işini yapmasına izin verdiğinden emin olmanız gerekir.
Giriş işleyicilerinde stil değişikliklerinden kaçının
Kaydırma ve dokunma gibi giriş işleyicileri, requestAnimationFrame geri çağırmalarından hemen önce çalışacak şekilde planlanır.
Bu işleyicilerden birinde görsel bir değişiklik yaparsanız requestAnimationFrame'ün başında bekleyen stil değişiklikleri olur. Ardından requestAnimationFrame geri çağırma işlevinin başında görsel özellikleri okursanız "Büyük, karmaşık düzenlerden ve düzen karmaşasından kaçının" başlıklı makalede de belirtildiği gibi zorunlu senkronize bir düzen tetiklersiniz.
Kaydırma işleyicilerinizin gecikmesini kaldırma
Yukarıdaki sorunların her ikisinin de çözümü aynıdır: Görsel değişiklikleri her zaman bir sonraki requestAnimationFrame geri çağırma işlevinde debounce etmeniz gerekir:
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);
Bunu yapmak, giriş işleyicilerinizin hafif kalmasını sağlamanın da ek avantajını sağlar. Bu sayede, hesaplama açısından pahalı kodlarda kaydırma veya dokunma gibi işlemleri engellemezsiniz.