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