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

Sofia Emelianova

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

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

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

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

• רכיבים נוספים ל-DOM או מוסרים ממנו.
• המערכת מבצעת שינויים במאפיינים של רכיב, למשל הערך של מאפיין class או מזהה.
• המשתמש מבצע קלט, כמו הזזת העכבר או שינוי המיקוד של הרכיב, שיכול להשפיע על כללים של :hover.

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

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

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

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

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

כדי לתעד דוח ביצועים עם הנתונים הסטטיסטיים של הבורר:

1. פותחים דף אינטרנט, למשל דף ההדגמה של גלריית התמונות.

2. פותחים את כלי הפיתוח ועוברים לחלונית Performance (ביצועים).

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

   

4. לחץ על radio_button_checked הקלטה, מריצים את התרחיש שרוצים לשפר ולוחצים על radio_button_checked Stop.

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

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

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

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

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

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

טבלה של סלקטורים ב-CSS בכרטיסייה 'נתונים סטטיסטיים של הסלקטור'

הכרטיסייה נתונים סטטיסטיים של סלקטור מכילה טבלה של סלקטורים ב-CSS. בטבלה מוצגים הפרטים הבאים לגבי כל סלקטור ב-CSS:

עמודה	תיאור
זמן שחלף (אלפיות שנייה)	משך הזמן שהדפדפן הקדיש להתאמת הסלקטור ב-CSS הזה. זמן זה מצוין באלפיות שנייה (ms), כאשר 1 אלפיות שנייה היא 1/1,000 שנייה.
ניסיונות התאמה	מספר הרכיבים שמנוע הדפדפן ניסה להתאים לסלקטור ב-CSS הזה.
ספירת התאמות	מספר הרכיבים שמנוע הדפדפן התאים לסלקטור ב-CSS הזה.
% של אי-התאמות בנתיב איטי	היחס בין הרכיבים שלא תאמו לסלקטור ב-CSS הזה לבין הרכיבים שמנוע הדפדפן ניסה להתאים אליהם, ולצורך כך מנוע הדפדפן היה צריך להשתמש בקוד עם פחות אופטימיזציה כדי להתאים אותו.
בורר	הסלקטור ב-CSS שהותאם.
גיליון סגנונות CSS	גיליון הסגנונות של ה-CSS שמכיל את בורר ה-CSS.

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

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

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

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

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

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

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

   

5. מדביקים את הטבלה בגיליון אלקטרוני, כמו Google Sheets.

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

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

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

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

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

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

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

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

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

ניתוח נתונים סטטיסטיים של סלקטור ב-CSS

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

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

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

לדוגמה, בצילום המסך הקודם:

• נדרש הכי הרבה זמן בבורר ה-CSS הראשון (html body .ps[tooltip...).
• מנוע הדפדפן ניסה להתאים את סלקטור ה-CSS הזה 1,104 פעמים, אבל לא התאים לשום רכיב.

לכן, הסלקטור ב-CSS הזה הוא הראשון שצריך לנסות לשפר.

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

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

הערה: חלקים מהדף הזה הם שינויים שמבוססים על יצירה ושותפה על ידי Microsoft, שנעשה בהם שימוש בהתאם לתנאים שמתוארים ברישיון הבינלאומי של Creative Commons Attribution 4.0. הדף המקורי נכתב על ידי צוות Microsoft Edge, כולל מייקל הופמן, פטריק ברוסט, ג'ו מרטין וזוהר גאדיאלי.