רכיבי handler של קלט הם סיבה פוטנציאלית לבעיות בביצועים של האפליקציות שלכם, כי הם יכולים לחסום את היכולת להשלים פריימים, והם יכולים לגרום לעבודות פריסה נוספות ומיותרות.
רכיבי ה-handler של הקלט הם סיבות פוטנציאליות לבעיות בביצועים באפליקציות שלכם, כי הם יכולים לחסום את היכולת להשלים פריימים ולגרום להם לעבודות פריסה נוספות ומיותרות.
סיכום
- חשוב להימנע מרכיבי handler ממושכים של קלט, כי הם יכולים לחסום את הגלילה.
- אל תבצעו שינויי סגנון ב-handlers של הקלט.
- בטל את העזיבה של ה-handlers; שמור את ערכי האירועים והתמודד עם שינויי סגנון בקריאה החוזרת הבאה של requestAnimationFrame.
הימנעות מרכיבי handler ממושכים של קלט
במקרה המהיר ביותר האפשרי, כאשר משתמש מקיים אינטראקציה עם הדף, ה-thread של המחבר של הדף יכול לקחת את קלט המגע של המשתמש ופשוט להזיז את התוכן. כדי לעשות את זה לא נדרשת עבודה לפי ה-thread הראשי, שבו אפשר לבצע JavaScript, פריסה, סגנונות או צבע.
![גלילה קלה; קומפוזיטור בלבד.](https://web.developers.google.cn/static/articles/debounce-your-input-handlers/image/lightweight-scrolling-co-d1e531e7414ca.jpg?authuser=4&hl=he)
עם זאת, אם תחבר handler של קלט, כמו touchstart
, touchmove
או touchend
, ה-thread של המחבר צריך להמתין ל-handler הזה שיסיים את הביצוע כי אפשר לבחור לקרוא ל-preventDefault()
ולהפסיק את הגלילה באמצעות מגע. גם אם לא קוראים ל-preventDefault()
, המחבר חייב להמתין, ולכן הגלילה של המשתמש תיחסם, והדבר עלול לגרום לתקלה ולחסרות פריימים.
![גלילה כבדה; המחבר חסום ב-JavaScript.](https://web.developers.google.cn/static/articles/debounce-your-input-handlers/image/heavy-scrolling-composit-2d22d7b7e1daa.jpg?authuser=4&hl=he)
בקיצור, עליכם לוודא שכל רכיבי ה-handler של הקלט שאתם מפעילים יפעלו במהירות ויאפשרו למרכיב לבצע את פעולתו.
הימנעות משינויי סגנון ב-handlers של קלט
רכיבי handler של קלט, כמו אלה שמשמשים לגלילה ולמגע, מתוזמנים לפעול ממש לפני קריאות חוזרות של requestAnimationFrame
.
אם מבצעים שינוי חזותי בתוך אחד מרכיבי ה-handler האלה, בתחילת ה-requestAnimationFrame
יהיו שינויי סגנון בהמתנה. אם לאחר מכן תקראו מאפיינים חזותיים בתחילת הקריאה החוזרת של requestAnimationFrame, כפי שהעצה "הימנעו מפריסות גדולות ומורכבות ומהירגעות פריסה", תגרום להפעלה של פריסה סינכרונית מאולצת!
![גלילה כבדה; המחבר חסום ב-JavaScript.](https://web.developers.google.cn/static/articles/debounce-your-input-handlers/image/heavy-scrolling-composit-151ee35865c54.jpg?authuser=4&hl=he)
ביטול הכשל של רכיבי ה-handler של הגלילה
הפתרון לשתי הבעיות שלמעלה זהה: תמיד צריך לבטל שינויים חזותיים בקריאה החוזרת הבאה מסוג requestAnimationFrame
:
function onScroll (evt) {
// Store the scroll value for laterz.
lastScrollY = window.scrollY;
// Prevent multiple rAF callbacks.
if (scheduledAnimationFrame)
return;
scheduledAnimationFrame = true;
requestAnimationFrame(readAndUpdatePage);
}
window.addEventListener('scroll', onScroll);
לפעולה הזאת יש גם יתרון נוסף - פשוט להקפיד שהרכיבי ה-handler של הקלט יישארו קלים יותר, כי עכשיו אתם לא חוסמים דברים כמו גלילה או מגע עם קוד יקר מבחינה חישובית!