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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

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

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

   

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

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

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

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

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

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

   

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

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

יצירת צילומי מסך תוך כדי צילום

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

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

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

בזמן צילום דף, לוחצים על איסוף אשפה להיעזר בידו כדי לאלץ איסוף אשפה.

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

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

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

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

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

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

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

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

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

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

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

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

כדי לווסת את המעבד (CPU) בזמן ההקלטה:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שמירת הקלטה

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

טעינת הקלטה

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

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

בסיום ההקלטה, לוחצים על ניקוי ההקלטה למחוק את ההקלטה מהחלונית ביצועים.

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

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

ניווט בהקלטה

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

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

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

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

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

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 הקודם או expand_less הבא.
• מקישים על Shift + Enter כדי לבחור את הפריט הקודם או על Enter כדי לבחור את הפריט הבא.

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

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

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

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

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

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

כדי להעביר ולהסתיר מסלולים:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

פעילויות בסיסיות

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

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

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

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

כרטיסיית עץ השיחות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הצגת התזמונים

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

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

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

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

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

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

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

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

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

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

הצגת פעילות GPU

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

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

לראות פעילות של רשת נקודות בקטע מאגר שרשורים.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הצגת הכלי ליצירת פרופיל צבע

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

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

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

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

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

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

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

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

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

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

למידע נוסף, ראו הבהוב ציור.

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

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

ראו גבולות שכבות.

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

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

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