JavaScript הוא לרוב הגורם לשינויים חזותיים. לפעמים המערכת מבצעת את השינויים האלה ישירות באמצעות מניפולציות על סגנונות, ולפעמים באמצעות חישובים שמובילים לשינויים חזותיים, כמו חיפוש או מיון נתונים. סקריפט JavaScript שמופעל למשך זמן רב או בזמן הלא נכון יכול להיות גורם נפוץ לבעיות בביצועים, ולכן כדאי לצמצם את ההשפעה שלו ככל האפשר.
חישוב סגנון
שינוי DOM על ידי הוספה והסרה של רכיבים, שינוי מאפיינים, סיווגים או הפעלת אנימציות גורם לדפדפן לחשב מחדש את סגנונות הרכיבים, ובמקרים רבים גם את הפריסה של חלק מהדף או של כולו. התהליך הזה נקרא חישוב סגנון.
הדפדפן מתחיל לחשב את הסגנונות על ידי יצירת קבוצה של בוחרים תואמים כדי לקבוע אילו מחלקות, בוחרים מדומים ומזהים חלים על כל רכיב נתון. לאחר מכן, המערכת מעבדת את כללי הסגנון מהבוררים התואמים ומחליטה אילו סגנונות סופיים יהיו לרכיב.
התפקיד של חישוב מחדש של סגנון בזמן האחזור של אינטראקציה
מהירות התגובה לאינטראקציה באתר (INP) הוא מדד ביצועים בסביבת זמן ריצה שמתמקדים במשתמש, ומעריך את רמת הרספונסיביות הכוללת של דף לקלט של משתמש. המדד הזה מודד את זמן האחזור של האינטראקציה מהרגע שבו המשתמש מבצע אינטראקציה עם הדף ועד שהדפדפן מציג את המסגרת הבאה עם העדכונים החזותיים התואמים בממשק המשתמש.
רכיב משמעותי באינטראקציה הוא הזמן שחולף עד להצגת התמונה הבאה. עיבוד הנתונים (רינדור) שנעשה כדי להציג את המסגרת הבאה מורכב מחלקים רבים, כולל חישוב סגנונות הדף שמתבצע ממש לפני עבודות הפריסה, הצביעה והקומפוזיציה. המדריך הזה מתמקד בעלויות החישוב של סגנונות, אבל צמצום של כל חלק ממשך העיבוד הכולל של האינטראקציה מפחית גם את זמן האחזור הכולל שלה.
צמצום המורכבות של הבוררים
פשטות הסלקטורים ב-CSS יכולה לעזור לכם להאיץ את חישובי הסגנונות בדף. הסלקטורים הפשוטים ביותר מפנים לאלמנט ב-CSS באמצעות שם הכיתה בלבד:
.title {
/* styles */
}
עם זאת, ככל שהפרויקט יתפתח, סביר להניח שיהיה צורך ב-CSS מורכב יותר, ויכול להיות שתגיעו לבורר שנראה כך:
.box:nth-last-child(-n+1) .title {
/* styles */
}
כדי לקבוע איך הסגנונות האלה חלים על הדף, הדפדפן צריך לשאול, למעשה, "האם זהו רכיב עם סיווג title עם הורה עם סיווג box שהוא הצאצא ה-nth-minus-plus-1 של רכיב ההורה שלו? יכול להיות שיחלוף זמן מה עד שהדפדפן יזהה את הבעיה. כדי לפשט את התהליך, אפשר לשנות את הבורר לשם כיתה ספציפי יותר:
.final-box-title {
/* styles */
}
שמות הכיתות החלופיים עשויים להיראות מוזרים, אבל הם מקלים על העבודה של הדפדפן. בגרסה הקודמת, לדוגמה, כדי שהדפדפן יוכל לדעת אם רכיב הוא האחרון מסוגו, הוא צריך קודם לדעת את כל הפרטים על כל שאר הרכיבים כדי לקבוע אם יש רכיבים שמגיעים אחריו שיכולים להיות nth-last-child. הפעולה הזו עשויה להיות יקרה הרבה יותר מבחינה חישובית בהשוואה להתאמה של בורר לאלמנט על סמך שם הכיתה שלו בלבד.
צמצום מספר הרכיבים שמוגדרת להם עיצוב
שיקול נוסף לגבי הביצועים – ולעיתים קרובות חשוב יותר מהמורכבות של הבורר – הוא כמות העבודה שצריך לבצע כשרכיב משתנה.
באופן כללי, העלות במקרה הגרוע ביותר של חישוב סגנון הרכיבים המחושב היא מספר הרכיבים כפול מספר הבוררים, כי הדפדפן צריך לבדוק כל רכיב לפחות פעם אחת בכל סגנון כדי לראות אם הוא תואם.
חישובי סגנונות יכולים לטרגט כמה רכיבים ישירות במקום לבטל את התוקף של הדף כולו. בדפדפנים מודרניים, הבעיה הזו פחות משמעותית כי הדפדפן לא תמיד צריך לבדוק את כל הרכיבים שעשויים להיות מושפעים משינוי. לעומת זאת, בדפדפנים ישנים יותר, לא תמיד מתבצעת אופטימיזציה למשימות כאלה. במידת האפשר, כדאי להפחית את מספר הרכיבים שבוטלו.
מדידת העלות של חישוב מחדש של סגנון
יש כמה דרכים למדוד את העלות של חישוב מחדש של סגנונות בדפדפן. כל אחת מהן תלויה בכך שאתם רוצים למדוד אותה בדפדפן בסביבת הפיתוח, או שאתם רוצים למדוד את משך הזמן של התהליך הזה אצל משתמשים אמיתיים באתר.
מדידת העלות של חישוב מחדש של סגנונות בכלי הפיתוח ל-Chrome
אחת הדרכים למדוד את העלות של חישובים מחדש של סגנונות היא להשתמש בחלונית הביצועים בכלי הפיתוח ל-Chrome. כדי להתחיל, מבצעים את הפעולות הבאות:
- פותחים את כלי הפיתוח.
- עוברים לכרטיסייה ביצועים.
- מסמנים את התיבה Selector stats (נתונים סטטיסטיים של הבורר) (אופציונלי).
- לוחצים על הקלטה.
- מבצעים פעולות בדף.
כשמפסיקים את ההקלטה, מופיעה תמונה דומה לזו:
הפסים בחלק העליון הם תרשים אש בגודל מיניאטורי שמוצגים בו גם פריימים לשנייה. ככל שהפעילות קרובה יותר לתחתית הפסים, כך הדפדפן מצייר את הפריימים מהר יותר. אם תרשים הלהבה מתיישר בחלק העליון עם פסים אדומים מעליו, סימן שיש לכם עבודה שגורמת לפריימים ארוכים.
כדאי לבדוק לעומק את הפריימים הארוכים שמופיעים במהלך אינטראקציה, כמו גלילה. אם מופיע בלוק גדול בצבע סגול, אפשר להגדיל את התצוגה של הפעילות ולבחור עבודה שמסומנת בתווית חישוב מחדש של סגנון כדי לקבל מידע נוסף על עבודות חישוב מחדש של סגנונות שעשויות להיות יקרות.
לחיצה על האירוע תציג את סטאק הקריאות שלו. אם פעולת העיבוד נגרמה כתוצאה מאינטראקציה של משתמש, הקוד קורא ל-JavaScript שהפעיל את שינוי הסגנון. בנוסף, מוצגים מספר הרכיבים שמושפעים מהשינוי – במקרה הזה, יותר מ-900 רכיבים – ומשך הזמן של חישוב הסגנון. תוכלו להשתמש במידע הזה כדי להתחיל לנסות למצוא תיקון בקוד.
אם סימנתם את התיבה Selector stats בהגדרות של Performance Panel לפני ביצוע המעקב, בחלונית התחתונה של המעקב תופיע כרטיסייה נוספת עם אותו שם.
בחלונית הזו מוצגים נתונים שימושיים לגבי העלות היחסית של כל סלקטור, ומאפשרים לזהות סלקטורים ב-CSS יקרים.
מידע נוסף זמין במסמכי העזרה בנושא נתונים סטטיסטיים של סלקטורים ב-CSS.
מדידת העלות של חישוב מחדש של סגנונות למשתמשים אמיתיים
אם אתם רוצים לדעת כמה זמן חולף עד שנעשה חישוב מחדש של הסגנון אצל משתמשים אמיתיים באתר, Long Animation Frames API מספק את הכלים הדרושים לכך. נתונים מה-API הזה נוספו לספריית web-vitals JavaScript, כולל זמן החישוב מחדש של הסגנון.
אם אתם חושדים שהעיכוב בהצגת האינטראקציה הוא הגורם העיקרי לזמן הטעינה של דף, כדאי לבדוק כמה זמן ממנו מוקדש לחישוב מחדש של סגנונות בדף. למידע נוסף, קראו את המאמר איך מודדים את זמן החישוב מחדש של הסגנון בשדה.