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

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

תאימות דפדפן

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

מתי נכשל הביקורת של רכיב הקשבה לאירועים פסיבי ב-Lighthouse

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

כדי לזהות מאזיני אירועים שעשויים להשפיע על ביצועי הגלילה, מערכת Lighthouse משתמשת בתהליך הבא:

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

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

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

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

מוסיפים את הדגל passive לכל מאזין אירועים ש-Lighthouse זיהה.

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

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

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

משאבים

• קוד המקור של הביקורת לא נעשה שימוש ברכיבי listener פסיביים לשיפור ביצועי הגלילה
• שיפור ביצועי הגלילה באמצעות רכיבי listener פסיביים של אירועים
• הסבר על פונקציות event listener פסיביות
• EventTarget.addEventListener()