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