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

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

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

סיכום

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

הימנעות ממפעילי קלט שפועלים זמן רב

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

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

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

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

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

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

ביטול העיכוב (debounce) של פונקציות הטיפול בגלילה

הפתרון לשתי הבעיות שלמעלה זהה: תמיד צריך לבצע דחייה של שינויים חזותיים לקריאה הבאה בחזרה (callback) של 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);

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