Kaydırma performansını artırmak için pasif işleyicileri kullanma

Dokunma ve tekerlek etkinlik işleyicileri, kullanıcı etkileşimlerini izlemek ve özel kaydırma deneyimleri oluşturmak için yararlıdır ancak sayfa kaydırmasını da geciktirebilir. Şu anda tarayıcılar, bir etkinlik dinleyicisinin kaydırmayı engelleyip engellemeyeceğini bilemez. Bu nedenle, sayfayı kaydırmadan önce her zaman dinleyicinin yürütmeyi bitirmesini beklerler. Pasif etkinlik işleyicileri, bir etkinlik işleyicinin kaydırmayı hiçbir zaman engellemeyeceğini belirtmenize olanak tanıyarak bu sorunu çözer.

Tarayıcı uyumluluğu

Çoğu tarayıcı pasif etkinlik işleyicileri destekler. Bkz: Tarayıcı uyumluluğu

Lighthouse pasif etkinlik işleyici denetimi neden başarısız olur?

Lighthouse, sayfa kaydırmasını geciktirebilecek etkinlik işleyicileri işaretler:

Lighthouse denetimi, sayfanın kaydırma performansını artırmak için pasif etkinlik işleyicilerini kullanmadığını gösteriyor

Lighthouse, kaydırma performansını etkileyebilecek etkinlik işleyicilerini tanımlamak için aşağıdaki süreci kullanır:

  1. Sayfadaki tüm etkinlik işleyicileri toplar.
  2. Dokunma ve tekerlek dışı dinleyicileri filtreleyin.
  3. preventDefault() numaralı telefonu arayan dinleyicileri filtreleyin.
  4. Sayfadan farklı bir ana makineden gelen dinleyicileri filtreleyin.

Lighthouse, bu komut dosyaları üzerinde kontrolünüz olmadığı için farklı ana makinelere ait dinleyicileri filtreler. Sayfanızın kaydırma performansına zarar veren üçüncü taraf komut dosyaları olabilir ancak bunlar Lighthouse raporunuzda listelenmez.

Kaydırma performansını artırmak için etkinlik işleyicileri pasif hale getirme

Lighthouse'un tanımladığı her etkinlik dinleyicisine bir passive işareti ekleyin.

Yalnızca pasif etkinlik işleyici desteği olan tarayıcıları destekliyorsanız bayrağı eklemeniz yeterlidir. Örneğin:

document.addEventListener('touchstart', onTouchStart, {passive: true});

Pasif etkinlik işleyicilerini desteklemeyen eski tarayıcıları destekliyorsanız özellik algılama veya polyfill kullanmanız gerekir. Daha fazla bilgi için WICG Pasif etkinlik işleyicileri açıklama belgesinin Özellik Algılama bölümüne bakın.

Kaynaklar