מעבדי אירועים של מגע וגלגלת שימושיים למעקב אחר אינטראקציות של משתמשים וליצירת חוויות גלילה מותאמות אישית, אבל הן גם עלולות לעכב את הגלילה בדף. נכון לעכשיו, הדפדפנים לא יכולים לדעת אם מאזין לאירועים ימנע גלילה, ולכן הם תמיד ממתינים לסיום הביצוע של המאזין לפני שהם גוללים בדף. פונקציות event listener פסיביות פותרות את הבעיה הזו, כי הן מאפשרות לציין שפונקציית event listener לעולם לא תמנע גלילה.
תאימות דפדפן
רוב הדפדפנים תומכים ב-event listener סביל. צפייה תאימות הדפדפן
איך הבדיקה של חיישן האירועים הפסיבית של Lighthouse נכשלה
Lighthouse מסמנת פונקציות event listener שעשויות לעכב את הגלילה בדף:
ב-Lighthouse נעשה שימוש בתהליך הבא כדי לזהות פונקציות event listener שעשויות להשפיע על ביצועי הגלילה:
- אספו את כל פונקציות event listener בדף.
- סינון של מאזינים שלא מגיבים למגע או לגלגל.
- סינון מאזינים שמתקשרים אל
preventDefault(). - סינון של מאזינים שמגיעים מארח שונה מהדף.
מערכת Lighthouse מסננת מאזינים ממארחים שונים, כי סביר להניח שאין לכם שליטה על הסקריפטים האלה. ייתכן שקיימים סקריפטים של צד שלישי שפוגעים בביצועי הגלילה של הדף, אבל המאפיינים האלה לא רשומים בדוח Lighthouse.
איך להפוך רכיבי event listener לפסיביים כדי לשפר את ביצועי הגלילה
מוסיפים את הדגל passive לכל מאזין אירועים ש-Lighthouse זיהה.
אם אתם תומכים רק בדפדפנים שיש בהם תמיכה בפונקציות event listener פסיביות, פשוט מוסיפים את הדגל. לדוגמה:
document.addEventListener('touchstart', onTouchStart, {passive: true});
אם אתם תומכים בדפדפנים ישנים שלא תומכים ב-event listener פסיבי, תצטרכו להשתמש בזיהוי תכונות או ב-polyfill. מידע נוסף זמין בקטע זיהוי תכונות במסמך ההסבר של WICG בנושא פונקציות event listener פסיביות.