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