הסבר על תכונות הביצועים

Kayce Basques

Sofia Emelianova

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

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

הקלטת ביצועים

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

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

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

1. עוברים לדף שרוצים לנתח.
2. לוחצים על הכרטיסייה ביצועים בכלי הפיתוח.

3. לוחצים על הקלטה .

   

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

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

הקלטת ביצועי הטעינה

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

1. עוברים לדף שרוצים לנתח.
2. פותחים את החלונית ביצועים ב-DevTools.

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

   

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

בדוגמה הזו, בחלונית ביצועים מוצגת הפעילות במהלך טעינת הדף.

צילום צילומי מסך בזמן ההקלטה

מסמנים את התיבה צילומי מסך כדי לצלם צילום מסך של כל פריים במהלך הצילום.

במאמר הצגת צילום מסך מוסבר איך מבצעים פעולות בצילומי מסך.

אילוץ איסוף אשפה במהלך ההקלטה

בזמן צילום הדף, לוחצים על Collect garbage (איסוף אשפה) mop (ניקוי) כדי לאלץ איסוף אשפה.

הצגת הגדרות ההקלטה

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

השבתה של דגימות JavaScript

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

1. פותחים את התפריט Capture settings (הגדרות הצילום). הצגת הגדרות הצילום
2. מסמנים את התיבה השבתה של דגימות JavaScript.
3. מצלמים את הדף.

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

בדוגמה הזו מוצגת הקלטה עם דוגמאות JS מושבתות.

בדוגמה הזו מוצגת הקלטה עם דוגמאות JS מופעלות.

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

כדי להגביל את רוחב הפס של הרשת במהלך ההקלטה:

1. פותחים את התפריט Capture settings (הגדרות הצילום). הצגת הגדרות הצילום
2. מגדירים את Network לרמת הבקרה שנבחרה.

ויסות נתונים (throttle) במעבד בזמן הצילום

כדי לבצע ויסות נתונים (throttle) במעבד במהלך ההקלטה:

1. פותחים את התפריט Capture settings (הגדרות הצילום). הצגת הגדרות הצילום
2. מגדירים את CPU לרמת הצמצום שנבחרה.

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

הפעלת נתונים סטטיסטיים של סלקטור ב-CSS

כדי להציג את הנתונים הסטטיסטיים של סלקטורים של כללי CSS במהלך אירועי Recalculate Style ממושכים:

1. פותחים את התפריט Capture settings (הגדרות הצילום). הצגת הגדרות הצילום
2. מסמנים את התיבה הפעלת נתונים סטטיסטיים של סלקטור ב-CSS.

לפרטים נוספים, ראו ניתוח הביצועים של סלקטורים ב-CSS במהלך אירועים של Recalculate Style.

הפעלת אינסטרומנטציה מתקדמת של צביעה

כדי להציג אינסטרומנטציה מפורטת של צביעה:

1. פותחים את התפריט Capture settings (הגדרות הצילום). הצגת הגדרות הצילום
2. מסמנים את התיבה Enable advanced paint instrumentation.

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

שמירת הקלטה

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

טעינת הקלטה

כדי לטעון הקלטה, לוחצים לחיצה ימנית ובוחרים באפשרות Load Profile (טעינה של פרופיל).

ניקוי ההקלטה הקודמת

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

ניתוח של הקלטת ביצועים

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

ניווט בהקלטה

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

בחירת קטע מההקלטה

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

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

כדי לבחור קטע באמצעות המקלדת:

1. ממקדים את הטראק הראשי או כל אחד מהטראקים הסמוכים.
2. כדי להגדיל את התצוגה, לזוז שמאלה, להקטין את התצוגה ולזוז ימינה, לוחצים על המקשים W,‏ A,‏ S ו-D, בהתאמה.

כדי לבחור קטע באמצעות משטח מגע:

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

יצירת נתיב ניווט וקפיצה בין רמות זום

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

כדי ליצור קוביות לחם ולהשתמש בהן:

1. בקטע סקירה כללית של ציר הזמן, בוחרים קטע מההקלטה.
2. מעבירים את העכבר מעל הבחירה ולוחצים על הלחצן N ms zoom_in. הבחירה תתרחב כדי למלא את הסקירה הכללית של ציר הזמן. שרשרת של נתיבי ניווט מתחילה להיבנות בחלק העליון של הסקירה הכללית של ציר הזמן.
3. חוזרים על שני השלבים הקודמים כדי ליצור עוד נתיב ניווט בתצוגת עץ. אפשר להמשיך להטמיע נתיבי ניווט כל עוד טווח הבחירה גדול מ-5 אלפיות השנייה.
4. כדי לעבור לרמת זום שנבחרה, לוחצים על הלחצן המתאים בשרשור שבחלק העליון של הסקירה הכללית של ציר הזמן.

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

גלילה בתרשים להבות ארוך

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

חיפוש פעילויות

אפשר לחפש בפעילויות שבמסלול ראשי ובבקשות שבמסלול רשת.

כדי לפתוח תיבת חיפוש בתחתית החלונית ביצועים, מקישים על:

• macOS: ‏ Command‎+F
• Windows, ‏ Linux: ‏ Control‎+‎F

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

כדי לעבור בין הפעילויות שתואמות לשאילתה:

• לוחצים על הלחצנים expand_less Previous (הקודם) או expand_more Next (הבא).
• מקישים על Shift+Enter כדי לבחור את הפריט הקודם, או על Enter כדי לבחור את הפריט הבא.

בחלונית ביצועים מוצגת תצוגה מפורטת מעל הפעילות שנבחרה בתיבת החיפוש.

כדי לשנות את הגדרות השאילתה:

• לוחצים על match_case התאמה לאותיות רישיות (בשפות לועזיות) כדי להפוך את השאילתה לתלויה ברישיות.
• לוחצים על regular_expression ביטוי רגולרי כדי להשתמש בביטוי רגולרי בשאילתה.

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

שינוי סדר הטראקים והסתרה שלהם

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

כדי להזיז ולהסתיר טראקים:

1. כדי להיכנס למצב ההגדרה, לוחצים לחיצה ימנית על שם הטראק ובוחרים באפשרות Configure tracks (הגדרת טראקים).
2. לוחצים על arrow_upward למעלה או על arrow_downward למטה כדי להזיז טראק למעלה או למטה. לוחצים על visibility_off כדי להסתיר אותו.
3. בסיום, לוחצים על סיום הגדרת המסלולים בתחתית המסך כדי לצאת ממצב ההגדרה.

בסרטון הזה אפשר לראות את תהליך העבודה הזה בפעולה.

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

הצגת הפעילות בשרשור הראשי

בעזרת הטראק ראשי אפשר לראות את הפעילות שהתרחשה בשרשור הראשי של הדף.

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

בדוגמה הזו מוצג מידע נוסף על אירוע הקריאה לפונקציה get בכרטיסייה Summary.

קריאת תרשים הלהבות

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

בדוגמה הזו מוצג תרשים אש בטראק Main. אירוע click גרם לקריאה לפונקציה אנונימית. הפונקציה הזו, בתורה, קראה לפונקציה onEndpointClick_, שנקראה לפונקציה handleClick_ וכן הלאה.

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

גם משימות ארוכות מודגשות באמצעות משולש אדום, והחלק שלהן שנמשך יותר מ-50 אלפיות השנייה מטושטש באדום:

בדוגמה הזו, המשימה נמשכה יותר מ-400 אלפיות השנייה, ולכן החלק שמייצג את 350 אלפיות השנייה האחרונות מופיע בגוון אדום, בעוד שה-50 אלפיות השנייה הראשונות לא מופיעות בגוון אדום.

בנוסף, בערוץ Main מוצג מידע על פרופילי מעבדים שהופעלו והושבתו באמצעות הפונקציות profile() ו-profileEnd() במסוף.

כדי להסתיר את תרשים הלהבה המפורט של קריאות JavaScript, אפשר לעיין במאמר השבתה של דגימות JavaScript. כשהטעימות של JavaScript מושבתות, מוצגים רק האירועים ברמה הגבוהה, כמו Event (click) ו-Function Call.

מעקב אחר הגורמים שהפעילו את האירוע

אפשר להציג בחץ ראשי את הגורמים היזמים הבאים ואת האירועים שהם גרמו להם:

• אימות לא תקין של סגנון או פריסה –> חישוב מחדש של סגנונות או פריסה
• בקשה לפריים אנימציה -> הופעל פריים אנימציה
• Request Idle Callback -> Fire Idle Callback
• התקנת טיימר -> הופעל הטיימר
• Create WebSocket (יצירת WebSocket) -> Send… (שליחה) ו-Receive WebSocket Handshake (קבלת לחיצת יד של WebSocket) או Destroy WebSocket (כיבוי סופי של WebSocket)

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

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

הסתרת פונקציות וצאצאים שלהן בתרשים הלהבה

כדי להפחית את העומס בתרשים הלהבות בשרשור הראשי, אפשר להסתיר פונקציות נבחרות או את הצאצאים שלהן:

1. בטראק Main, לוחצים לחיצה ימנית על פונקציה ובוחרים באחת מהאפשרויות הבאות או מקישים על מקש הקיצור המתאים:

   • הסתרת הפונקציה (H)
   • הסתרת הצאצאים (C)
   • הסתרת הצאצאים החוזרים (R)
   • איפוס החשבונות של הילדים (U)
   • איפוס התיעוד (T)
   • הוספת סקריפט לרשימת קטעי הקוד להתעלמות (I)

   

   לחצן התפריט הנפתח arrow_drop_down מופיע לצד שם הפונקציה עם צאצאים מוסתרים.

2. כדי לראות את מספר הצאצאים המוסתרים, מעבירים את העכבר מעל הלחצן הנפתח arrow_drop_down.

   

3. כדי לאפס פונקציה עם צאצאים מוסתרים או את תרשים הלהבה כולו, בוחרים את הפונקציה ולוחצים על U או לוחצים לחיצה ימנית על כל פונקציה ובוחרים באפשרות Reset trace (איפוס המעקב).

התעלמות מסקריפטים בתרשים הלהבה

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

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

הצגת הפעילויות בטבלה

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

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

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

• match_case התאמה לאותיות רישיות (בשפות לועזיות).
• regular_expression ביטוי רגולרי.
• match_word התאמה למילה שלמה.

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

לוחצים על קישור כדי לפתוח קובץ מקור בחלונית מקורות.

הערה: שלושת הקטעים הבאים מתייחסים לאותו הדגמה. אתם יכולים להריץ את הדמו בעצמכם בכתובת Activity Tabs Demo ולראות את המקור בכתובת GoogleChrome/devtools-samples/perf/activitytabs.html.

פעילויות ברמה הבסיסית

בהמשך מוסבר על המושג פעילויות ברמה הבסיסית שמצוין בכרטיסייה Call Tree, בכרטיסייה Bottom-Up ובקטע Event Log.

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

בתרשים הלהבות של המסלול Main, הפעילויות ברמה הבסיסית מופיעות בחלק העליון של התרשים. בכרטיסיות Call Tree ו-Event Log, פעילויות ברמה הבסיסית הן הפריטים ברמה העליונה.

דוגמה לפעילויות ברמה הבסיסית מופיעה בקטע הכרטיסייה Call Tree.

הכרטיסייה 'עץ הקריאות'

בכרטיסייה Call Tree אפשר לראות אילו פעילויות ברמה הבסיסית גורמות ליותר עבודה.

בכרטיסייה Call Tree (עץ השיחות) מוצגות רק פעילויות במהלך החלק שנבחר מההקלטה. במאמר בחירת קטע מהקלטה מוסבר איך בוחרים קטעים.

בדוגמה הזו, הפריטים ברמת העליונה בעמודה Activity, כמו Event, ‏ Paint ו-Composite Layers, הם פעילויות ברמה הבסיסית. ההטמעה מייצגת את סטאק הקריאות. בדוגמה הזו, האירוע Event גרם לאירוע Function Call, שגרם לאירוע button.addEventListener, שגרם לאירוע b וכן הלאה.

זמן עצמי מייצג את הזמן שהתבצע ישירות בפעילות הזו. הזמן הכולל מייצג את הזמן שהמשתמשים בילו בפעילות הזו או בפעילות צאצאית שלה.

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

משתמשים בתיבה Filter כדי לסנן אירועים לפי שם הפעילות.

כברירת מחדל, התפריט Grouping מוגדר לאפשרות No Grouping. אפשר להשתמש בתפריט Grouping כדי למיין את טבלת הפעילויות לפי קריטריונים שונים.

לוחצים על Show Heaviest Stack (הצגת הסטאק הכבד ביותר) כדי להציג טבלה נוספת שמשמאל לטבלה Activity. לוחצים על פעילות כדי לאכלס את הטבלה המחסנית הכבדה ביותר. בטבלה המחסנית הכבדה ביותר מוצגים צאצאים של הפעילות שנבחרה שהזמן לביצוע שלהם היה הארוך ביותר.

הכרטיסייה 'מלמטה למעלה'

בכרטיסייה מלמטה למעלה אפשר לראות אילו פעילויות נמשכו הכי הרבה זמן באופן ישיר.

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

בתרשים הלהבות של המסלול Main בדוגמה הזו, אפשר לראות שכמעט כל הזמן הושפע בהפעלת שלוש הקריאות ל-wait(). לכן, הפעילות העיקרית בכרטיסייה מלמטה למעלה היא wait. בתרשים הלהבה, החלק הצהוב מתחת לשיחות אל wait הוא למעשה אלפי שיחות Minor GC. בהתאם, בכרטיסייה Bottom-Up (מלמטה למעלה), הפעילות השנייה הכי יקרה היא Minor GC.

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

העמודה Total Time מייצגת את הזמן המצטבר שהמשתמשים בילו בפעילות הזו או בפעילות צאצאית כלשהי שלה.

הכרטיסייה 'יומן אירועים'

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

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

העמודה Start Time מייצגת את הנקודה שבה הפעילות הזו התחילה, ביחס להתחלת ההקלטה. שעת ההתחלה 1573.0 ms של הפריט שנבחר בדוגמה הזו מציינת שהפעילות התחילה 1,573 מיקרו-שניות אחרי תחילת ההקלטה.

העמודה Self Time מייצגת את הזמן שהמשתמשים השקיעו ישירות בפעילות הזו.

העמודות Total Time מייצגות את הזמן שהושקע ישירות בפעילות הזו או באחת מהפעילות המשניות שלה.

לוחצים על Start Time (שעת ההתחלה), Self Time (הזמן שלכם) או Total Time (הזמן הכולל) כדי למיין את הטבלה לפי העמודה הזו.

משתמשים בתיבה סינון כדי לסנן את הפעילויות לפי שם.

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

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

הצגת חותמות הזמן

בטראק Timings (זמנים) מוצגים סמנים חשובים כמו:

• הצגת צבע ראשוני (FP)
• הצגת תוכן ראשוני (FCP)
• Largest Contentful Paint ‏ (LCP)
• אירוע DOMContentLoaded‏ (DCL)
• אירוע Onload (L)
• השיחות בהתאמה אישית של performance.mark(). סימן בודד עם תיאור קצר מוצג בהמשך, בזמן 813.44 אלפיות השנייה, עם התווית התחלת ההרצה של JavaScript.
• השיחות בהתאמה אישית של performance.measure(). מתחת לקוד מופיע קטע צהוב עם התווית אינטראקציה איטית.

בוחרים סמן כדי לראות פרטים נוספים בכרטיסייה Summary (סיכום), כולל חותמת הזמן, משך הזמן הכולל, משך הזמן של הפעילות עצמה והאובייקט detail. בקריאות ל-performance.mark() ול-performance.measure(), בכרטיסייה מוצגים גם מעקבים אחר סטאק.

הצגת אינטראקציות

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

כדי להציג את האינטראקציות:

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

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

בנתיב אינטראקציות מוצגות גם אזהרות לגבי זמן אינטראקציה עד התוכן הבא (INP) לגבי אינטראקציות שנמשכות יותר מ-200 אלפיות השנייה, בכרטיסייה סיכום ובהסבר קצר שמופיע כשמעבירים את העכבר מעל:

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

הצגת שינויי הפריסה

הצגת שינויי הפריסה בערוץ שינויי פריסה. משמרות מוצגות כמעוינים סגולים ומקובצות בclusters (קווים סגולים) על סמך הקרבה שלהן בציר הזמן.

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

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

מידע נוסף זמין במאמר מדד יציבות חזותית (CLS).

הצגת הפעילות של GPU

הצגת הפעילות של ה-GPU בקטע GPU.

הצגת פעילות של נתונים רסטריים

אפשר לראות את הפעילות של הרסטר בקטע מאגר השרשור.

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

יש ב-DevTools הרבה דרכים לנתח את מספר הפריימים לשנייה:

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

הקטע Frames (פריימים)

בקטע Frames (פריימים) מוצגת משך הזמן המדויק של פריים מסוים.

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

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

בקטע מסגרות אפשר להציג ארבעה סוגים של מסגרות:

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

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

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

הצגת בקשות רשת

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

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

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

מעבירים את העכבר מעל בקשה כדי לראות הסבר קצר עם הפרטים הבאים:

• כתובת ה-URL של הבקשה והזמן הכולל שנדרש לביצועה.
• עדיפות או שינוי של עדיפות, לדוגמה, Medium -> High.
• מציין אם הבקשה היא Render blocking או לא.
• פירוט של זמני הבקשות, כפי שמתואר בהמשך.

כשלוחצים על בקשה, מוצגת בחץ בנתיב Network מגורם ההתחלה שלה אל הבקשה.

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

בכרטיסייה סיכום מוצגת גם פירוט של זמני הבקשה.

הבקשה ל-www.google.com מיוצגת על ידי קו בצד ימין (|–), עמודה באמצע עם חלק כהה וחלק בהיר, וקו בצד ימין (–|).

פירוט נוסף של זמני הצגה מופיע בכרטיסייה רשת. לוחצים לחיצה ימנית על הבקשה בטראק רשת או על כתובת ה-URL שלה בכרטיסייה סיכום, ואז לוחצים על הצגה בחלונית 'רשת'. כלי הפיתוח יעבירו אתכם לחלונית Network (רשת) ויבחרו את הבקשה המתאימה. פותחים את הכרטיסייה תזמון.

כך מתבצעת ההתאמה בין שתי פירוט הנתונים:

• השורה הימנית (|–) כוללת את כל האירועים עד לקבוצת האירועים Connection start. במילים אחרות, זה כל מה שקדם ל-Request Sent.
• החלק המואר של הסרגל הוא Request sent ו-Waiting for server response.
• החלק הכהה בסרגל הוא Content download.
• השורה השמאלית (–|) מייצגת את משך ההמתנה ל-thread הראשי. הוא לא מוצג בכרטיסייה רשת > תזמון.

הצגת מדדי זיכרון

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

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

בדוגמה הזו מוצגים מדדי הזיכרון מעל הכרטיסייה סיכום.

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

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

הצגת משך הזמן של קטע בהקלטה

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

בדוגמה הזו, חותמת הזמן 488.53ms שבתחתית החלק שנבחר מציינת את משך הזמן של החלק הזה.

הצגת צילום מסך

במאמר צילום מסך במהלך ההקלטה מוסבר איך מפעילים את התכונה.

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

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

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

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

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

הצגת פרטי השכבות

כדי להציג מידע מתקדם על שכבות של פריים:

1. מפעילים אינסטרומנטציה מתקדמת של צביעה.
2. בוחרים פריים בקטע Frames. ב-DevTools מוצג מידע על השכבות בכרטיסייה החדשה Layers (שכבות), לצד הכרטיסייה Event Log (יומן האירועים).

מעבירים את העכבר מעל שכבה כדי להדגיש אותה בתרשים.

בדוגמה הזו, השכבה #39 מודגשת כשמציבים את סמן העכבר מעליה.

כדי להזיז את התרשים:

• לוחצים על מצב תנועה כדי לזוז בצירים X ו-Y.
• לוחצים על מצב סיבוב כדי לסובב לאורך ציר Z.
• לוחצים על איפוס הטרנספורמציה כדי לאפס את התרשים למיקום המקורי שלו.

הדגמה של ניתוח שכבות:

הצגת הכלי לניתוח ביצועים (profiler) של המרת תמונה וקטורית למפת סיביות (painting)

כדי להציג מידע מתקדם על אירוע צביעה:

1. מפעילים אינסטרומנטציה מתקדמת של צביעה.
2. בוחרים אירוע Paint בטראק Main.

ניתוח ביצועי הרינדור באמצעות הכרטיסייה 'רינדור'

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

פותחים את הכרטיסייה עיבוד.

הצגת הפריימים לשנייה בזמן אמת באמצעות מד ה-FPS

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

נתונים סטטיסטיים של רינדור פריימים

הצגת אירועי ציור בזמן אמת באמצעות הבזקי צבע

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

הבהוב של האזורים לצביעה

הצגת שכבת-על של שכבות באמצעות גבולות שכבות

אפשר להשתמש בגבולות שכבות כדי להציג שכבת-על של גבולות שכבות ואריחים מעל הדף.

גבולות שכבות

איתור בעיות בביצועי הגלילה בזמן אמת

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

בעיות בביצועי הגלילה