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