משתמשים בחלונית ביצועים כדי לנתח את ביצועי האתר.
סקירה כללית
בחלונית ביצועים אפשר לתעד פרופילים של הביצועים של המעבד (CPU) באפליקציות האינטרנט. ניתוח פרופילים כדי לזהות צווארי בקבוק בביצועים ודרכים לאופטימיזציה של השימוש במשאבים.
בחלונית ביצועים ניתן לבצע את הפעולות הבאות:
- מקליטים פרופיל ביצועים.
- שינוי הגדרות הצילום.
- לנתח דוח ביצועים.
מדריך מקיף לשיפור ביצועי האתר זמין במאמר ניתוח ביצועים של סביבת זמן ריצה.
פתיחה של חלונית הביצועים
כדי לפתוח את החלונית ביצועים, פותחים את כלי הפיתוח ובוחרים באפשרות ביצועים מקבוצת כרטיסיות בחלק העליון.
לחלופין, פועלים לפי השלבים הבאים כדי לפתוח את החלונית ביצועים באמצעות תפריט הפקודה:
- פותחים את כלי הפיתוח.
- לוחצים על תפריט הפקודה על ידי לחיצה על:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- מתחילים להקליד
Performance panel, בוחרים באפשרות הצגת חלונית הביצועים ומקישים על Enter.
איך מקליטים פרופיל ביצועים
כשאתם מוכנים להקליט, בחלונית ביצועים מוצגות האפשרויות הבאות:
- תיעוד ביצועים של סביבת זמן ריצה
- תיעוד ביצועי הטעינה
- צילום מסך תוך כדי הצילום
- אילוץ איסוף אשפה במהלך ההקלטה
- שמירת הקלטה
- טעינת הקלטה
- מחיקת הקלטה
שינוי הגדרות הצילום
הגדרות הצילום מאפשרות לכם לשנות את האופן שבו כלי הפיתוח מתעדים את הקלטות הביצועים, ויכולים לספק לכם מידע נוסף בדוח. לוחצים על הגדרות צילום כדי לגשת לתפריט הגדרות צילום.
בוחרים את האפשרויות הבאות מהתפריט הגדרות צילום:
- השבתת דגימות JavaScript: ההגדרה משביתה את ההקלטה של מחסניות הקריאות של JavaScript שמוצגות במסלול הראשי, שמופעלות במהלך ההקלטה. תקטין את התקורה של הביצועים.
- הפעלת אינסטרומנטציה מתקדמת של צבע (איטי): צילום אינסטרומנטציה מתקדמת של צבע. פוגע באופן משמעותי בביצועים.
- הפעלת נתונים סטטיסטיים של סלקטור ב-CSS (איטי): תיעוד הנתונים הסטטיסטיים של הסלקטור ב-CSS. פוגע באופן משמעותי בביצועים.
- ויסות נתונים (throttle) במעבד (CPU): הדמיה של מהירויות נמוכות יותר של מעבד (CPU).
- ויסות רשת (throttle): הדמיה של מהירויות רשת איטיות יותר.
- בו-זמניות בחומרה: ההגדרה של הערך שמדווח על ידי
navigator.hardwareConcurrency.
ניתוח של דוח ביצועים
מדריך מלא לשימוש בחלונית ביצועים זמין במאמר ניתוח של הקלטת ביצועים.
הנה קיבוץ של נושאים מהמדריך, ומאמרי עזרה שימושיים נוספים:
כדי ללמוד איך לנווט בדוח:
כדי ללמוד איך להתמקד בדברים שחשובים לתהליך העבודה שלכם:
- שינוי הסדר של הטראקים והסתרה שלהם
- הסתרת פונקציות והצאצאים שלהן בתרשים הלהבות
- יצירת נתיבי ניווט ומעבר בין רמות הזום
כדי לקבל מידע על הכרטיסיות 'למטה', 'עץ הקריאות' ו'יומן אירועים':
כדי ללמוד איך לנתח את הדוח:
- צפייה בפעילות הראשית בשרשור
- לקריאת תרשים הלהבות
- הצגת צילום מסך
- הצגת מדדי הזיכרון
- הצגת משך הזמן של חלק מהקלטה
- ניתוח הביצועים של סלקטור ב-CSS במהלך 'חישוב מחדש של אירועי סגנון'
- ביצועי הפרופיל של Node.js בחלונית הביצועים
- ניתוח פריימים לשנייה (FPS)
- הסבר על אירוע בציר הזמן
שיפור הביצועים באמצעות החלוניות האלה
אתם יכולים למצוא חלוניות נוספות שיכולות לעזור לכם לשפר את ביצועי האתר: