Giriş işleyiciler, karelerin tamamlanmasını engelleyebilir, ayrıca ek ve gereksiz düzen çalışmalarına neden olabileceği için uygulamalarınızdaki performans sorunlarının olası bir nedenidir.
Giriş işleyiciler, karelerin tamamlanmasını engelleyebilir, ek ve gereksiz görüntülere neden olabilir. yardımcı olabilir.
Özet
- Uzun süre çalışan giriş işleyicilerden kaçının; kaydırmayı engelleyebilirler.
- Giriş işleyicilerde stil değişikliği yapmayın.
- İşleyicilerinizin geri çekmesini kaldırın; etkinliği değerlerini depola ve bir sonraki requestAnimationFrame geri çağırma yönteminde stil değişiklikleriyle ilgilenin.
Uzun süreli giriş işleyicilerden kaçınma
Mümkün olan en hızlı durumda, bir kullanıcı sayfayla etkileşime geçtiğinde sayfanın birleştirici ileti dizisi, kullanıcının dokunma girişini alıp içeriği hareket ettirebilir. Bu, JavaScript, düzen, stiller veya boyamanın yapıldığı ana iş parçacığının çalışmasını gerektirmez.
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.
Kısacası, çalıştırdığınız giriş işleyicilerin hızlı bir şekilde yürütülmesi ve birleştiricinin işini yapmasına izin vermeniz gerekir.
Giriş işleyicilerde stil değişikliklerini önleme
Kaydırma ve dokunma gibi giriş işleyiciler, requestAnimationFrame geri aramalarından hemen önce çalışacak şekilde planlandı.
Bu işleyicilerden birinde görsel bir değişiklik yaparsanız requestAnimationFrame öğesinin başında bekleyen stil değişiklikleri olur. Ardından, 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 iki sorunun da çözümü aynıdır: Görsel değişikliklerin gerisini her zaman bir sonraki requestAnimationFrame geri aramasından elde etmelisiniz:
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 maliyeti yüksek kodlara dokunma gibi işlemleri engellememiş olursunuz.