פתרון בעיות בזיכרון

Kayce Basques

למד כיצד להשתמש ב-Chrome וב-DevTools כדי למצוא בעיות זיכרון המשפיעות על ביצועי הדף, כולל דליפות זיכרון, התנפחות זיכרון ואיסוף פסולת תכוף.

סיכום

• אתם יכולים לבדוק כמה זיכרון הדף צורך באמצעות מנהל המשימות של Chrome.
• המחשה חזותית של השימוש בזיכרון לאורך זמן באמצעות הקלטות של ציר הזמן.
• לזהות עצי DOM מנותקים (סיבה נפוצה לדליפות זיכרון) באמצעות תמונות מצב של ערימה (heap snapshot).
• בעזרת הקלטות של ציר הזמן של ההקצאה, אתם יכולים לגלות מתי מוקצה זיכרון חדש ב-JS heap.
• זיהוי רכיבים מנותקים שנשמרו על ידי הפניה ב-JavaScript.

סקירה כללית

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

בעיות בזיכרון הן חשובות כי המשתמשים בדרך כלל מבחינים בהן. המשתמשים יכולים להבחין בבעיות בזיכרון בדרכים הבאות:

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

ניפוח זיכרון: כמה זה "יותר מדי"?

קל להגדיר דליפת זיכרון. אם אתר משתמש בהדרגה ביותר ויותר זיכרון, יש לכם דליפה. אבל קצת יותר קשה לזהות ניפוח זיכרון. מה נחשב ל "שימוש בכמות זיכרון גדולה מדי"?

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

העיקרון החשוב כאן הוא להשתמש במודל RAIL ולהתמקד במשתמשים. בדקו אילו מכשירים פופולריים בקרב המשתמשים שלכם, ואז בדקו את הדף במכשירים האלה. אם חוויית השימוש גרועה באופן עקבי, יכול להיות שהדף חורג מיכולות הזיכרון של המכשירים האלה.

מעקב אחרי השימוש בזיכרון בזמן אמת באמצעות מנהל המשימות של Chrome

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

1. כדי לפתוח את מנהל המשימות, מקישים על Shift+Esc או עוברים לתפריט הראשי של Chrome ובוחרים באפשרות כלים נוספים > מנהל המשימות.

   

2. לוחצים לחיצה ימנית על כותרת הטבלה של מנהל המשימות ומפעילים את האפשרות זיכרון JavaScript.

   

שתי העמודות האלה מספקות מידע שונה על השימוש של הדף בזיכרון:

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

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

  

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

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

1. פותחים את החלונית Performance ב-DevTools.
2. מסמנים את התיבה זיכרון.
3. יצירת הקלטה.

טיפ: מומלץ להתחיל ולסיים את ההקלטה עם איסוף אשפה מאולץ. כדי לאלץ איסוף אשפה, לחץ על כפתור mop Collect garbage בזמן ההקלטה.

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

var x = [];

function grow() {
  for (var i = 0; i < 10000; i++) {
    document.body.appendChild(document.createElement('div'));
  }
  x.push(new Array(1000000).join('x'));
}

document.getElementById('grow').addEventListener('click', grow);

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

קודם כל, הסבר על ממשק המשתמש. התרשים HEAP בחלונית Overview (מתחת ל-NET) מייצג את ה-JS heap. מתחת לחלונית Overview נמצאת החלונית Counter. כאן אפשר לראות את השימוש בזיכרון בחלוקה לפי ערימת JS (כמו בתרשים HEAP בחלונית Overview), מסמכים, צומתי DOM, מאזינים וזיכרון GPU. אם מבטלים את הסימון של תיבה, היא לא תופיע בתרשים.

עכשיו, ניתוח של הקוד בהשוואה לצילום המסך. אם תסתכלו על מונה הצמתים (התרשים הירוק), תוכלו לראות שהוא תואם לקוד. מספר הצמתים גדל בשלבים נפרדים. אפשר להניח שכל עלייה במספר הצמתים היא קריאה ל-grow(). התרשים של ערימת ה-JS (התרשים הכחול) לא פשוט כמוהו. בהתאם לשיטות המומלצות, הירידה הראשונה היא למעשה איסוף אשפה מאולץ (שמתבצע בלחיצה על הלחצן איסוף אשפה). ככל שההקלטה מתקדמת, אפשר לראות שגודל הערימה של JS עולה בחדות. זה טבעי וצפוי: קוד ה-JavaScript יוצר את צומתי ה-DOM בכל לחיצה על לחצן, ומבצע הרבה עבודה כשהוא יוצר את המחרוזת של מיליון תווים. הנקודה החשובה כאן היא שהערימה של JS מסתיימת בערך גבוה יותר מזה שהתחילה בו (ה "התחלה" כאן היא הנקודה שאחרי איסוף הזבל הכפוי). בעולם האמיתי, אם הייתם רואים את הדפוס הזה של הגדלת גודל הערימה של JS או גודל הצומת, זה היה יכול להצביע על דליפת זיכרון.

איך לגלות דליפות זיכרון בעץ DOM מנותק באמצעות תמונות מצב של הזיכרון

צומת DOM יכול לעבור איסוף רק כשאין הפניות אליו מעץ ה-DOM או מקוד JavaScript של הדף. צומת נחשב "מנותק" כשהוא מוסר מעץ ה-DOM אבל עדיין יש קוד JavaScript שמפנה אליו. צומתי DOM מנותקים הם סיבה נפוצה לדליפות זיכרון. בקטע הזה נסביר איך להשתמש בכלי ליצירת תמונת מצב של ערימה (heap profiler) ב-DevTools כדי לזהות צמתים מנותקים.

הנה דוגמה פשוטה לצומתי DOM מנותקים.

var detachedTree;

function create() {
  var ul = document.createElement('ul');
  for (var i = 0; i < 10; i++) {
    var li = document.createElement('li');
    ul.appendChild(li);
  }
  detachedTree = ul;
}

document.getElementById('create').addEventListener('click', create);

לחיצה על הכפתור שאליו מתייחס הקוד יוצרת צומת ul עם עשרה צמתים משניים מסוג li. הקוד מפנה לצמתים האלה, אבל הם לא קיימים בעץ ה-DOM, ולכן הם מנותקים.

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

כדי ליצור תמונת מצב, פותחים את DevTools ועוברים לחלונית Memory, בוחרים בלחצן הבחירה Heap Snapshot ואז לוחצים על הלחצן Take snapshot.

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

מקלידים Detached בתיבת הקלט Class filter כדי לחפש עצי DOM מנותקים.

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

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

זיהוי דליפות זיכרון בערימה של JS באמצעות ציר הזמן של ההקצאות

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

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

var x = [];

function grow() {
  x.push(new Array(1000000).join('x'));
}

document.getElementById('grow').addEventListener('click', grow);

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

כדי לתעד ציר זמן של הקצאות, פותחים את כלי הפיתוח, עוברים לחלונית Memory, בוחרים בלחצן הבחירה Allocations on timeline, לוחצים על הלחצן radio_button_checked Record, מבצעים את הפעולה שלדעתכם גורמת לדליפת הזיכרון, ואז לוחצים על הלחצן Stop recording כשתסיימו.

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

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

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

בדיקת הקצאת הזיכרון לפי פונקציה

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

1. לוחצים על כפתור הבחירה דגימת הקצאה. אם יש worker בדף, אפשר לבחור אותו כיעד ליצירת הפרופיל בחלון Select JavaScript VM instance.
2. לוחצים על הכפתור התחלה.
3. מבצעים בדף את הפעולות שרוצים לבדוק.
4. כשמסיימים את כל הפעולות, לוחצים על הכפתור עצירה.

בכלי הפיתוח מוצג פירוט של הקצאת הזיכרון לפי פונקציה. תצוגת ברירת המחדל היא Heavy (Bottom Up)‎, שבה הפונקציות שהקצו הכי הרבה זיכרון מוצגות בחלק העליון.

זיהוי אובייקטים שנשמרו בזיכרון בגלל הפניה ב-JS

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

כדי לראות את צומתי ה-HTML המדויקים ואת מספר הצמתים, מתעדים פרופיל של רכיבים מנותקים.

איסוף אשפה תכוף במקום

אם נראה שהדף מושהה לעיתים קרובות, יכול להיות שיש בעיות באיסוף הזבל.

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

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