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

Jecelyn Yeen

Nancy Li

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

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

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

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

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

למידע נוסף על יצירת פרופילים של ביצועים של מעבד (CPU) ב-JavaScript, כדאי לעיין במאמר ביצועי הפרופיל ב-Node.js.

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

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

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

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

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

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

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

בעיות מרכזיות ואיך תיקנו אותן

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

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

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

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

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

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

• הטווח Set הוחלף במבני נתונים Array.
• הוסרו מבני נתונים מיותרים Map.
• ארגון מחדש של פונקציות רקורסיביות ואיטרטיביות (ללולאות) כדי לצמצם את השימוש במקבץ הזיכרון.

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

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

בורר ה-VM החסר של JavaScript

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

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

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

• אפשר לשלוח לנו הצעה או משוב דרך crbug.com.
• כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות   > עזרה > דיווח על בעיות בכלי הפיתוח ב'כלי פיתוח'.
• שליחת ציוץ אל @ChromeDevTools.
• נשמח לשמוע מה חדש בסרטונים ב-YouTube של כלי הפיתוח או בסרטונים ב-YouTube שקשורים לכלי פיתוח.