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

Jeremy Wagner

Paul Lewis

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

חישוב הסגנון

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

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

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

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

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. זה יכול להיות יקר הרבה יותר מבחינה חישובית להתאים בורר לרכיב רק בגלל שהמחלקה שלו תואמת.

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

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

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

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

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

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

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

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

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

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

דוח של כלי פיתוח שמציג חישובי סגנונות.

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

פריימים ממושכים בפעילות של כלי הפיתוח סיכום.

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

חישוב מחדש של סגנון לאורך זמן נמשך יותר מ-25 אלפיות השנייה בסיכום של כלי הפיתוח.

לחיצה על האירוע תציג את מקבץ השיחות שלו. אם עבודת הרינדור נגרמה על ידי באינטראקציה עם המשתמש, הוא קורא את ה-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.