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 kullanışlıdır ancak sayfa kaydırma işlemini de geciktirebilir. Şu anda tarayıcılar, bir etkinlik dinleyicisinin kaydırmayı engelleyip engellemeyeceğini bilemez. Bu nedenle, sayfayı kaydırmadan önce dinleyicinin yürütülmesini her zaman beklerler. Pasif etkinlik işleyiciler, bir etkinlik işleyicinin hiçbir zaman kaydırmayı engellemeyeceğini belirtmenize olanak tanıyarak bu sorunu çözer.

Tarayıcı uyumluluğu

Çoğu tarayıcı, pasif etkinlik işleyicileri destekler. Tarayıcı uyumluluğu bölümüne bakın.

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

Lighthouse, sayfa kaydırma işlemini geciktirebilecek etkinlik işleyicileri işaretler:

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

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

  1. Sayfadaki tüm etkinlik dinleyicilerini toplayın.
  2. Dokunmatik olmayan ve tekerlekli olmayan dinleyicileri filtreleyin.
  3. preventDefault() numaralı telefondan arayan dinleyicileri filtreleyin.
  4. Sayfadan farklı bir ana makineden gelen dinleyicileri filtreleyin.

Lighthouse, bu komut dosyaları üzerinde muhtemelen kontrol sahibi olmadığınız için farklı ana makinelerdeki dinleyicileri filtreler. Sayfanızın kaydırma performansını olumsuz yönde etkileyen üçü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'ın tanımladığı her etkinlik dinleyicisine bir passive işareti ekleyin.

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

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

Pasif etkinlik işleyicileri 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ünü inceleyin.

Kaynaklar