החלונית JavaScript Profiler יוצאת משימוש ב-Chrome 124. מעכשיו והלאה, צריך להשתמש בחלונית ביצועים כדי להציג פרופיל של ביצועי המעבד (CPU) ב-Node.js.
למה אנחנו מוציאים משימוש את הכלי לניתוח ביצועים של JavaScript? (JS Profiler)
כבר ב-Chrome 58, צוות כלי הפיתוח תכנן להוציא משימוש את JS Profiler. יכולות להיות לכך כמה סיבות:
- אנחנו כבר לא מפתחים אותו באופן פעיל. ה-JS Profiler לא קיבל עדכונים משמעותיים כבר כמה שנים, ולצוות אין את המשאבים להמשיך בפיתוח שלו.
- חוויה יעילה יותר של יצירת פרופילים. החלונית ביצועים כבר משמשת לכל סוגי ניתוח הביצועים, ובעזרתה אפשר ליצור פרופיל של ביצועי המעבד (CPU) של JavaScript ב-Node.js, כדאי לאחד הכול במקום אחד כדי לשמור על עקביות ויעילות.
- חלונית הביצועים טובה יותר. אנחנו ממשיכים לשפר אותו על ידי הוספת תכונות חדשות ושיפורים, והופכים אותו לכלי יעיל וידידותי יותר לניתוח ביצועים.
מה צריך לעשות אחרי ההוצאה משימוש?
מידע נוסף על יצירת פרופיל ביצועים של מעבד (CPU) ב-JavaScript זמין במאמר ביצועי הפרופיל ב-Node.js.
ריכזנו כאן כמה טיפים לשימוש בחלונית ביצועים:
- השתמשו בתרשים הלהבות כדי לזהות צווארי בקבוק בביצועים.
- משתמשים בכרטיסיות למטה למעלה ועץ השיחות כדי להבין את הקשרים בין הפונקציות.
איך אנחנו מטפלים בהוצאה משימוש?
פיתחנו אב טיפוס ופרסמנו את Request for תגובות (RFC) באופן ציבורי ב-GitHub כדי לבקש משוב ממפתחים.
בנוסף, אנחנו פונים למומחים למפתחים כדי לבדוק את אב-הטיפוס, ומטפלים בכל בעיה או חשש כדי לוודא שהחלונית ביצועים עונה על הצרכים העיקריים של תהליך יצירת הפרופיל.
אנחנו מוציאים משימוש בהדרגה את הכלי JS Profiler ב-4 שלבים כדי לתת למפתחים מספיק זמן להסתגל לשינויים וליישם אותם.
בעיות עיקריות והאופן שבו פתרנו אותן
מבין המשוב שקיבלנו, החששות הדחופים ביותר התמקדו בשלושה נושאים עיקריים:
- תמיכה בפורמט הקובץ
.cpuprofile. ה-JS Profiler משתמש בפורמט קובץ אחר. החלונית ביצועים אמורה לתמוך בה. - מהירות טעינה איטית. מהירות הטעינה של הלוח נראתה איטית, ולכן היא מפריעה לתהליך יצירת הפרופיל.
- חסר סלקטור ב-VM עם JavaScript. בתרחישים מסוימים, אין אפשרות ליצור פרופילים מוגבלים בבורר מכונת VM של JavaScript.
נבחן את כל הבעיות ונראה איך פתרנו אותן.
מהירות טעינה איטית
מפתחים דיווחו לנו שלחלונית ביצועים נדרש יותר מדי זמן לטעון קובצי נתונים גדולים, ולפעמים היא אפילו קרסה.
השתמשנו בכלי הפיתוח כדי לנתח את כלי הפיתוח (אנחנו קוראים להם "DevTools-on-DevTools"). מצאנו בעיות וביצענו כמה אופטימיזציות:
Setהוחלף בArrayמבני נתונים.- הוסרו מבני נתונים לא נחוצים של
Map. - פונקציות רקורסיביות שעברו ארגון מחדש של פונקציות איטרטיביות (ללולאות) כדי לצמצם את השימוש בסטאק הזיכרון.
בזכות תיקון צווארי הבקבוק האלה, הטעינה של קבצים גדולים הייתה מהירה יותר ב-80%. 🎉
מידע נוסף על מה שלמדנו בפוסט הזה בבלוג: מהירות גבוהה יותר ב-400% לחלונית הביצועים באמצעות תפיסה.
בורר ה-VM החסר ב-JavaScript
באב הטיפוס הראשוני היה חסר בורר ה-VM של JavaScript. המפתחים משתמשים בה כדי להציג פירוט של מכונה וירטואלית ספציפית ולהתמקד בניתוח שלה.
עכשיו הוספנו בורר VM של JavaScript לחלונית Performance (ביצועים). תוצג רשימה נפתחת של כל מכונות ה-VM הזמינות ב-JavaScript. כשבוחרים מכונה, בחלונית ביצועים מתבצעת טעינה של פרופיל המעבד (CPU) של המכונה הספציפית.
תומך בפורמט הקובץ cpuprofile
בעבר, החלונית ביצועים תמכה רק בקובצי מעקב, שהם קובצי JSON עם מגוון של אירועי מעקב.
מצד שני, פרופילי המעבד (CPU) נתמכים ב-JS Profiler, שהם קבצים עם התוסף .cpuprofile שמכילים אובייקט JSON. הם נראים כך:
{
// The list of profile nodes. First item is the root node.
nodes: ProfileNode[];
// Profiling start timestamp in microseconds.
startTime: number;
// Profiling end timestamp in microseconds.
endTime: number;
// Ids of samples at top nodes.
samples?: integer[];
// Time intervals between adjacent samples in microseconds.
// The first delta is relative to the profile startTime.
timeDeltas?: integer[];
}
תהליך העבודה החדש לא אמור למנוע ממפתחים לנתח את ה-cpuprofile הקיים. לכן, בחלונית ביצועים יש עכשיו תמיכה בקובצי מעקב וגם בפרופילים של מעבד (CPU). ניתן לייבא את הקובץ cpuprofile אל הביצועים והוא ייטען כראוי.
מאחורי הקלעים, אנחנו מזהים את ההבדלים בין מבני האובייקטים באמצעות ביטוי רגולרי. אם התוכן של הקובץ מתחיל ב-{"nodes":[, אז זהו פרופיל מעבד (CPU). אחרת, מדובר בקובץ מעקב.
לאחר זיהוי סוג התוכן, אנחנו מעבדים אותו בהתאם. בקובץ מעקב, אנחנו מנתחים את האירועים ויוצרים ציר זמן. בפרופיל של המעבד (CPU), אנחנו מנתחים את אובייקט ה-JSON ויוצרים תרשים להבה.
סיכום
בחלונית ביצועים תוכלו ליהנות מחוויה יעילה יותר של יצירת פרופילים, גם באתרים וגם ביצירת פרופיילינג של ביצועי המעבד (CPU) באפליקציות Node.js ו-Deno.
אם יש לכם משוב או הצעות, תוכלו להוסיף תגובה לבאג הזה או לפנות אלינו באמצעות אחת מהאפשרויות הבאות.
הורדת הערוצים של התצוגה המקדימה
כדאי להשתמש ב-Chrome Canary, Dev או Beta כדפדפן הפיתוח בברירת מחדל. ערוצי התצוגה המקדימה האלה נותנים לך גישה לתכונות החדשות של כלי הפיתוח, בודקים ממשקי API מתקדמים של פלטפורמת האינטרנט ומוצאים בעיות באתר לפני שהמשתמשים יגלו אותן!
יצירת קשר עם צוות כלי הפיתוח ל-Chrome
אפשר להשתמש באפשרויות הבאות כדי לדון בתכונות החדשות ובשינויים בפוסט, או בכל דבר אחר שקשור לכלי הפיתוח.
- שלחו לנו הצעה או משוב דרך crbug.com.
- כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות
> עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח. - אפשר לשלוח ציוץ אל @ChromeDevTools.
- אפשר לכתוב תגובות לגבי 'מה חדש' בסרטוני YouTube בכלי הפיתוח או בסרטונים ב-YouTube בקטע 'טיפים לשימוש בכלי הפיתוח'.