آموزش رفع ارور Use passive listeners to improve scrolling performance

اگر به تازگی به دنیای توسعه وب پا گذاشته‌اید، احتمالاً با خطاها و هشدارهای زیادی در مرورگرهای خود روبرو شده‌اید. رفع خطای Use passive listeners to improve scrolling performance یک چالش رایج برای توسعه‌دهندگان وب است. این خطا، ممکن است در ابتدا کمی ترسناک به نظر برسد، اما نگران نباشید؛ در این مقاله از نجوانت، قصد داریم به زبانی ساده و خودمانی به آموزش رفع ارور Use passive listeners to improve scrolling performance  و همچنین، بهترین روش ها برای استفاده از passive listeners در جاوا اسکریپت بپردازیم.

خطای Passive event listeners چیست؟

پیش از آنکه به  آموزش رفع ارور Use passive listeners to improve scrolling performance بپردازیم بیایید ببینیم اصلا  Passive event listeners و خطای مربوط چیست و چرا اتفاق می‌افتد؟

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

برای حل این مشکل، می‌تونیم به مرورگر بگیم: نگران نباش، این کد جاوااسکریپت نیازی به جلوگیری از اسکرول نداره، فقط کار خودش رو بکن. به این میگن استفاده از passive event listeners.

خطای Passive event listeners در جاوااسکریپت به تنظیمات پیش‌فرض رویدادهایی اشاره دارد که می‌توانند عملکرد بهتری در مرورگرها و rendering صفحه ایجاد کنند به ویژه در رابطه با اسکرولینگ و تعاملات لمسی در موبایل. این خطا هنگامی رخ می‌دهد که شما یک listener برای یک رویداد ثبت می‌کنید، بدون آنکه معلوم کنید که این listener به صورت passive است یا خیر.

یک listener passive به مرورگر اعلام می‌کند که این listener رویداد را تغییر نمی‌دهد، به عبارت دیگر، event.preventDefault() را در داخل آن فراخوانی نمی‌کند. این باعث می‌شود مرورگر بتواند عملکرد بهتری در اسکرولینگ و تعاملات لمسی داشته باشد.

تفاوت بین passive listeners و event listeners فعال

یکی از مفاهیمی که باید هنگام رفع خطای Use passive listeners to improve scrolling performance بدانید، تفاوت بین passive listeners و active event listeners (یا همان event listeners عادی) در نحوه برخورد آن‌ها با عملکرد پیش‌فرض رویدادها و تأثیر آن‌ها بر عملکرد مرورگر است. در این‌جا به تفصیل، این تفاوت‌ها را توضیح می‌دهم:

1. Passive Event Listeners

   passive event listeners به مرورگر اعلام می‌کنند که listener نیازی به جلوگیری از رفتار پیش‌فرض رویداد (یعنی نیازی به event.preventDefault()) ندارد. این اطلاع‌رسانی به مرورگر اجازه می‌دهد تا برخی بهینه‌سازی‌ها را برای بهبود عملکرد انجام دهد.

2. Active Event Listeners

   active event listeners یا همان event listeners عادی به مرورگر اجازه نمی‌دهند که از ابتدا فرض کند event.preventDefault() فراخوانی نخواهد شد. بنابراین، مرورگر باید صبر کند تا مطمئن شود که event.preventDefault() فراخوانی نشده است، که ممکن است باعث کاهش سرعت اسکرول شود.

علت ایجاد خطای Use passive listeners to improve scrolling performance چیست؟

خطای Use passive listeners to improve scrolling performance در جاوااسکریپت به این علت ایجاد می‌شود که مرورگر سعی دارد به شما اطلاع دهد که می‌توانید عملکرد اسکرول صفحه را با استفاده از “passive event listeners” بهبود بخشید. این خطا اغلب در کنسول مرورگرهای وب مانند Google Chrome نمایش داده می‌شود.

وقتی شما یک event listener برای رویدادهایی مانند touchstart, touchmove, wheel, یا scroll ثبت می‌کنید، مرورگر باید بررسی کند که آیا شما از event.preventDefault() استفاده می‌کنید یا نه. این بررسی می‌تواند عملکرد اسکرول را کاهش دهد. با تنظیم این listener به صورت passive، مرورگر می‌تواند به طور موثر‌تری عمل کند و اجرای اسکرول و انیمیشن‌ها را بدون توقف‌های زیاد (jank) و با نرخ فریم مطلوبی انجام دهد و به خصوص این موضوع برای بهینه سازی عملکرد اسکرول در وب سایت های تلفن همراه بسیار حائز اهمیت است.

این ارور از طرف ابزارهایی برای بررسی عملکرد اسکرول وب سایت مانند گوگل لایت‌هاوس، PageSpeed ​​Insights Google یا  GTmetrix ارسال می‌شود و نشان می‌دهد که سایت شما در فرایند اسکرول و نمایش با تأخیر به کاربر دچار مشکل شده است. در پاراگراف بعد به شما نشاه خواهیم‌داد که چگونه این مشکل را حل کنید و از آموزش رفع ارور Use passive listeners to improve scrolling performance بهره‌مند شوید و بطور موثر به رفع خطای Use passive listeners to improve scrolling performance بپردازید.

چطور خطای Use passive listeners to improve scrolling performance را برطرف کنیم؟

حال وقت آموزش رفع ارور Use passive listeners to improve scrolling performance رسیده است. برای حل این مشکل و بهبود عملکرد اسکرول صفحه، باید تغییرات کوچکی در کد جاوااسکریپت خود ایجاد کنید. برای رفع خطای Use passive listeners to improve scrolling performance، مراحل زیر را دنبال کنید:

مرحله اول: در کد خود به دنبال رویدادهای مرتبط با اسکرول و لمس باشید(touch events)، مانند touchstart، touchmove, wheel و scroll

مرحله دوم: وقتی که رویدادی را با استفاده از addEventListener ثبت می‌کنید، باید از گزینه‌های جدید استفاده کنید. به این صورت که passive: true را اضافه کنید. مانند کد زیر:

document.addEventListener('touchstart', function(e) {
// کد
}, { passive: true });

مرحله سوم: بررسی کد و اطمینان از عدم استفاده از event.preventDefault()

در نهایت، با توضیحات بالا و اعمال و با بهترین روش‌ها برای استفاده از passive listeners، می‌توانید ارور Use passive listeners to improve scrolling performance را برطرف کنید و تجربه کاربری بهتری برای بازدیدکنندگان سایت خود فراهم نمایید.

سخن آخر