שיפור ביצועי הגלילה באמצעות פונקציות event listener פסיביות
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
Kayce Basques
חדש ב-Chrome 51, מעבדי אירועים פסיביים הם תקן אינטרנט מתפתח, שמספק שיפור פוטנציאלי משמעותי בביצועי הגלילה, במיוחד בניידים. צפו בסרטון הבא כדי לראות, זה לצד זה, הדגמה של השיפורים בפעולה:
איך זה עובד
כשגוללים בדף ויש עיכוב כזה עד שהדף לא נקשר לאצבע, זה נקרא jank של גלילה. הרבה פעמים נתקלים ב-jank של גלילה, המקור הוא האזנה לאירועי מגע. במקרים רבים, מאזינים לאירועי מגע שימושיים למעקב אחר אינטראקציות של משתמשים וליצירת חוויות גלילה בהתאמה אישית, כמו ביטול הגלילה לגמרי בזמן אינטראקציה עם מפת Google מוטמעת.
בשלב זה, דפדפנים לא יכולים לדעת אם האזנה לאירוע מגע עומדת לבטל את הגלילה, ולכן הם תמיד ממתינים עד שה-listener יסתיים לפני שהם גוללים בדף.
פונקציות event listener פסיביות פותרים את הבעיה הזו על ידי מתן אפשרות להגדיר סימון בפרמטר options של addEventListener, שמציין שהמאזין אף פעם לא יבטל את הגלילה. המידע הזה מאפשר לדפדפנים לגלול את הדף באופן מיידי, ולא אחרי שה-listener מסיים אותו.
מידע נוסף
כדאי לקרוא את הבלוג של Chromium כדי לקבל סקירה כללית ומקיפה על אופן הפעולה של פונקציות event listener פסיביות:
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"חסרים לי מידע או פרטים"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"התוכן מורכב מדי או עם יותר מדי שלבים"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"התוכן לא עדכני"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"בעיה בתרגום"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"בעיה בדוגמאות/בקוד"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"סיבה אחרת"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"התוכן קל להבנה"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"התוכן עזר לי לפתור בעיה"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"סיבה אחרת"
}]
{"lastModified": "\u05e2\u05d3\u05db\u05d5\u05df \u05d0\u05d7\u05e8\u05d5\u05df: 2016-06-05 (\u05e9\u05e2\u05d5\u05df UTC)."}
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 2016-06-05 (שעון UTC)."],[],[]]