איך משתמשים בכלי לניתוח הקצאה

מגין קירני
מגין קירני

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

איך פועל הכלי

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

הכלי יוצר תמונות מצב של ערימה (heap snapshot) מדי פעם במהלך ההקלטה (בתדירות של כל 50 אלפיות שנייה!) ותמונת מצב סופית אחת בסיום ההקלטה.

כלי לניתוח הקצאה

הפעלת כלי לניתוח הקצאה

כדי להתחיל להשתמש בכלי לניתוח הקצאה:

  1. מוודאים שאתם משתמשים בגרסה האחרונה של Chrome Canary.
  2. פתח את 'כלים למפתחים' ולחץ על סמל גלגל השיניים בפינה השמאלית התחתונה.
  3. בשלב הזה, צריך לפתוח את החלונית של Profiler ולהופיע פרופיל שנקרא 'תיעוד הקצאות של ערימה'.

כלי ליצירת פרופיל של הקצאות זיכרון בערימה (heap allocation)

קריאה של פרופיל הקצאת ערימה (heap allocation)

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

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

תמונת מצב של הכלי לניתוח הקצאה

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

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

הגדלת התצוגה בתמונת המצב

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

הצגה של הקצאת הזיכרון לפי פונקציה

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