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ırmayı da geciktirebilir. Şu anda tarayıcılar, bir etkinlik işleyicinin kaydırmayı engelleyip engellemeyeceğini bilemez. Bu nedenle, sayfayı kaydırmadan önce her zaman işleyicinin yürütme işlemini bitirmesini beklerler. Pasif etkinlik işleyiciler, bir etkinlik işleyicinin kaydırmayı hiçbir zaman engellemeyeceğini belirtmenize olanak tanıyarak bu sorunu çözer.

Tarayıcı uyumluluğu

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

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

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

Lighthouse denetimi, sayfada kaydırma performansını iyileştirmek için pasif etkinlik işleyicilerin kullanılmadığını gösteriyor

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

  1. Sayfadaki tüm etkinlik işleyicileri toplayın.
  2. Dokunmatik ve tekerlek dışındaki dinleyicileri filtreleyin.
  3. preventDefault() çağıran dinleyicileri filtreleyin.
  4. Sayfadan farklı bir ana makineden işleyicileri filtreleyin.

Lighthouse, muhtemelen bu komut dosyaları üzerinde kontrol sahibi olmadığınızdan farklı ana makinelerden 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ı iyileştirmek için etkinlik işleyicileri pasif hale getirme

Lighthouse'un tanımladığı her etkinlik işleyiciye 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şleyicileri desteklemeyen eski tarayıcıları destekliyorsanız özellik algılama veya çoklu dolguyu kullanmanız gerekir. Daha fazla bilgi için WICG Pasif etkinlik işleyiciler açıklayıcı belgesinin Özellik Algılama bölümüne bakın.

Kaynaklar