הפחתת ההיקף והמורכבות של חישובי הסגנון

Jeremy Wagner

Paul Lewis

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

חישוב הסגנון

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

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

חישוב מחדש של הזמן וזמן האחזור של האינטראקציה

Interaction to Next Paint (INP) – סביבת זמן ריצה ממוקדת-משתמש מדד ביצועים שמעריך את רמת הרספונסיביות הכוללת של דף לקלט של משתמשים. מדד זה מודד את זמן האחזור לאינטראקציה מרגע האינטראקציה של המשתמש עם הדף ועד הדפדפן מצייר את הפריים הבא שמציג את העדכונים החזותיים התואמים בממשק המשתמש.

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

הפחתת המורכבות של הסלקטורים

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

.title {
  /* styles */
}

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

.box:nth-last-child(-n+1) .title {
  /* styles */
}

כדי לקבוע כיצד הסגנונות האלה חלים על הדף, הדפדפן צריך לבצע לשאול "האם זהו רכיב עם מחלקה של title שההורה שלו רכיב מינוס-nth-plus-1 עם מחלקה של box?" כדי להבין זאת, עשוי לחלוף זמן רב, בהתאם לבורר שמשמש וגם הדפדפן המדובר. כדי לפשט את התהליך הזה, אפשר לשנות את הבורר פשוט היה שם הכיתה:

.final-box-title {
  /* styles */
}

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

מצמצמים את מספר האלמנטים של הסגנון

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

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

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

מדידת העלות של חישוב מחדש של הסגנון

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

1. פותחים את כלי הפיתוח.
2. עוברים לכרטיסייה ביצועים.
3. לוחצים על Record (הקלטה).
4. לקיים אינטראקציה עם הדף.

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

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

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

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

שימוש בבלוק, ברכיב, במגביל

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

.list {
  /* Styles */
}

.list__list-item {
  /* Styles */
}

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

.list__list-item--last-child {
  /* Styles */
}

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

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

משאבים

• ביטול תוקף של סגנון בהבהוב
• BEM (חסימה, רכיב, מגביל)

תמונה ראשית (Hero) מ-Unbounce, מאת Markus Spiske.