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

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

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

שיא ביצועים

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

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

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

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

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

   

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

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

תיעוד ביצועי העומס

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ויסות הנתונים הוא יחסי ליכולות של המחשב שלך. לדוגמה, האפשרות האטה פי 2 גורמת למעבד (CPU) לפעול לאט פי 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 regex כדי להשתמש בביטוי רגולרי בשאילתה.

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

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

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

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

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

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

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

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

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

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

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

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

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

מעקב אחרי יוצרי אירועים

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

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

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

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

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

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

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

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

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

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

פעילויות שורש

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

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

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

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

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

אפשר להשתמש בכרטיסייה עץ שיחות כדי לראות אילו פעילויות ברמה הבסיסית (root) גורמות לרוב העבודה.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הצגת תזמונים

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

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

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

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

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

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

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

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

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

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

הצגת פעילות GPU

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

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

ניתן להציג פעילות של רשת נקודות בקטע Raster.

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

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

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

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

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

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

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

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

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

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

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

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

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

הבקשות מסומנות בצבע באופן הבא:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

כדי לראות את ניתוח השכבות בפעולה:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

למידע נוסף, ראו גבולות של שכבות.

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

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

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