להתראות JS Profiler, לפרופיל המעבד (CPU) עם חלונית הביצועים

Jecelyn Yeen
Nancy Li
Nancy Li
LinkedIn

החל מגרסה 124 של Chrome, הלוח JavaScript Profiler יוצא משימוש. מעכשיו והלאה, תוכלו להשתמש בחלונית ביצועים כדי ליצור פרופיל של ביצועי המעבד (CPU) ב-Node.js.

למה אנחנו מוציאים משימוש את ה-JavaScript Profiler? (כלי פרופיל JS)

כבר בגרסה 58 של Chrome, צוות כלי הפיתוח תכנן להוציא משימוש את JS Profiler. יש לכך כמה סיבות:

  • השירות כבר לא בפיתוח. לא היו עדכונים משמעותיים ל-JS Profiler במשך כמה שנים, ולצוות אין את המשאבים להמשיך לפתח אותו.
  • חוויית יצירת פרופילים יעילה יותר. כבר משתמשים בחלונית ביצועים לכל סוגי ניתוח הביצועים, והיכולת שלה ליצור פרופילים של ביצועי המעבד (CPU) ב-JavaScript ב-Node.js מאפשרת לאחד את כל הנתונים במקום אחד כדי לשמור על עקביות ויעילות.
  • חלונית הביצועים משופרת. אנחנו ממשיכים לשפר אותו על ידי הוספת תכונות ושיפורים חדשים, כדי שיהיה כלי חזק וידידותי יותר לניתוח ביצועים.

מה צריך לעשות אחרי ההוצאה משימוש?

מידע נוסף על יצירת פרופיל של ביצועי מעבד ב-JavaScript זמין במאמר יצירת פרופיל של ביצועי Node.js.

ריכזנו כאן כמה טיפים לשימוש בחלונית ביצועים:

  • אפשר להשתמש בתרשים הלהבה כדי לזהות צווארי בקבוק בביצועים.

תרשים הלהבות.

  • משתמשים בכרטיסיות למטה כלפי מעלה ועץ הקריאות כדי להבין את הקשרים בין הפונקציות.

הכרטיסייה 'למטה'.

כרטיסיית עץ השיחות.

איך אנחנו מטפלים בהוצאה משימוש?

פיתחנו אב טיפוס ופרסמנו את האפשרות Request for comments (RFC) (בקשה לתגובות (RFC)) באופן ציבורי ב-GitHub כדי לבקש משוב ממפתחים.

בנוסף, אנחנו פונים באופן פעיל למומחים למפתחים כדי לבדוק את האב טיפוס, ופועלים כדי לטפל בבעיות או בחששות כדי לוודא שהחלונית ביצועים עומדת בצרכים המרכזיים של יצירת פרופילים.

אנחנו מפסיק בהדרגה את השימוש ב-JS Profiler ב4 שלבים כדי לתת למפתחים מספיק זמן להסתגל ולהשתמש בכלי.

בעיות מרכזיות ודרכים לפתרון שלהן

מתוך המשוב שקיבלנו, החששות הדחופים ביותר התמקדו בשלוש בעיות עיקריות:

  • פורמט הקובץ .cpuprofile נתמך. ב-JS Profiler נעשה שימוש בפורמט קובץ אחר. החלונית ביצועים אמורה לתמוך בכך.
  • מהירות טעינה איטית נראה שמהירות הטעינה של הלוח הייתה איטית והפריעה לתהליך הפרופיילינג.
  • חסר סלקטור של מכונה וירטואלית של JavaScript. היעדר בורר למכונות וירטואליות של JavaScript הגביל את יכולות היצירה של פרופילים בתרחישים מסוימים.

נבחן כל אחת מהבעיות האלה ונראה איך פתרנו אותן.

מהירות טעינה איטית

מפתחים דיווחו לנו שלקח יותר מדי זמן לטעון קובצי נתונים גדולים בחלונית ביצועים, ולפעמים היא אפילו קרסה.

השתמשנו בכלי הפיתוח כדי לנתח את כלי הפיתוח (אנחנו קוראים לזה 'כלי הפיתוח בתוך כלי הפיתוח'). מצאנו בעיות וביצענו כמה פעולות אופטימיזציה:

  • הוחלפו מבני הנתונים של Set ב-Array.
  • הוסרו מבני נתונים Map מיותרים.
  • פונקציות רפרסיביות שעברו ריפרקטור (refactoring) לפונקציות איטרטיביות (לולאות for) כדי לצמצם את השימוש ב-stack של הזיכרון.

בעקבות תיקון נקודות החולשה האלה, הטעינה של קבצים גדולים מהירה יותר ב-80%. 🎉

מידע נוסף על מה שלמדנו בפוסט בבלוג: חלונית ביצועים מהירה יותר ב-400% דרך תפיסת עולם.

הסלקטורים החסרים של מכונות ה-VM של JavaScript

באב טיפוס הראשוני חסר הבורר של מכונות הווירטואליות של JavaScript. מפתחים משתמשים בו כדי להתמקד בניתוח של מכונה וירטואלית ספציפית.

עכשיו הוספנו בורר VM של JavaScript לחלונית ביצועים. מוצגת רשימה נפתחת של כל המכונות הווירטואליות הזמינות של JavaScript. כשבוחרים מכונה, פרופיל המעבד (CPU) של המכונה הספציפית הזו נטען בחלונית ביצועים.

הכרטיסייה 'עץ הקריאות'.

תמיכה בפורמט הקובץ cpuprofile

בעבר, בחלונית ביצועים הייתה תמיכה רק בקובצי מעקב, שהם קובצי JSON עם מגוון אירועי מעקב.

לעומת זאת, JS Profiler תומך בפרופילים של מעבד (CPU), שהם קבצים עם התוסף .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 כדפדפן הפיתוח שמוגדר כברירת מחדל. ערוצי התצוגה המקדימה האלה מעניקים לכם גישה לתכונות העדכניות ביותר של DevTools, מאפשרים לכם לבדוק ממשקי API מתקדמים לפלטפורמות אינטרנט ולמצוא בעיות באתר לפני שהמשתמשים שלכם יעשו זאת.

יצירת קשר עם צוות כלי הפיתוח ל-Chrome

אתם יכולים להשתמש באפשרויות הבאות כדי לדון בתכונות החדשות, בעדכונים או בכל דבר אחר שקשור ל-DevTools.