בחלונית ביצועים מסמנים כל משימה ממושכת באמצעות משולש אדום בפינה השמאלית העליונה, ואזהרה בכרטיסייה סיכום. מטרת המשולש הזה היא לציין עבודה ב-thread הראשי שנמשך זמן רב ושהביצועים שלו איטיים:
בהקלטות הביצועים, חלק מהמשימות הממושכות האלה עשויות להיות אירועי חישוב מחדש של סגנון. אירוע Recalculate Style עוקב אחר הזמן שלוקח לדפדפן לבצע את הפעולות הבאות:
- מבצעים איטרציה דרך רכיבי ה-DOM בדף כדי למצוא את כל כללי סגנון ה-CSS שתואמים לאלמנט נתון.
- מחשבים את הסגנון בפועל של כל רכיב, על סמך כללי סגנון ה-CSS התואמים.
צריך לחשב מחדש את סגנונות ה-CSS בכל פעם שכללי ההחלה של כללי ה-CSS השתנו, למשל כאשר:
- רכיבים מתווספים ל-DOM או מוסרים ממנו.
- המאפיינים של רכיב משתנים, למשל הערך של מחלקה או של מאפיין מזהה.
- המשתמש מבצע קלט, כמו העברת עכבר או שינוי המיקוד ברכיב, ויכול להשפיע על כללי
:hover.
אירועים ממושכים מסוג חישוב מחדש של סגנון עלולים להיות בעייתיים בביצועים, ולהוביל לעיכובים ארוכים בהצגת המודעות, שמשפיעים על האינטראקציה עם הסרטון הבא (INP). אם מוצאים אירועים ארוכים של חישוב מחדש של סגנון, אפשר להשתמש בכרטיסייה נתונים סטטיסטיים של סלקטור כדי להבין איזה מהסלקטורים ב-CSS מושך הכי הרבה זמן ומאט את הביצועים.
הכרטיסייה נתונים סטטיסטיים של הבורר מספקת נתונים סטטיסטיים לגבי הסלקטורים של כללי ה-CSS שהיו מעורבים באירוע אחד או יותר מסוג חישוב מחדש של סגנון בהקלטת הביצועים.
תיעוד מעקב ביצועים בזמן שהאפשרות 'נתונים סטטיסטיים של הבורר' מופעלת
כדי להציג את הנתונים הסטטיסטיים של הסלקטורים של כללי ה-CSS במהלך אירועים ממושכים של חישוב מחדש של סגנון, צריך לתעד מעקב ביצועים כשהאפשרות נתונים סטטיסטיים של הבוררים מופעלת.
כדי לתעד מעקב ביצועים עם נתונים סטטיסטיים של סלקטור:
פותחים דף אינטרנט, למשל דף ההדגמה של גלריית התמונות.
פותחים את כלי הפיתוח ועוברים לחלונית Performance (ביצועים).
בחלונית ביצועים לוחצים על הלחצן הגדרות לכידת הגדרות ומסמנים את תיבת הסימון check_box הפעלת נתונים סטטיסטיים של סלקטור ב-CSS.
לוחצים על radio_button_checked Record (הקלטה), מריצים את התרחיש שרוצים לשפר ולוחצים על radio_button_checked Stop.
לאחר מכן, עיינו בנתונים הסטטיסטיים של הסלקטור ב-CSS, כמו שמתואר בקטעים הבאים.
הצגת נתונים סטטיסטיים של בורר כללי ה-CSS לאירוע אחד
כדי להציג את הנתונים הסטטיסטיים של הסלקטורים של כללי ה-CSS שקשורים לאירוע אחד מסוג חישוב מחדש של סגנון:
הקלטת מעקב ביצועים כשהתכונה 'נתונים סטטיסטיים של הבורר' מופעלת.
מחפשים את האירוע Recalculate Style (חישוב מחדש של הסגנון) בהקלטת הביצועים ולוחצים עליו.
בקטע התחתון של החלונית ביצועים, פותחים את הכרטיסייה נתונים סטטיסטיים של הבורר.
טבלה של הסלקטורים ב-CSS בכרטיסייה 'נתונים סטטיסטיים של הסלקטורים'
הכרטיסייה נתונים סטטיסטיים של הסלקטורים מכילה טבלה של סלקטורים ב-CSS. בטבלה מוצגים הפרטים הבאים לגבי כל סלקטור ב-CSS:
| עמודה | תיאור |
|---|---|
| הזמן שחלף (באלפיות השנייה) | משך הזמן שבו הדפדפן הקדיש התאמה לסלקטור ב-CSS הזה. זמן זה מצוין באלפיות שנייה (ms), כאשר 1 אלפיות שנייה היא 1/1,000 שנייה. |
| ניסיונות התאמה | מספר הרכיבים שמנוע הדפדפן ניסה להתאים לסלקטור הזה ב-CSS. |
| ספירת התאמות | מספר הרכיבים שמנוע הדפדפן התאים לסלקטור הזה ב-CSS. |
| % של אי-התאמות איטיות | היחס בין הרכיבים שלא תואמים לסלקטור ב-CSS הזה לבין הרכיבים שמנוע הדפדפן ניסה להתאים, וכתוצאה מכך, מנוע הדפדפן צריך להשתמש בקוד פחות שעבר אופטימיזציה כדי להתאים להם. |
| בורר | סלקטור ה-CSS שנמצא בהתאמה. |
| גיליון סגנונות CSS | גיליון הסגנונות של CSS שמכיל את הסלקטור ב-CSS. |
בסיום, בחלונית ביצועים פותחים את ההגדרות הגדרות צילום ומנקים את תיבת הסימון check_box הפעלת נתונים סטטיסטיים של סלקטור ב-CSS.
הצגת נתונים סטטיסטיים של בורר כללי ה-CSS עבור כמה אירועים
כדי להציג נתונים סטטיסטיים מצטברים של הסלקטורים של כללי ה-CSS שקשורים למספר אירועים של חישוב מחדש של סגנון, מעתיקים מספר טבלאות של נתונים סטטיסטיים של סלקטור לגיליון אלקטרוני באופן הבא:
הקלטת מעקב ביצועים כשהתכונה 'נתונים סטטיסטיים של הבורר' מופעלת.
מוצאים את האירוע הראשון מסוג חישוב מחדש של סגנון שמעניין אתכם ולוחצים עליו.
בקטע התחתון של החלונית ביצועים, פותחים את הכרטיסייה נתונים סטטיסטיים של הבורר.
לוחצים לחיצה ימנית על טבלת הנתונים הסטטיסטיים של הבורר ובוחרים באפשרות העתקת הטבלה.
מדביקים את הטבלה בגיליון אלקטרוני, כמו Google Sheets.
חוזרים על השלבים הקודמים עם שאר האירועים מסוג חישוב מחדש של סגנון שמעניינים אתכם.
בסיום, בחלונית ביצועים פותחים את ההגדרות הגדרות צילום ומנקים את תיבת הסימון check_box הפעלת נתונים סטטיסטיים של סלקטור ב-CSS.
הצגת נתונים סטטיסטיים מצטברים של בורר כללי ה-CSS עבור ההקלטה המלאה.
כדי להציג נתונים סטטיסטיים מצטברים של הסלקטורים של כללי ה-CSS שקשורים לכל תיעוד הביצועים:
הקלטת מעקב ביצועים כשהתכונה 'נתונים סטטיסטיים של הבורר' מופעלת.
אפשר ללחוץ על אזור ריק בתרשים הלהבות כדי לבטל את הבחירה בכל אירוע שניתן לבחור.
צריך לבחור את כל טווח ההקלטה. לשם כך, לוחצים לחיצה כפולה על התרשים של המעבד (CPU) בחלק העליון של החלונית ביצועים.
בקטע התחתון של החלונית ביצועים, פותחים את הכרטיסייה נתונים סטטיסטיים של הבורר. בחלק העליון תוצג שורה חדשה עם נתונים לגבי הסכומים הכוללים של כל הבוררים.
בסיום, בחלונית ביצועים פותחים את ההגדרות הגדרות צילום ומנקים את תיבת הסימון check_box הפעלת נתונים סטטיסטיים של סלקטור ב-CSS.
ניתוח נתונים סטטיסטיים של סלקטור ב-CSS
כדי למיין את הנתונים בטבלה נתונים סטטיסטיים של סלקטור בסדר עולה או יורד, לוחצים על כותרת העמודה. לדוגמה, כדי לראות אילו סלקטורים ב-CSS תופסים את רוב הזמן, לוחצים על כותרת העמודה הזמן שחלף (ms).
כדי לנסות לשפר את הביצועים של דף האינטרנט, כדאי להתמקד בסלקטורים ב-CSS ש:
- החישוב נמשך זמן רב (ערך גבוה של הזמן שחלף (באלפיות השנייה)).
- אותו הדפדפן ניסה להתאים פעמים רבות (ערך גבוה של ניסיונות התאמה).
- הדפדפן לא התאים בפועל להרבה רכיבים (ערך מספר התאמות נמוך בהשוואה לערך ניסיונות התאמה).
- שבהם יש אחוז גבוה של אי-התאמות איטיות.
לדוגמה, בצילום המסך הקודם:
- לסלקטור הראשון ב-CSS (
html body .ps[tooltip...) נדרש הכי הרבה זמן. - מנוע הדפדפן ניסה להתאים את הסלקטור הזה ב-CSS 1104 פעמים, אבל לא תאם אף רכיב.
לכן, סלקטור ה-CSS הזה הוא הראשון לנסות לשפר אותו.
כדאי לנסות לשנות את הסלקטורים ב-CSS כך שייקח להם פחות זמן לחשב ולהתאים פחות רכיבים בדף. האופן שבו אפשר לשפר את הסלקטורים ב-CSS תלוי בתרחיש הספציפי שלכם.
חוזרים על השלבים במדריך הזה כדי לוודא שהשינויים שביצעתם עזרו לקצר את משך האירוע חישוב מחדש של סגנון בעמודה הזמן שחלף (באלפיות השנייה).