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

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

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

סיכום

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

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

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

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

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

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

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

אם מבצעים שינוי חזותי בתוך אחד מה-handlers האלה, בתחילת ה-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);

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