استفاده نکردن از شنوندگان (Listeners) غیرفعال برای بهبود عملکرد اسکرول
هنگام توسعه وبسایت یا برنامه وب، عملکرد یکی از عوامل حیاتی در تجربه کاربری است. یکی از تکنیک‌های مهم بهینه‌سازی برای بهبود عملکرد رویدادهای اسکرول، استفاده از شنوندگان غیرفعال رویداد است. این نوع شنوندگان به‌طور خاص برای کاهش تأثیر رویدادهای مرتبط با اسکرول طراحی شده‌اند و باعث بهبود عملکرد وبسایت می‌شوند.
به‌طور پیش‌فرض، هنگامی که مرورگر یک رویداد اسکرول را مشاهده میکند، ممکن است نیاز باشد که ابتدا جاوااسکریپت اجرا شود قبل از اینکه عملیات اسکرول ادامه یابد. این فرآیند می‌تواند تأخیرهایی ایجاد کند، به‌ویژه اگر جاوااسکریپت پیچیده یا محاسبات سنگینی انجام دهد، که در نهایت باعث ایجاد تجربه‌ای با تاخیر یا عملکرد غیرپاسخگو در اسکرول می‌شود. اما با استفاده از شنوندگان غیرفعال، به مرورگر اعلام می‌شود که این رویداد از تابع preventDefault() استفاده نخواهد کرد که معمولاً برای لغو یا تغییر رفتار رویداد (مثلاً جلوگیری از اسکرول صفحه) به کار می‌رود. در نتیجه، مرورگر می‌تواند عملکرد اسکرول را به‌صورت بهینه‌تری انجام دهد و اسکرول روان‌تری را فراهم کند.
شنوندگان غیرفعال رویداد چیستند؟
شنوندگان غیرفعال رویداد، ویژگی‌ای است که در مرورگرهای مدرن برای بهبود عملکرد برخی از انواع رویدادها در دسترس است. این رویدادها شامل تعاملات کاربری مانند touchstart، touchmove و wheel هستند که می‌توانند تأثیر زیادی بر رفتار اسکرول داشته باشند.
به‌طور معمول، زمانی که یک شنونده رویداد به رویدادی مانند scroll یا touchmove اضافه می‌شود، مرورگر ابتدا منتظر می‌ماند که جاوااسکریپت اجرا شود و سپس عمل پیش‌فرض مربوط به آن رویداد را انجام می‌دهد. این بدان معناست که اگر اجرای جاوااسکریپت مسدود یا زمان‌بر باشد، ممکن است مرورگر در پردازش اسکرول تأخیر کند و باعث تجربه‌ای با عملکرد کند یا لنگ‌شده شود. شنوندگان غیرفعال این مشکل را با این هدف حل می‌کنند که مرورگر می‌داند که رویداد در اینجا هیچ‌گونه تغییری در عملکرد پیش‌فرض اعمال نمی‌کند، بنابراین مرورگر می‌تواند عملیات اسکرول را بلافاصله بدون منتظر ماندن برای تکمیل جاوااسکریپت انجام دهد.
چگونه شنوندگان غیرفعال رویداد باعث بهبود عملکرد اسکرول می‌شوند؟
کاهش لرزش اسکرول (Scroll Jank): یکی از مزایای قابل‌توجه استفاده از شنوندگان غیرفعال، بهبود روانی اسکرول است. با اجازه دادن به مرورگر برای ادامه اسکرول بدون انتظار برای اجرای جاوااسکریپت، صفحه بسیار پاسخگوتر و روان‌تر به نظر می‌رسد که این مسئله به‌ویژه در دستگاه‌های موبایل که تعاملات لمسی و اسکرول بخش‌های اساسی از تجربه مرور است، اهمیت زیادی دارد.
افزایش پاسخ‌دهی: شنوندگان غیرفعال به کاهش زمانی که مرورگر برای پاسخ به ورودی کاربر نیاز دارد، کمک می‌کنند. با اطلاع دادن به مرورگر که این شنونده رویداد هیچ‌گونه تغییری در رفتار پیش‌فرض ایجاد نمی‌کند، مرورگر می‌تواند نمایش صفحه را در اولویت قرار دهد و صفحه احساس تعاملی‌تری داشته باشد. این مسئله به‌ویژه برای وب‌سایت‌هایی با چیدمان‌های پیچیده یا محتوای پویا که ممکن است عملکرد اسکرول را کند کنند، مفید است.
بهبود عملکرد در موبایل: دستگاه‌های موبایل به‌ویژه حساس به عملکرد اسکرول هستند، زیرا آنها به تعاملات لمسی وابسته‌اند. وقتی کاربران در دستگاه‌های موبایل اسکرول می‌کنند، مرورگر باید رویدادهای لمسی را به‌صورت زمان‌بندی شده پردازش کند تا اسکرول روانی داشته باشد. اگر اجرای جاوااسکریپت این رویدادها را مسدود کند، می‌تواند منجر به تأخیر یا لرزش در اسکرول شود. با استفاده از شنوندگان غیرفعال رویداد، وب‌سایت‌ها می‌توانند عملکرد بهتری در موبایل داشته باشند و تجربه کاربری سریع‌تر و پاسخگوتر فراهم کنند.
بهبود تجربه کاربری: هدف اصلی از پیاده‌سازی شنوندگان غیرفعال رویداد، بهبود کلی تجربه کاربری است. با کاهش اختلالات در اسکرول، وب‌سایت‌ها روان‌تر و شهودی‌تر به نظر می‌رسند که این می‌تواند به افزایش رضایت و تعامل کاربران منجر شود. این موضوع می‌تواند بهبود معیارهایی مانند مدت زمان حضور در سایت و نرخ پرش را به دنبال داشته باشد و به افزایش حفظ کاربران کمک کند.
چگونه می‌توان شنوندگان غیرفعال رویداد را پیاده‌سازی کرد؟
برای فعال کردن شنوندگان غیرفعال رویداد، توسعه‌دهندگان باید نحوه افزودن شنوندگان رویداد به رویدادهای مرتبط را تغییر دهند. در جاوااسکریپت، شنوندگان رویداد معمولاً با استفاده از متد addEventListener() به رویدادها اضافه می‌شوند. با مشخص کردن گزینه { passive: true }، شنونده رویداد به‌طور غیرفعال در نظر گرفته می‌شود که به مرورگر اعلام میکند که این رویداد هیچ‌گونه تأثیری بر رفتار پیش‌فرض نخواهد داشت.
مثال:
// اضافه کردن یک شنونده غیرفعال برای بهبود عملکرد اسکرولwindow.addEventListener('scroll', function(event) { // کد مربوط به پردازش رویداد اسکرول}, { passive: true });
در این مثال، رویداد scroll به‌صورت غیرفعال گوش داده می‌شود که به مرورگر اجازه می‌دهد تا عملیات اسکرول را بدون انتظار برای تکمیل کد شنونده انجام دهد. گزینه { passive: true } چیزی است که شنونده غیرفعال را از شنوندگان غیرغیرفعال متمایز میکند.
مشکلات رایج و نکات قابل توجه
تمام رویدادها برای شنوندگان غیرفعال مناسب نیستند: در حالی که شنوندگان غیرفعال برای رویدادهایی مانند touchmove و scroll عالی هستند، اما همیشه برای هر نوع رویدادی قابل‌استفاده نیستند. به‌عنوان‌مثال، اگر نیاز دارید که بر روی یک رویداد خاص تابع preventDefault() را فراخوانی کنید (مانند زمانی که در حال ایجاد رفتار اسکرول سفارشی یا تعامل با عناصر فرم هستید)، استفاده از شنوندگان غیرفعال مناسب نخواهد بود. در چنین مواردی، باید به‌دقت بررسی کنید که کدام رویدادها باید از شنوندگان غیرفعال استفاده کنند و کدام‌یک نه.
پشتیبانی مرورگر: شنوندگان غیرفعال در اکثر مرورگرهای مدرن پشتیبانی می‌شوند، اما ضروری است که از پشتیبانی این ویژگی در مرورگرهای قدیمی‌تر یا مرورگرهای کم‌استفاده اطمینان حاصل کنید. برای مرورگرهای قدیمی که از شنوندگان غیرفعال پشتیبانی نمی‌کنند، ممکن است نیاز به رویکردی جایگزین باشد.
نظارت بر عملکرد: پس از پیاده‌سازی شنوندگان غیرفعال، نظارت بر عملکرد سایت ضروری است تا اطمینان حاصل شود که تأثیرات مطلوب حاصل شده است. ابزارهایی مانند Google Lighthouse می‌توانند برای اندازه‌گیری عملکرد اسکرول و تأیید استفاده صحیح از شنوندگان غیرفعال استفاده شوند و به شما کمک کنند تا مطمئن شوید بهینه‌سازی‌ها مؤثر بوده‌اند.
نتیجه‌گیری
استفاده از شنوندگان غیرفعال رویداد یک بهینه‌سازی مهم برای عملکرد وب است که به بهبود روانی اسکرول، کاهش لرزش اسکرول و افزایش پاسخ‌دهی وبسایت کمک میکند. با اجازه دادن به مرورگر برای پردازش رویدادهای اسکرول و لمسی به‌طور بهینه، توسعه‌دهندگان می‌توانند تجربه کاربری بهتری، به‌ویژه در دستگاه‌های موبایل، فراهم کنند. پیاده‌سازی شنوندگان غیرفعال رویداد یک روش ساده اما مؤثر برای بهبود عملکرد وب است و برای هر پروژه وب مدرن که بر تجربه کاربری متمرکز است، بسیار مفید است.
