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

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

Paul Lewis

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

סיכום

• מומלץ להימנע מגורמים שמטפלים בקלט ופועלים לאורך זמן, כי הם עלולים לחסום את הגלילה.
• אל תבצעו שינויים בסגנון במטפלי קלט.
• צריך להשתמש בטכניקת Debounce (השהיה) לטיפול באירועים, לאחסן את ערכי האירועים ולטפל בשינויים בסגנון בקריאה החוזרת הבאה של requestAnimationFrame.

הימנעות משימוש ב-input handlers שפועלים לאורך זמן

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

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

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

הימנעות משינויים בסגנון במטפלי קלט

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

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

הסרת כפילויות מ-scroll handlers

הפתרון לשתי הבעיות שלמעלה זהה: תמיד צריך להשתמש ב-debounce לשינויים חזותיים עד לקריאה הבאה של requestAnimationFrame callback:

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);

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