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

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

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

מסך המדדים בזמן אמת

כשפותחים את החלונית Performance בפעם הראשונה, מוצג המסך Live Metrics, שבו מופיע סיכום מיידי של ביצועי הדף הנוכחי באמצעות שלושת מדדי Core Web Vitals.

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

תכונות של מסך המדדים בזמן אמת

במסך מדדים בזמן אמת מוצגות התכונות הבאות, בנוסף למדדים:

• מדדים מהשטח מ-CrUX כשהם מופעלים בחלונית מדדים מהשטח.
• סיכום של הבדלים בולטים בין המדדים המקומיים למדדים בשטח.
• אלמנט ה-LCP, שאפשר להעביר מעליו את העכבר כדי להדגיש אותו בדף.
• פרטים על אשכול ה-CLS וסוג ה-INP
• מידע נוסף על הצגת המדדים (לדוגמה, חלקי המשנה של LCP ו-INP והיסטוגרמות של נתוני שדה)
• החלוניות אינטראקציות ושינויי פריסה מתעדות את ההיסטוריה של האינטראקציות ושינויי הפריסה.
• חלונית מדדי שטח שבה אפשר להפעיל את נתוני CrUX, פרטים על התקופה של הנתונים האלה, אפשרות לעבור בין נתוני המקור לנתוני כתובת ה-URL (אם הם זמינים) ובין נתונים ממחשבים לנתונים ממכשירים ניידים.
• חלונית הגדרות סביבה עם הנחיות לגבי המכשיר, המעבד והגבלת רוחב הפס שבהם כדאי להשתמש, על סמך נתוני CrUX.

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

ביצועי שיא

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

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

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

1. עוברים לדף שרוצים לנתח.
2. לוחצים על הכרטיסייה Performance ב-DevTools.
3. לוחצים על הקלטה .
4. מבצעים אינטראקציה עם הדף. כלי הפיתוח מתעדים את כל הפעילות בדף שמתרחשת כתוצאה מהאינטראקציות שלכם.
5. כדי להפסיק את ההקלטה, לוחצים שוב על הקלטה או על הפסקה.

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

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

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

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

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

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

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

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

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

אילוץ של מנגנון איסוף בזמן ההקלטה

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

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

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

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

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

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

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

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

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

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

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

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

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

ויסות נתונים במעבד בזמן ההקלטה

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

1. פותחים את התפריט הגדרות הצילום . איך רואים את הגדרות ההקלטה
2. מגדירים את CPU לרמת ההאטה הרצויה.

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

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

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

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

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

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

הפעלת מכשור רינדור מתקדם

כדי לראות פירוט של כלי הציור:

1. פותחים את התפריט הגדרות הצילום . איך רואים את הגדרות ההקלטה
2. מסמנים את תיבת הסימון Enable advanced paint instrumentation (הפעלת כלי מדידה מתקדמים של ציור).

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

הצגת טראקים בהתאמה אישית

הפעלת סיכומים של טראקים בהתאמה אישית ושל קבוצות טראקים בהתאמה אישית בסיכום המעקב, שאפשר להתאים אישית באמצעות DevTools Extensibility API.

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

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

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

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

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

הוספת הערות ושיתוף של ממצאי הביצועים

קבלת תובנות פרקטיות

החלונית ביצועים כוללת תובנות לגבי הביצועים שמופיעות גם בדוחות של Lighthouse. התובנות האלה יכולות להציע דרכים לשיפור הביצועים ולספק ניתוח מודרך של בעיות בביצועים, כמו רכיבי משנה של LCP ו-INP, בעיות בגילוי בקשות LCP, צדדים שלישיים ומשאבי JavaScript כפולים ומדור קודם. הרשימה המלאה זמינה במאמרי העזרה של Performance Insights.

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

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

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

ניווט בהקלטה

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

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

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

שימוש במקשי קיצור לניווט

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

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

• קלאסי: שינוי מרחק התצוגה באמצעות גלגל העכבר (למעלה או למטה בלוח המגע) וגלילה אנכית באמצעות Shift + גלגל העכבר.
• מודרני: גלילה אנכית באמצעות גלגל העכבר, גלילה אופקית באמצעות Shift + גלגל העכבר, ושינוי מרחק התצוגה באמצעות Command/Control + גלגל העכבר.

בתיבת הדו-שיח של מקשי הקיצור יש גם רשימה של מקשי הקיצור הזמינים.

בוחרים חלק מההקלטה.

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

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

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

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

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

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

יצירת פירורי לחם ומעבר בין רמות זום

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

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

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

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

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

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

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

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

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

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

החלונית תקפל אוטומטית קינון מוגזם בסקריפטים כאלה ותסמן אותם בסימן On ignore list (REGULAR_EXPRESSION).

בתיבת הדו-שיח compress Show ignore list settings dialog (דחיסה), אפשר להפעיל ולהשבית את הכללים של רשימת קטעי הקוד להתעלמות.

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

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

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

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

אפשר לחפש פעילויות בטראק Main ובקשות בטראק Network.

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

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

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

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

• לוחצים על הלחצנים expand_less הקודם או expand_more הבא.
• מקישים על Shift+Enter כדי לבחור את הקודם או על Enter כדי לבחור את הבא.

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

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

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

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

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

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

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

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

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

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

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

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

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

האירוע שנבחר מודגש בכחול בחלונית Performance.

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

ההבדל בין אירועים מאינטראקציה ישירה לבין אירועים של צד שלישי

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

כדי להתמקד רק בביצועים של קוד מאינטראקציה ישירה (First-Party):

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

הדגשת אירועים באמצעות הטבלה "צד ראשון או צד שלישי"

בטווח שנבחר בסקירה הכללית של ציר הזמן, אם לא נבחרו אירועים, בכרטיסייה Summary (סיכום) מוצגת טבלה של 1st / 3rd party (צד ראשון / צד שלישי) עם רשימה של גדלי ההעברה וזמני השרשור הראשי של הרכיבים הבאים:

• ישות מובנית שמסומנת בתג 1st party.
• כל הישויות של צד שלישי שזוהו בטווח שנבחר, לא מסומנות.
• תוספים שמסומנים בתגים של Extension.
• [unattributed] ישויות אחרות.

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

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

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

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

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

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

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

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

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

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

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

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

• ביטול תוקף של סגנון או פריסה -> חישוב מחדש של סגנונות או פריסה
• ‫Request Animation Frame ->‏ Animation Frame Fired
• ‫Request Idle Callback -> Fire Idle Callback
• Install Timer -> Timer Fired
• ‫Create WebSocket (יצירת WebSocket) ->‏ Send... (שליחה...) ו-Receive WebSocket Handshake (קבלת לחיצת יד של WebSocket) או Destroy WebSocket (כיבוי סופי של WebSocket)
• תזמון של postTask -> הפעלת postTask או ביטול של postTask

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

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

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

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

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

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

   

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

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

   

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

התעלמות מסקריפטים בתרשים הלהבות (flame chart)

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

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

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

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

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

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

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

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

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

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

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

הנה הסבר על המושג פעילויות בסיסיות שמוזכר בכרטיסייה Call tree, בכרטיסייה Bottom-up ובקטעים יומן אירועים.

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

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

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

הכרטיסייה Call tree

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

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

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

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

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

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

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

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

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

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

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

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

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

טבלת המחסנית הכבדה ביותר

בצד שמאל של הכרטיסיות Call tree או Bottom-up, לוחצים על right_panel_open Show heaviest stack כדי להציג את הטבלה Heaviest stack.

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

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

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

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

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

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

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

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

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

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

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

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

צפייה בסמני ביצועים

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

• הצגת תוכן ראשוני (FCP)
• המהירות שבה נטען רכיב התוכן הכי גדול (LCP)
• אירוע DOMContentLoaded‏ (DCL)
• אירוע Onload‏ (L)

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

הצגת תזמונים בהתאמה אישית

בטראק Timings, מעיינים בסמני הביצועים בהתאמה אישית, כמו:

• ‫performance.mark() שיחות. סימן בודד עם הסבר קצר מוצג למטה ב-813.44 אלפיות השנייה, עם התווית Starting to run JavaScript.
• שיחות performance.measure(). מתחת מופיע טווח צהוב עם התווית אינטראקציה איטית.

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

צפייה באינטראקציות

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

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

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

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

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

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

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

אפשר לראות את השינויים בפריסה במסלול Layout shifts. התזוזות מוצגות כמעוינים סגולים ומקובצות באשכולות (קווים סגולים) לפי הקרבה שלהן בציר הזמן.

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

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

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

צפייה באנימציות

אפשר לראות את האנימציות בטראק Animations. האנימציות נקראות על שם רכיבים או מאפייני CSS תואמים, אם יש כאלה, למשל transform או my-element. אנימציות ללא קומפוזיציה מסומנות במשולשים אדומים בפינה הימנית העליונה.

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

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

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

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

צופים בפעילות הרסטר בקטע Thread Pool.

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

כלי פיתוח מספקים דרכים רבות לנתח FPS:

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

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

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

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

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

בקטע Frames (מסגרות) יכולים להופיע ארבעה סוגים של מסגרות:

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

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

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

הצגת בקשות לאחזור מהרשת

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

צפייה במשך הזמן של חלק מההקלטה

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

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

צפייה בצילום מסך

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

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

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

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

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

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

הצגת מידע על השכבות

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

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

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

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

כדי להזיז את הדיאגרמה:

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

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

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

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

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

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

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

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

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

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

איך רואים את נתוני רינדור הפריימים

הצגת אירועי רינדור בזמן אמת באמצעות Paint Flashing

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

מידע נוסף זמין במאמר בנושא הדגשה של אזורים בצבע.

צפייה בשכבת-על של שכבות באמצעות Layer Borders

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

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

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

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

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