הסרת רכיבי ה-handler של הקלט

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

Paul Lewis

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

סיכום

• חשוב להימנע מרכיבי handler ממושכים של קלט, כי הם יכולים לחסום את הגלילה.
• אל תבצעו שינויי סגנון ב-handlers של הקלט.
• בטל את העזיבה של ה-handlers; שמור את ערכי האירועים והתמודד עם שינויי סגנון בקריאה החוזרת הבאה של requestAnimationFrame.

הימנעות מרכיבי handler ממושכים של קלט

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

עם זאת, אם תחבר handler של קלט, כמו touchstart, touchmove או touchend, ה-thread של המחבר צריך להמתין ל-handler הזה שיסיים את הביצוע כי אפשר לבחור לקרוא ל-preventDefault() ולהפסיק את הגלילה באמצעות מגע. גם אם לא קוראים ל-preventDefault(), המחבר חייב להמתין, ולכן הגלילה של המשתמש תיחסם, והדבר עלול לגרום לתקלה ולחסרות פריימים.

בקיצור, עליכם לוודא שכל רכיבי ה-handler של הקלט שאתם מפעילים יפעלו במהירות ויאפשרו למרכיב לבצע את פעולתו.

הימנעות משינויי סגנון ב-handlers של קלט

רכיבי handler של קלט, כמו אלה שמשמשים לגלילה ולמגע, מתוזמנים לפעול ממש לפני קריאות חוזרות של requestAnimationFrame.

אם מבצעים שינוי חזותי בתוך אחד מרכיבי ה-handler האלה, בתחילת ה-requestAnimationFrame יהיו שינויי סגנון בהמתנה. אם לאחר מכן תקראו מאפיינים חזותיים בתחילת הקריאה החוזרת של requestAnimationFrame, כפי שהעצה "הימנעו מפריסות גדולות ומורכבות ומהירגעות פריסה", תגרום להפעלה של פריסה סינכרונית מאולצת!

ביטול הכשל של רכיבי ה-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 של הקלט יישארו קלים יותר, כי עכשיו אתם לא חוסמים דברים כמו גלילה או מגע עם קוד יקר מבחינה חישובית!