از شنوندگان غیرفعال برای بهبود عملکرد اسکرول استفاده کنید

شنوندگان رویداد لمسی و چرخی برای ردیابی تعاملات کاربر و ایجاد تجربه‌های پیمایش سفارشی مفید هستند، اما می‌توانند پیمایش صفحه را نیز به تاخیر بیندازند. در حال حاضر، مرورگرها نمی توانند بدانند که آیا شنونده رویداد از پیمایش جلوگیری می کند یا خیر، بنابراین همیشه منتظر می مانند تا شنونده قبل از پیمایش صفحه، اجرا را به پایان برساند. شنونده‌های رویداد غیرفعال این مشکل را با اجازه دادن به شما نشان می‌دهند که شنونده رویداد هرگز از پیمایش جلوگیری نمی‌کند.

سازگاری با مرورگر

اکثر مرورگرها از شنوندگان رویداد غیرفعال پشتیبانی می کنند. به سازگاری مرورگر مراجعه کنید

چگونه ممیزی شنونده رویداد غیرفعال Lighthouse شکست می خورد

Lighthouse شنوندگان رویداد را پرچم‌گذاری می‌کند که ممکن است پیمایش صفحه را به تأخیر بیندازند:

ممیزی فانوس نشان می‌دهد که صفحه از شنوندگان رویداد غیرفعال برای بهبود عملکرد اسکرول استفاده نمی‌کند

Lighthouse از فرآیند زیر برای شناسایی شنوندگان رویداد استفاده می کند که ممکن است بر عملکرد پیمایش تأثیر بگذارد:

  1. همه شنوندگان رویداد را در صفحه جمع آوری کنید.
  2. شنوندگان غیر لمسی و بدون چرخ را فیلتر کنید.
  3. شنوندگانی که preventDefault() فراخوانی می‌کنند فیلتر کنید.
  4. شنوندگانی که از میزبانی متفاوت از صفحه هستند را فیلتر کنید.

Lighthouse شنوندگان میزبان های مختلف را فیلتر می کند زیرا احتمالاً کنترلی روی این اسکریپت ها ندارید. ممکن است اسکریپت های شخص ثالثی وجود داشته باشد که به عملکرد پیمایش صفحه شما آسیب می زند، اما این موارد در گزارش Lighthouse شما فهرست نشده اند.

چگونه شنوندگان رویداد را منفعل کنیم تا عملکرد پیمایش را بهبود ببخشیم

به هر شنونده رویدادی که Lighthouse شناسایی کرد، یک پرچم passive اضافه کنید.

اگر فقط از مرورگرهایی پشتیبانی می کنید که از شنونده رویداد غیرفعال پشتیبانی می کنند، فقط پرچم را اضافه کنید. مثلا:

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

اگر از مرورگرهای قدیمی‌تری پشتیبانی می‌کنید که از شنوندگان رویداد غیرفعال پشتیبانی نمی‌کنند ، باید از تشخیص ویژگی یا polyfill استفاده کنید. برای اطلاعات بیشتر به بخش تشخیص ویژگی در سند توضیح دهنده شنوندگان رویداد غیرفعال WICG مراجعه کنید.

منابع