נדרש משוב מהמפתח – frame Timing API

פול לואיס
Twitter דף הבית

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

עם זאת, עבור רובנו יש פער בין מה שאנחנו יכולים לבדוק במכשירים שלנו לבין מה שהמשתמשים חווים. אם הם לא מקבלים תמונה חלקה עם 60fps, החוויה שלהם נפגעת, ובסופו של דבר הם עוברים למקום אחר ואנחנו נסבול. ובאותו הזמן, ארגון W3C דן ב-API חדש שיכול לעזור לנו לראות את מה שהמשתמשים שלנו רואים: Frame Timing API.

ג'ייק ארצ'יבלד ולאחרונה תיעדתי סרטון סקירה כללית על ה-API, אז אם אתם מעדיפים לצפות בו, כדאי לקרוא את המאמרים הבאים:

שימושים ב-frame Timing API

אין ספק שיש המון דברים שאפשר לעשות עם Frame Timing API, ואין ספק שבעזרתו תוכלו למדוד את מה שחשוב לכם ולפרויקט שלכם. למרות זאת, הנה כמה רעיונות:

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

נאום המעלית

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

var rendererEvents = window.performance.getEntriesByType("renderer");

כל רשומות ה-thread של הרינדור נראות בערך כך:

    {
      sourceFrameNumber: 120,
      startTime: 1342.549374253
      cpuTime: 6.454313323
    }

כל רשומה היא למעשה אובייקט שמכיל מספר פריים ייחודי, חותמת זמן ברזולוציה גבוהה להתחלה של הפריים, וחותמת זמן נוספת של זמן המעבד (CPU). בעזרת מערך של כלים כאלה, אפשר לבחון כל אחד מהערכים של startTime ולגלות אם ה-thread הראשי זז במהירות של 60fps, ובעקרון, "האם ה-startTime של כל פריים עולה ב-16 אלפיות השנייה בערך?"

אבל יותר מזה, אתה מקבל גם את cpuTime, כך שתדע אם אתה נמצא בנוחות בתוך הגבול של 16 אלפיות השנייה, או אם הנך מועבר לכבל. אם ה-cpuTime נמצא ממש קרוב לגבול של 16 אלפיות השנייה, אין הרבה מקום לדברים כמו איסוף אשפה, וכאשר השימוש במעבד (CPU) גבוה, גם צריכת הסוללה תהיה גבוהה יותר.

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

var compositeThreadEvents = window.performance.getEntriesByType("composite");

כל אחת מההתראות האלה חוזרת גם עם מספר מסגרת מקור, שבו אפשר להשתמש כדי לקשר בחזרה לאירועים ב-thread הראשי:

{
    sourceFrameNumber: 120,
    startTime: 1352.343235321
}

בגלל הדרך שבה איחוד פועל לעיתים קרובות בדפדפנים, ייתכן שיהיו כמה מהרשומות האלה לכל רשומת שרשור של רינדור, כך שתוכלו להשתמש ב-sourceFrameNumber כדי לקשור אותן בחזרה. דיון גם לגבי השאלה אם צריך לכלול נתוני זמן מעבד (CPU) ברשומות האלה, כך שאם אתם מרגישים בטוחים לגבי הבעיות ב-GitHub.

מידע נוסף

ממשק API זה עדיין לא נשלח, אבל אנחנו מקווים שהוא יישלח בקרוב. בינתיים, הנה כמה דברים שתוכל לקרוא ולעשות: