Giriş işleyicilerinizi birden fazla kez tekrar açın

Giriş işleyicileri, karelerin tamamlanmasını engelleyebilecek ve ek ve gereksiz düzen çalışmasına neden olabileceğinden uygulamalarınızdaki performans sorunlarının olası bir nedenidir.

Paul Lewis

Giriş işleyicileri, karelerin tamamlanmasını engelleyebilecek ve ek, gereksiz düzen çalışmasına neden olabileceğinden uygulamalarınızdaki performans sorunlarının olası bir nedenidir.

Özet

  • Kaydırma işlemini engelleyebileceklerinden uzun çalışan giriş işleyicilerden kaçının.
  • Giriş işleyicilerinde stil değişikliği yapmayın.
  • İşleyicilerinizi yayından kaldırın; bir sonraki requestAnimationFrame geri çağırma işleminde etkinlik değerlerini depolayın ve stil değişiklikleriyle uğraşın.

Uzun süre çalışan giriş işleyicilerden kaçının

Mümkün olan en hızlı durumda, bir kullanıcı sayfayla etkileşimde bulunduğunda, sayfayı birleştirici ileti dizisi kullanıcının dokunma girişini alıp yalnızca içeriği hareket ettirebilir. Bunun için JavaScript, düzen, stiller veya boyamanın yapıldığı ana iş parçacığı tarafından işlem yapılması gerekmez.

Hafif kaydırma; yalnızca birleştirici.

Bununla birlikte, touchstart, touchmove veya touchend gibi bir giriş işleyici eklerseniz birleştirici iş parçacığı bu işleyicinin yürütülmesini tamamlamasını beklemelidir; çünkü preventDefault() yöntemini çağırabilir ve dokunma kaydırmasının gerçekleştirilmesini durdurabilirsiniz. preventDefault() çağrısı yapmasanız bile birleştiricinin beklemesi gerekir. Bu nedenle, kullanıcının kaydırması engellenir ve takılmalara ve eksik karelere neden olabilir.

Yoğun kaydırma; birleştirici JavaScript'te engellenmiştir.

Kısacası, çalıştırdığınız tüm giriş işleyicilerin hızlı bir şekilde yürütülmesi ve birleştiricinin işini yapmasına izin vermesi gerekir.

Giriş işleyicilerinde stil değişikliklerinden kaçının

Kaydırma ve dokunma için olanlar gibi giriş işleyicileri, tüm requestAnimationFrame geri çağırmalarından hemen önce çalışacak şekilde programlanır.

Bu işleyicilerden birinin içinde görsel değişiklik yaparsanız requestAnimationFrame öğesinin başında, bekleyen stil değişiklikleri olur. "Büyük, karmaşık düzenler ve düzen karmaşasından kaçının" tavsiyesinde belirtildiği gibi, requestAnimationFrame geri çağırmasının başında görsel özellikleri okursanız zorunlu bir eşzamanlı düzeni tetiklersiniz.

Yoğun kaydırma; birleştirici JavaScript'te engellenmiştir.

Kaydırma işleyicilerinizde geri dönme

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şlemi için geri almalısınız:

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ğlıyor. Bu harika bir şey çünkü artık kaydırma veya hesaplama açısından pahalı koda dokunma gibi şeyleri engellemiyorsunuz.