אפשר להשתמש במעקב הביצועים כדי לקבל במהירות מושג לגבי הטעינה של האתר וביצועי סביבת זמן הריצה.
סקירה
בחלונית מעקב אחר ביצועים מוצג ציר זמן עם תרשימים של מדדי הביצועים בזמן אמת. לוחצים על מדד כדי להציג או להסתיר אותו. לאחר מכן אפשר לראות איך התרשים משתנה במהלך האינטראקציה עם האפליקציה.
כלי המעקב אחר הביצועים עוקב אחר המדדים הבאים:
- שימוש ביחידות עיבוד מרכזיות (CPU).
- גודל ערימה (heap) של JavaScript.
- המספר הכולל של צומתי DOM, מאזינים לאירועים ב-JavaScript, מסמכים ומסגרות בדף.
- פריסות וחישובים מחדש של סגנונות לשנייה.
פתיחת החלונית 'מעקב אחר ביצועים'
כדי לפתוח את החלונית של מעקב הביצועים:
- פותחים את כלי הפיתוח.
- פותחים את תפריט הפקודות על ידי לחיצה על:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- מתחילים להקליד
Performance monitor, בוחרים באפשרות הצגת מעקב הביצועים ומקישים על Enter. בכלי הפיתוח מוצגת החלונית מעקב אחר הביצועים בתחתית החלון של כלי הפיתוח.
לחלופין, בפינה השמאלית העליונה, בוחרים באפשרות more_vert אפשרויות נוספות > כלים נוספים > מעקב אחר ביצועים.
שימוש בחלונית 'מעקב אחר ביצועים'
מעקב הביצועים מספק תמונה כללית של ביצועי האתר בזמן הריצה.
אם תבדקו איך ערכי המדדים משתנים במהלך האינטראקציה עם האתר, תוכלו לגלות הזדמנויות לשיפור.
תכונה שימושית במעקב הביצועים היא שהוא ממשיך לאורך זמן הניווט בדפים. לכן, בתור מפתחי קצה קדמי, תוכלו להימנע מבעיות כמו עומס פריסות על ידי פתיחת צג הביצועים, גלילה באתר שלהם ומעקב אחרי המדדים DOM Nodes ו-Layout/sec.
אם משתמשים מדווחים על זמני טעינה איטיים באתר, מעקב הביצועים יכול לעזור לכם לזהות אזורים בעייתיים.
לדוגמה, עלייה חדה בשימוש במעבד (CPU) עשויה להצביע על קוד לא יעיל. באופן כללי, אם דף מכיל מספר גדול של רכיבי האזנה לאירועים של JS, יכול להיות שכדאי לארגן מחדש את הקוד ולהפחית את המספרים האלה כדי לפנות זיכרון.
אם רק התחלתם לנתח את הביצועים, מומלץ להשתמש קודם בחלונית Lighthouse, ולאחר מכן לחקור לעומק באמצעות החלונית ביצועים או מעקב הביצועים.