כיצד לכתוב CSS טוב יותר עם ביצועים בראש

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

הנה זרימת הגלם של פעולות שבוצעו על ידי הדפדפן לאחר יצירת עץ DOM:

1. חישוב מחדש של סגנון (ועריכת עץ). הדפדפן מחשב את הסגנונות שיש להחיל על האלמנטים בעץ DOM. עץ הדקלים נוצר מאוחר יותר תוך כדי ביטול הצמתים (אלמנטים) מעץ DOM שלא יוצגו (אלמנטים עם אל תציג דבר) ואלה (אלמנטים פסאודו).
2. פריסה (aka Reflow). באמצעות הסגנון המחושב מלפני, הדפדפן מחשב את המיקום והגיאומטריה של כל רכיב בדף.
3. לצבוע מחדש. לאחר הפריסה ממופה, פיקסלים נמשכים אל המסך.
4. שכבות מרוכבות. במהלך הצביעה מחדש, הציור יכול להיעשות בשכבות שונות באופן עצמאי; שכבות אלה משולבים לבסוף יחד.

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

1. הפחת חישובי סגנון

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

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

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

2. צמצום הזרמות

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

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

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

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

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

לסכם:

• מקד אלמנטים נמוכים בעץ DOM בעת ביצוע שינויים בפריסה
• בחר אלמנטים הממוקמים באופן מוחלט לפריסה שמשנה את הנפשות
• הימנע מהנפשה של תכונות פריסה בכל הזדמנות אפשרית

3. צמצום repaints

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

כדי להימנע repaints תכופים ענק, להשתמש פחות של נכסים שגורמים repaints יקר כמו צללים.

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

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

בכוח לקדם אלמנט לשכבה חדשה וללכת להאצת חומרה עבור אנימציה, יש שתי טכניקות invovled:

1. הוסף transform: translate3d (0, 0, 0); אלמנט, tricking הדפדפן להפעיל את האצת חומרה עבור אנימציות ומעברים.
2. תוסיף את ה ישתנה רכוש אלמנט, אשר מודיע את הדפדפן של הנכסים שעלולים להשתנות בעתיד. הערה: שרה Soueidan יש מאמר מעמיק על סופר על זה באתר Dev.Opera.

לסכם:

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

לקחת הערה

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

(2) זה גם מומלץ לא לבצע יותר מדי שינויים תוצאתיים לסגנונות של רכיב ב- JavaScript. במקום להוסיף בכיתה אלמנט (באמצעות JavaScript) המחזיקה את הסגנונות החדשים כדי לבצע שינויים אלה - זה מונע reflows מיותרים.

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