חלונית ציר הזמן של כלי הפיתוח תמיד הייתה התחנה הראשונה בתהליך האופטימיזציה של הביצועים. הסקירה הכללית והמרוכזת הזו של פעילות האפליקציה עוזרת לכם לנתח את הזמן שמושקע בטעינה, בכתיבת סקריפטים, ברינדור ובציור. לאחרונה, שדרגנו את ציר הזמן עם אינסטרומנטציה נוספת כדי שתהיה לך אפשרות לראות תצוגה מפורטת יותר של ביצועי האפליקציה שלך.
הוספנו את התכונות הבאות:
- JavaScript Profiler משולב. (תרשים להבה כלול!)
- מציג תמונות כדי לעזור לכם להציג שכבות מורכבות.
- כלי לניתוח ביצועי האתר כדי להציג פירוט מעמיק של פעילות ציור של הדפדפן.
שימו לב שהשימוש באפשרויות הצילום של צבע שמתואר במאמר הזה כן כרוך בתקורה מסוימת, ולכן אתם יכולים להשתמש בהן רק אם רוצים.
הכלי לניתוח ביצועי JavaScript משולב
אם אי פעם עיינתם בחלונית פרופילים, אתם בטח מכירים את כלי לניתוח ביצועי המעבד (CPU) של JavaScript. הכלי הזה מודד את זמן הביצוע של פונקציות JavaScript. הצגת פרופילים של JavaScript באמצעות 'תרשים האש' מאפשרת לכם להציג באופן חזותי את עיבוד ה-JavaScript לאורך זמן.
עכשיו אפשר לראות את הפירוט המפורט הזה של הפעלת JavaScript בחלונית ציר הזמן. אם בוחרים באפשרות הצילום של JS Profiler, אפשר לראות את מקבץ הקריאות של JavaScript בציר הזמן לצד אירועים אחרים בדפדפן. הוספת התכונה הזו לציר הזמן תעזור לכם לייעל את תהליך ניפוי הבאגים. אבל יותר מזה, הוא מאפשר לכם להציג את ה-JavaScript בהקשר המתאים ולזהות את חלקי הקוד שמשפיעים על זמן הטעינה והעיבוד של הדף.
בנוסף לכלי ליצירת פרופיל ב-JavaScript, שילבנו גם תצוגת Flame Chart בחלונית ציר הזמן. עכשיו אפשר להציג את הפעילות באפליקציה כ-Waterfall הקלאסי של אירועים או כתרשים להבות. בעזרת הסמל של Flame Chart אפשר לעבור בין שתי התצוגות.
מציג הפריימים
האומנות של הרכבה של שכבות היא היבט נוסף בדפדפן שמוסתר בעיקר ממפתחים. אם משתמשים בשכבות באופן מושכל ובזהירות, השכבות יכולות למנוע צביעה מחדש שעלותה גבוהה ומשפרת משמעותית את הביצועים. אבל לעיתים קרובות לא ברור לחזות איך הדפדפן ירכיב את התוכן. באמצעות האפשרות החדשה לצילום צבע בציר הזמן, אפשר להציג שכבות מורכבות בכל פריים בהקלטה.
כשבוחרים סרגל מסגרת אפור מעל לשרשור הראשי, החלונית שכבות מספקת מודל חזותי של השכבות שמרכיבים את האפליקציה.
ניתן לשנות את מרחק התצוגה, לסובב ולגרור את מודל השכבות כדי לגלות את התוכן שלו. העברת העכבר מעל שכבה חושפת את המיקום הנוכחי שלה בדף. לחיצה ימנית על שכבה מאפשרת לעבור לצומת המתאים בחלונית רכיבים. התכונות האלה מציגות את התוכן שקודם לשכבה. אם בוחרים שכבה, אפשר גם לראות את הסיבה לקידום שלה בשורה Compositing Reasons.
הכלי לניתוח צבעים
לבסוף, הוספנו את הכלי לניתוח צבעים כדי לעזור לכם לזהות בעיות זמניות שנגרמות על ידי צבעים יקרים. התכונה הזו מעשירה את ציר הזמן עם פרטים נוספים על העבודה ש-Chrome עושה במהלך אירועי ציור.
בתור התחלה, עכשיו קל יותר לזהות את התוכן החזותי שמתאים לכל אירוע של צבע. כשבוחרים אירוע בצבע ירוק בציר הזמן, בחלונית פרטים מוצגת תצוגה מקדימה של הפיקסלים שנצבעו בפועל.
אם אתם רוצים לצלול לעומק, עברו לחלונית Paint Profiler. הכלי לניתוח ביצועים מציג את פקודות הציור המדויקות שהדפדפן הפעיל בכלי הציור שנבחר. כדי לעזור לכם לחבר את הפקודות המותאמות האלה לתוכן שבאפליקציה שלכם, ניתן ללחוץ לחיצה ימנית על קריאת שרטוט* ולעבור ישירות לצומת המתאים בחלונית Elements.
קו הזמן המינימלי לאורך החלק העליון של החלונית מאפשר להפעיל שוב את תהליך ציור ולהבין אילו פעולות הדפדפן יקרות. פעולות השרטוט מקודדות לפי צבעים באופן הבא: ורוד (צורות), כחול (מפת סיביות), ירוק (טקסט) וסגול (שונות). גובה העמודה מציין את משך השיחה, לכן בדיקה של פסים גבוהים יכולה לעזור לכם להבין מה היה יקר לגבי צבע מסוים.
פרופיל ורווח!
כשמדובר באופטימיזציה של ביצועים, הידע לגבי הדפדפן יכול להיות רב-עוצמה. העדכונים האלה בציר הזמן עוזרים לכם להבין לעומק את הקשר בין הקוד שלכם לתהליכי הרינדור של Chrome. כדאי לנסות את האפשרויות החדשות שמופיעות בציר הזמן ולראות מה כלי הפיתוח ל-Chrome יכול לעשות כדי לשפר את תהליך העבודה של חיפוש הג'נקים.