שימוש ברכיבי listener פסיביים לשיפור ביצועי הגלילה

פונקציות ה-event listener הקשורות למגע ולגלגלת הן שימושיות לצורך מעקב אחרי אינטראקציות של משתמשים ויצירת חוויות גלילה בהתאמה אישית, אבל הן גם יכולות לעכב את הגלילה בדף. בשלב זה, דפדפנים לא יכולים לדעת אם event listener ימנע גלילה, לכן הם תמיד ממתינים עד שה-listener יסיים את הביצוע לפני הגלילה של הדף. פונקציות event listener פסיביות פותרים את הבעיה הזו בכך שהם מאפשרים לכם לציין ש-event listener אף פעם לא ימנע גלילה.

תאימות דפדפן

רוב הדפדפנים תומכים בפונקציות event listener פסיביות. למידע נוסף, ראו תאימות דפדפן

איך נכשלת הבדיקה של פונקציות event listener פסיביות של Lighthouse

התכונה Lighthouse מסמנת פונקציות event listener שעלולות לעכב את גלילת הדף:

הביקורת של Lighthouse מראה שלא נעשה שימוש בפונקציות event listener פסיביות כדי לשפר את ביצועי הגלילה

ב-Lighthouse נעשה שימוש בתהליך הבא כדי לזהות פונקציות event listener שיכולות להשפיע על ביצועי הגלילה:

  1. אספו את כל פונקציות ה-event listener שבדף.
  2. סינון מאזינים ללא מגע וללא גלגלים.
  3. סינון מאזינים שמתקשרים אל preventDefault().
  4. אפשר לסנן מאזינים שהם לא ממארח של הדף.

מערכת Lighthouse מסננת מאזינים ממארחים שונים כי סביר להניח שאין לכם שליטה על הסקריפטים האלה. יכול להיות שיש סקריפטים של צד שלישי שפוגעים בביצועי הגלילה של הדף, אבל הם לא רשומים בדוח Lighthouse.

איך להפוך פונקציות event listener פסיביות כדי לשפר את ביצועי הגלילה

יש להוסיף סימון passive לכל event listener ש-Lighthouse זיהה.

אם אתם תומכים רק בדפדפנים עם תמיכה פסיבית ב-event listener, פשוט הוסיפו את הדגל. לדוגמה:

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

אם אתם תומכים בדפדפנים ישנים יותר שלא תומכים ב-event listener פסיבי, תצטרכו להשתמש בזיהוי תכונות או ב-polyfill. למידע נוסף, עיינו בקטע זיהוי תכונות במסמך ההסבר WICG Passive event listeners.

מקורות מידע