מצב צביעה רציף ליצירת פרופילים של צביעה זמין עכשיו ב-Chrome Canary. במאמר הזה נסביר איך מזהים בעיה בזמן עיבוד הדף ואיך משתמשים בכלי החדש הזה כדי לזהות צווארי בקבוק בביצועי העיבוד.
בדיקת זמן הטעינה בדף
שמתם לב שהדף לא גולש בצורה חלקה. כך מתחילים לטפל בבעיה. בדוגמה שלנו נשתמש בדף ההדגמה Things We Left On The Moon של Dan Cederholm.
פותחים את Web Inspector, מתחילים להקליט את ציר הזמן ומגללים את הדף למעלה ולמטה. לאחר מכן, אפשר להסתכל על צירי הזמן האנכיים שמראים מה קרה בכל פריים.
אם רואים שרוב הזמן מוקדש לציור (עמודות ירוקות גדולות מעל 60fps), צריך לבדוק לעומק למה זה קורה. כדי לבדוק את הצבעים, משתמשים בהגדרה Show paint rectangles (הצגת ריבועים של צבעים) בכלי לבדיקת האתר (סמל גלגל השיניים בפינה השמאלית התחתונה של כלי לבדיקת האתר). כך תוכלו לראות אילו אזורים Chrome מצייר.
יש כמה סיבות לכך ש-Chrome מצייר מחדש אזורים בדף:
- צמתים של DOM משתנים ב-JavaScript, וכתוצאה מכך Chrome מחשב מחדש את הפריסה של הדף.
- אנימציות מוצגות ומתעדכנות במחזור שמבוסס על פריימים.
- אינטראקציה של משתמשים, כמו החזקת העכבר מעל רכיב, גורמת לשינויים בסגנון של רכיבים מסוימים.
- כל פעולה אחרת שגורמת לשינוי הפריסה של הדף.
כמפתחים, אתם צריכים להיות מודעים לפעולות הצביעה מחדש שמתרחשות בדף.
דרך מצוינת לעשות זאת היא להסתכל על המלבנים של צבעי האיפור. בצילום המסך לדוגמה שלמעלה אפשר לראות שכל המסך מכוסה בריבוע גדול של צבע. כלומר, כל המסך מצויר מחדש בזמן הגלילה, וזה לא טוב. במקרה הספציפי הזה, הסיבה לכך היא סגנון ה-CSS background-attachment:fixed, שגורם לתמונה הרקע של הדף להישאר באותו מיקום בזמן שהתוכן של הדף נע מעליו בזמן הגלילה.
אם אתם מזהים שהצביעה מחדש מכסה שטח גדול ו/או נמשכת זמן רב, יש לכם שתי אפשרויות:
- אפשר לנסות לשנות את פריסת הדף כדי לצמצם את כמות הצביעה. אם אפשר, Chrome מצייר את הדף הגלוי רק פעם אחת ומוסיף חלקים שלא היו גלויים בזמן הגלילה למטה. עם זאת, יש מקרים שבהם Chrome צריך לצבוע מחדש אזורים מסוימים. לדוגמה, כלל ה-CSS
position:fixed, שמשמש לרוב לרכיבי ניווט שנשארים באותו מיקום, יכול לגרום לצביעה מחדש כזו. - אם אתם רוצים לשמור על פריסת הדף, תוכלו לנסות לצמצם את עלות הצביעה של האזורים שצריך לצבוע מחדש. לא לכל סגנון CSS יש את אותה עלות עיבוד, לחלק יש השפעה קטנה ולחלק השפעה גדולה. חישוב עלויות הציור של סגנונות מסוימים יכול להיות עבודה קשה. כדי לעשות זאת, צריך להחליף בין סגנונות בחלונית 'רכיבים' ולראות את ההבדל בהקלטה של ציר הזמן. לשם כך, צריך לעבור בין החלוניות ולבצע הרבה הקלטות. כאן נכנס לתמונה מצב צביעה רציף.
מצב ציור רציף
מצב צביעה רציף הוא כלי שעוזר לכם לזהות אילו רכיבים בדף גורמים לעלויות גבוהות. הפונקציה הזו מעבירה את הדף למצב של צביעה מתמשכת, ומציגה ספירה של כמות הצביעה שמתבצעת. לאחר מכן תוכלו להסתיר רכיבים ולשנות סגנונות, תוך כדי מעקב אחר המונה, כדי להבין מה איטי.
הגדרה
כדי להשתמש במצב ציור רציף, צריך להשתמש ב-Chrome Canary.
במערכות Linux (ובחלק ממחשבי Mac) צריך לוודא ש-Chrome פועל במצב עיבוד (compositing). אפשר להפעיל את התכונה הזו באופן קבוע באמצעות ההגדרה GPU compositing on all pages (הרכבת GPU בכל הדפים) בקובץ about:flags.
איך מתחילים
אפשר להפעיל את מצב צביעה רציף באמצעות תיבת הסימון הפעלת צביעה רציף של הדף בהגדרות של Web Inspector (סמל גלגל השיניים בפינה השמאלית התחתונה של Web Inspector).
במסך הקטן בפינה השמאלית העליונה מוצגים זמני הצביעה שנמדדו במילישניות. באופן ספציפי יותר, מוצגים בה:
- זמן הצביעה האחרון שנמדד מופיע בצד ימין.
- הערכים המינימלי והמקסימלי של התרשים הנוכחי מופיעים בצד שמאל.
- תרשים עמודות שבו מוצגת ההיסטוריה של 80 הפריימים האחרונים בחלק התחתון (הקו בתרשים מציין 16 אלפיות השנייה כנקודת ייחוס).
מדידות זמן הצביעה תלויות ברזולוציית המסך, בגודל החלון ובחומרה שבה פועל Chrome. חשוב לזכור שהדברים האלה עשויים להיות שונים אצל המשתמשים שלכם.
תהליך עבודה
כך משתמשים במצב צביעה רציף כדי לאתר רכיבים וסגנונות שמוסיפים הרבה עלות לצביעת התמונה:
- פותחים את ההגדרות של Web Inspector ומסמנים את האפשרות Enable continuous page repainting.
- עוברים לחלונית 'רכיבים' ומעיינים בעץ ה-DOM באמצעות מקשי החיצים או על ידי בחירה ברכיבים בדף.
- אפשר להשתמש במקשי הקיצור H, כלי עזר חדש, כדי להחליף את הסטטוס של החשיפה של רכיב.
- בודקים את תרשים זמן הצביעה ומנסים לזהות רכיב שמוסיף הרבה זמן צביעה.
- בודקים את סגנונות ה-CSS של הרכיב הזה, מפעילים אותם או משביתים אותם תוך כדי התבוננות בתרשים, כדי למצוא את הסגנון שגורם להאטה.
- משנים את הסגנון הזה ומבצעים הקלטה נוספת של ציר הזמן כדי לבדוק אם הביצועים של הדף השתפרו.
באנימציה הבאה מוצגת החלפת סגנונות וההשפעה שלה על זמן הצביעה:
הדוגמה הזו ממחישה איך השבתה של אחד מסגנונות ה-CSS, box-shadow או border-radius, מפחיתה באופן משמעותי את זמן הציור. שימוש גם ב-box-shadow וגם ב-border-radius ברכיב מסוים מוביל לפעולות צביעה יקרות מאוד, כי ל-Chrome אין אפשרות לבצע אופטימיזציה לכך. לכן, אם יש לכם רכיב שמתבצעות לו הרבה פעולות צביעה מחדש, כמו בדוגמה, כדאי להימנע מהשילוב הזה.
הערות
מצב צביעה רציף צובע מחדש את כל הדף הגלוי. בדרך כלל זה לא המצב כשגולשים בדף אינטרנט. בדרך כלל, גלילה מציירת רק את החלקים שלא היו גלויים קודם. בשינויים אחרים בדף, רק האזור הקטן ביותר האפשרי מצויר מחדש. לכן, כדאי לבדוק באמצעות הקלטה אחרת של ציר הזמן אם השיפורים בסגנון אכן השפיעו על זמני הצביעה של הדף.
כשמשתמשים ב-continuous painting mode, יכול להיות שתגלו למשל שהסגנונות border-radius ו-box-shadow ב-CSS מוסיפים הרבה זמן צביעה. מומלץ להשתמש בתכונות האלה באופן כללי, הן נהדרות ואנחנו שמחים שהן סוף סוף זמינות. אבל חשוב לדעת מתי ואיפה להשתמש בהם.
מומלץ להימנע משימוש בהן באזורים שבהם יש הרבה צביעה מחדש, ובכלל להימנע משימוש מוגזם בהן.
הדגמה בשידור חי
בהדגמה שבהמשך, Paul Irish משתמש בצביעה רציפה כדי לזהות פעולת צביעה יקרה במיוחד.