חלונית לניטור ביצועים

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

סקירה כללית

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

מעקב הביצועים עוקב אחר המדדים הבאים:

• שימוש ביחידות עיבוד מרכזיות (CPU).
• גודל הערימה של JavaScript.
• המספר הכולל של צומתי DOM, פונקציות event listener של JavaScript, מסמכים ומסגרות בדף.
• פריסות וחישובים מחדש של סגנונות בשנייה.

פתיחת החלונית 'מעקב אחר ביצועים'

כדי לפתוח את החלונית מעקב אחר ביצועים:

1. פותחים את כלי הפיתוח.
2. פותחים את תפריט הפקודות על ידי הקשה על:
   • macOS: Command+Shift+P
   • Windows, Linux, ChromeOS: Control+Shift+P
3. מתחילים להקליד Performance monitor, בוחרים באפשרות הצגת מעקב ביצועים ומקישים על Enter. בכלי הפיתוח מוצגת החלונית מעקב אחר ביצועים בתחתית החלון של כלי הפיתוח.

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

שימוש בחלונית 'מעקב הביצועים'

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

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

אחת התכונות השימושיות במעקב הביצועים היא שהן נשארות לאורך כל הניווט בדף. לכן, כמפתחי ממשק קצה, תוכלו להימנע מבעיות כמו הגבלת פריסה על ידי פתיחת מעקב הביצועים, גלילה באתר שלהם והשגחה על המדדים DOM Nodes ו-Layout/sec.

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

לדוגמה, עלייה חדה בשימוש במעבד (CPU) יכולה להצביע על קוד לא יעיל. באופן כללי, אם בדף יש מספר גבוה של פונקציות event listener של JS, כדאי לארגן מחדש את הקוד ולהפחית את המספרים כדי לפנות זיכרון.

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