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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

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

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

   

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

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

תיעוד ביצועי הטעינה

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ויסות נתונים ברשת במהלך הקלטה

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

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

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

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

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

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

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

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

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

מידע נוסף זמין במאמר ניתוח הביצועים של סלקטור ב-CSS במהלך 'חישוב מחדש של אירועי סגנון'.

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

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

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

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

אמולציה של הפעלות בו-זמניות בחומרה

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

כדי לבצע אמולציה של בו-זמניות בחומרה:

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

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

כדי לחזור לערך ברירת המחדל של 10, לוחצים על הלחצן Revert (חזרה לגרסה הקודמת) .

שמירת הקלטה

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

טעינת הקלטה

כדי לטעון הקלטה, לוחצים לחיצה ימנית ובוחרים באפשרות 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. כדי להיכנס למצב תצורה, לוחצים לחיצה ימנית על שם של טראק ובוחרים באפשרות הגדרת טראקים.
2. לוחצים על arrow_upward למעלה או על arrow_downward למטה כדי להזיז טראק למעלה או למטה. לוחצים על visibility_off כדי להסתיר אותו.
3. בסיום, לוחצים על סיום הגדרת המסלולים בתחתית המסך כדי לצאת ממצב ההגדרה.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

יוזמי אירוע מעקב

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

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

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

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

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

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

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

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

   

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

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

   

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

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

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

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

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

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

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

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

• match_case התאמה באותיות רישיות.
• regular_expression ביטוי רגולרי.
• match_word התאמה למילה שלמה.

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

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

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

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

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

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

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

דוגמה לפעילויות ברמה הבסיסית (root) זמינה בכרטיסייה Call עץ (עץ הקריאות).

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

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

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

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

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

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

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

כברירת מחדל, התפריט 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 (הזמן הכולל) כדי למיין את הטבלה לפי העמודה הזו.

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

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

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

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

במסלול תזמונים, מציגים סמנים חשובים כמו:

• שלב ראשון (FP)
• הצגת תוכן ראשוני (FCP)
• המהירות שבה נטען רכיב התוכן הכי גדול (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 אלפיות השנייה מסומנות בתרגיל אדום בפינה השמאלית העליונה.

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

אפשר לראות את הפעילות של GPU בקטע GPU.

הצגת פעילות של רשת נקודות

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

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

בכלי הפיתוח יש כמה דרכים לנתח פריימים לשנייה:

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

הקטע 'מסגרות'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הבקשה עבור 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, לוחצים לחיצה ארוכה וגוררים ימינה או שמאלה כדי לבחור קטע מההקלטה. בחלק התחתון של הבחירה, כלי הפיתוח מציגים את משך הזמן שנדרש להפעלת החלק.

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

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

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

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

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

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

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

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

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

כדי להציג מידע מתקדם על מסגרת:

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

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

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

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

• לוחצים על Pan Mode כדי לנוע על פני הצירים X ו-Y.
• לוחצים על Override Mode (מצב סיבוב) כדי לסובב את התצוגה לאורך ציר ה-Z.
• לוחצים על Reset Transform כדי לאפס את הדיאגרמה למיקום המקורי.

הצגת ניתוח השכבות בפעולה:

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

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

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

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

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

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

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

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

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

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

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

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

הצגת שכבת-על של שכבות עם גבולות שכבה

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

גבולות שכבות

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

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

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