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şleyiciler, karelerin tamamlanmasını engelleyebileceği ve fazladan 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şleyicilerde stil değişikliği yapmayın.
- İşleyicilerinizin gecikmesini kaldırın; etkinlik değerlerini saklayın ve bir sonraki requestAnimationFrame geri çağırma işlevinde stil değişikliklerini ele alın.
Uzun çalışan giriş işleyicilerden kaçınma
Kullanıcı sayfayla etkileşime geçtiğinde 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.
Bununla birlikte, touchstart, touchmove veya touchend gibi bir giriş işleyici eklerseniz, preventDefault() çağrısı yapmayı ve dokunma kaydırmanın gerçekleşmesini durdurmayı seçebilirsiniz. Bu nedenle, birleştirici iş parçacığının bu işleyicinin yürütmesini tamamlamasını beklemesi gerekir. preventDefault() öğesini çağırmasanız bile birleştiricinin beklemesi gerekir ve kullanıcının kaydırma işlemi engellenir. Bu, takılmaya ve karelerin kaçırılmasına neden olabilir.
Özetlemek gerekirse, çalıştırdığınız 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şleyicilerde stil değişikliklerinden kaçınma
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 öğesinin başında bekleyen stil değişiklikleri olur. Daha sonra, requestAnimationFrame geri çağırmasının başında görsel özellikleri okursanız "Büyük, karmaşık düzenlerden ve düzen taşmasından kaçının" bölümündeki tavsiyede de belirtildiği gibi, zorunlu bir eşzamanlı düzeni tetiklersiniz.
Kaydırma işleyicilerinizin çıktısını çıkarın
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);
Bu işlem, giriş işleyicilerinizin açık tutulması gibi ek bir avantaj sağlar. Bu harika bir olanaktır çünkü artık kaydırma veya işlem yükü açısından pahalı kodlara dokunma gibi işlemleri engellememiş olursunuz.