Giriş işleyiciler, karelerin tamamlanmasını engelleyebildikleri ve ek ve gereksiz düzen çalışmasına neden olabildikleri için uygulamalarınızdaki performans sorunlarının olası bir nedenidir.
Giriş işleyiciler, karelerin tamamlanmasını engelleyebildikleri ve ek ve gereksiz düzen çalışmasına neden olabildikleri için uygulamalarınızdaki performans sorunlarının olası bir nedenidir.
Özet
- Uzun süren giriş işleyicilerden kaçının. Bu işleyiciler kaydırmayı engelleyebilir.
- Giriş işleyicilerinde stil değişiklikleri yapmayın.
- İşleyicilerinizi sekmeyi kaldırma (debounce) işlemine tabi tutun; etkinlik değerlerini depolayın ve stil değişiklikleriyle sonraki requestAnimationFrame geri çağırma işlevinde ilgilenin.
Uzun süren giriş işleyicilerinden kaçının
Mümkün olan en hızlı durumda, kullanıcı sayfayla etkileşimde bulunduğunda sayfanın birleştirme iş parçacığı, kullanıcının dokunma girişini alıp içeriği hareket ettirebilir. Bu işlem için JavaScript, düzen, stil veya boyama işlemlerinin yapıldığı ana iş parçacığında herhangi bir çalışma yapılması gerekmez.
Ancak touchstart, touchmove veya touchend gibi bir giriş işleyici eklediyseniz preventDefault() işlevini çağırmayı ve dokunarak kaydırmanın gerçekleşmesini durdurmayı seçebileceğiniz için birleştirici iş parçacığı, bu işleyicinin yürütülmesinin tamamlanmasını beklemelidir. preventDefault() işlevini çağırmasanız bile birleştiricinin beklemesi gerekir. Bu nedenle, kullanıcının kaydırma işlemi engellenir. Bu durum, takılmaya ve karelerin atlanmasına neden olabilir.
Kısacası, çalıştırdığınız tüm giriş işleyicilerin hızlı bir şekilde yürütülmesini ve birleştiricinin işini yapmasına izin vermesini sağlamanız gerekir.
Giriş işleyicilerinde stil değişikliklerinden kaçının
Kaydırma ve dokunma gibi giriş işleyicilerin, requestAnimationFrame geri çağırma işlemlerinden hemen önce çalışması planlanır.
Bu işleyicilerden birinde görsel değişiklik yaparsanız requestAnimationFrame başlangıcında bekleyen stil değişiklikleri olur. "Büyük ve karmaşık düzenlerden ve düzen karmaşasından kaçının" başlıklı makalede önerildiği gibi, requestAnimationFrame geri çağırma işlevinin başında görsel özellikleri okursanız zorunlu bir senkron düzen tetiklersiniz.
Kaydırma işleyicilerinizin sıçramasını önleme
Yukarıdaki iki sorunun çözümü aynıdır: Görsel değişiklikleri her zaman bir sonraki requestAnimationFrame geri çağırma işlemine kadar geciktirmeniz 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şleyicilerinizi hafif tutma gibi ek bir avantaj da sağlar. Bu da artık hesaplama açısından maliyetli kodlarda kaydırma veya dokunma gibi işlemleri engellemediğiniz için harika bir özelliktir.