ניתוח של ביצועי זמן ריצה

Kayce Basques

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

שנתחיל?

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

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

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

    https://googlechrome.github.io/devtools-samples/jank/

  3. כדי לפתוח את DevTools, מקישים על Command+Option+I (ב-Mac) או על Control+Shift+I (ב-Windows או ב-Linux).

    הדמו בצד ימין ו-DevTools בצד שמאל.

סימולציה של מעבד בנייד

עוצמת המעבד (CPU) של מכשירים ניידים נמוכה בהרבה מזו של מחשבים נייחים ומחשבים ניידים. בכל פעם שאתם יוצרים פרופיל של דף, כדאי להשתמש בויסות נתונים של מעבד (CPU Throttling) כדי לדמות את הביצועים של הדף במכשירים ניידים.

  1. בכלי הפיתוח, לוחצים על הכרטיסייה ביצועים.
  2. מוודאים שתיבת הסימון של צילומי מסך מופעלת.
  3. לוחצים על הגדרות הצילום . ב-DevTools מוצגות הגדרות שקשורות לאופן שבו מתבצע הצילום של מדדי הביצועים.

  4. בקטע CPU, בוחרים באפשרות 4x slowdown. DevTools מגביל את מהירות המעבד כך שהוא יפעל לאט פי 4 מהרגיל.

    ויסות הנתונים (throttle) של המעבד (CPU) מוגדר להאטה פי 4.

הגדרת הדגמה

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

  1. ממשיכים ללחוץ על הוספת 10 עד שהריבועים הכחולים זזים לאט יותר באופן משמעותי מבעבר. במחשב מתקדם, התהליך עשוי להימשך כ-20 קליקים.

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

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

תיעוד הביצועים בזמן הריצה

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

  1. ב-DevTools, לוחצים על Record (הקלטה) . כלי הפיתוח מתעד את מדדי הביצועים בזמן שהדף פועל.

    יצירת פרופיל של דף ההדגמה.

  2. ממתינים מספר שניות.

  3. לוחצים על הפסקה. DevTools מפסיק את ההקלטה, מעבד את הנתונים ומציג את התוצאות בחלונית ביצועים.

    הדף של דוח הפרופיל.

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

ניתוח התוצאות

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

ניתוח פריימים לשנייה

המדד העיקרי למדידת הביצועים של כל אנימציה הוא פריימים לשנייה (FPS). משתמשים נהנים כשהאנימציות פועלות במהירות של 60FPS.

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

    תרשים ה-FPS מודגש.

  2. מתחת לתרשים FPS מופיע התרשים CPU. הצבעים בתרשים CPU תואמים לצבעים בכרטיסייה Summary (סיכום), שבתחתית החלונית Performance (ביצועים). אם תרשים המעבד מלא בצבע, סימן שהמעבד עבד במלוא הקיבולת במהלך ההקלטה. אם אתם רואים שהמעבד עובד במלוא הקיבולת למשך תקופות ארוכות, זה סימן שצריך למצוא דרכים לבצע פחות עבודה.

    תרשים המעבד (CPU) והכרטיסייה 'סיכום'.

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

    הצגת צילום מסך בהקלטה של ביצועים.

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

    מעבירים את העכבר מעל מסגרת.

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

בונוס: פתיחת מד ה-FPS

כלי שימושי נוסף הוא מד ה-FPS, שמספק אומדנים בזמן אמת של FPS בזמן שהדף פועל.

  1. מקישים על Command+Shift+P (Mac) או על Control+Shift+P (Windows, ‏ Linux) כדי לפתוח את תפריט הפקודות.
  2. מתחילים להקליד Rendering בתפריט הפקודות ובוחרים באפשרות Show Rendering.

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

    מד ה-FPS.

  4. משביתים את מדד ה-FPS ומקישים על Escape כדי לסגור את החלונית עיבוד. לא נשתמש בה במדריך הזה.

איתור צוואר בקבוק

אחרי שמדדתם וווידאתם שהאנימציה לא מניבה ביצועים טובים, השאלה הבאה היא: למה?

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

    כרטיסיית הסיכום, שמסומנת בקו כחול.

  2. מרחיבים את הקטע Main. ב-DevTools מוצג תרשים אש של הפעילות בשרשור הראשי לאורך זמן. ציר ה-X מייצג את ההקלטה לאורך זמן. כל עמודה מייצגת אירוע. ככל שהפס נרחב יותר, כך האירוע נמשך זמן רב יותר. ציר ה-Y מייצג את סטאק הקריאות. אם רואים אירועים מוערמים זה על גבי זה, המשמעות היא שהאירועים שבחלק העליון גרמו לאירועים שבחלק התחתון.

    החלק הראשי.

  3. יש הרבה נתונים בהקלטה. כדי להגדיל את התצוגה של אירוע Animation Frame Fired יחיד, לוחצים על Overview (סקירה כללית), שומרים על לחיצה על העכבר וגוררים אותו. הקטע הזה כולל את התרשימים FPS,‏ CPU ו-NET. בקטע ראשי ובכרטיסייה סיכום מוצג מידע רק לגבי החלק שנבחר מההקלטה.

    התמקדות באירוע אחד מסוג 'הופעל פריים אנימציה'.

  4. שימו לב למעוין האדום בפינה השמאלית העליונה של האירועים משימה ופריסה. אם מופיע משולש אדום, סימן שיש אזהרה לגבי האירוע הזה. משולש אדום במשימה פירושו שהיא הייתה משימה ארוכה.

  5. לוחצים על האירוע Animation Frame Fired. בכרטיסייה Summary יוצג עכשיו מידע על האירוע הזה. לחיצה על הקישור שלצד Initiated by (האירוע הופעל על ידי) תגרום ל-DevTools להדגיש את האירוע שהפעיל את האירוע Animation Frame Fired (הוצגה מסגרת של אנימציה). שימו לב גם לקישור app.update @. לחיצה עליו תוביל אתכם לשורה הרלוונטית בקוד המקור.

    מידע נוסף על האירוע Animation Frame Fired.

  6. מתחת לאירוע app.update יש כמה אירועים בצבע סגול. אם הן היו רחבות יותר, יכול להיות שכל אחת מהן הייתה כוללת משולש אדום. לוחצים על אחד מהאירועים הסגולים של פריסה. מידע נוסף על האירוע זמין בכרטיסייה Summary (סיכום) בכלי הפיתוח. אכן, יש אזהרה לגבי עיצוב מחדש בכפייה (מילה אחרת ל'פריסה').

  7. בכרטיסייה Summary, לוחצים על הקישור לצד app.update @ בקטע Animation Frame Requested. כלי הפיתוח יעביר אתכם לשורת הקוד שהכריחה את הפריסה.

    שורת הקוד שגרמה לפריסת האילוץ.

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

בונוס: ניתוח הגרסה האופטימיזציה

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

השלבים הבאים

המודל RAIL הוא הבסיס להבנת הביצועים. המודל הזה מראה לכם אילו מדדי ביצועים הכי חשובים למשתמשים שלכם. מידע נוסף זמין במאמר מדידת הביצועים באמצעות מודל RAIL.

כדי להתרגל לחלונית הביצועים, מומלץ לתרגל. נסו ליצור פרופילים של הדפים שלכם ולנתח את התוצאות. אם יש לכם שאלות לגבי התוצאות, אתם יכולים לפתוח שאלה ב-Stack Overflow עם התג google-chrome-devtools. אם אפשר, כדאי לכלול צילומי מסך או קישורים לדפים שאפשר לשחזר.

כדי להפוך למומחים בביצועים בסביבת זמן ריצה, צריך ללמוד איך הדפדפן מתרגם HTML,‏ CSS ו-JS לתמונה של פיקסלים במסך. המקום הטוב ביותר להתחיל בו הוא סקירה כללית על ביצועי העיבוד. המבנה של הפריים עוסק בפרטים נוספים.

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