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