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

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

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

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

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

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

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

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

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

   

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

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

בדוגמה הזו מוצג תרשים להבות בטראק הראשי. האירוע 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

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

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

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

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

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

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

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

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

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

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

תוכלו למצוא כאן הסבר על הקונספט פעילויות ברמה הבסיסית שמופיע בכרטיסייה Call Tree, בכרטיסייה למטה ובקטע Event Log (יומן אירועים).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הצגת פעילות GPU

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הבקשות מסומנות בצבעים כך:

• HTML: כחול
• CSS: סגול
• JS: צהוב
• תמונות: ירוק

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

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

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

בדוגמה הקודמת, הבקשה של www.google.com מיוצגת על ידי קו משמאל, קו באמצע עם חלק כהה וחלק בהיר, וקו בצד ימין. בצילום המסך הבא אפשר לראות את הייצוג התואם של אותה הבקשה בכרטיסייה Timing בחלונית Network. כך שני הייצוגים האלה ממופים זה לזה:

• הקו הימני מייצג את כל מה שקורה בקבוצת האירועים Connection Start, כולל. במילים אחרות, זה כל מה שלפני Request Sent, בלעדי.
• החלק הקל של הסרגל הוא Request Sent ו-Waiting (TTFB).
• החלק הכהה של הסרגל הוא Content Download.
• השורה הימנית היא בעצם הזמן שמושקע בהמתנה ל-thread הראשי. הוא לא מיוצג בכרטיסייה Timing.

בדוגמה הזו מוצג ייצוג של סרגל קו של הבקשה www.google.com.

בדוגמה הזו מוצג הייצוג בכרטיסייה תזמון של הבקשה www.google.com.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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