יש להימנע מ-DOM גדול מדי

עץ DOM גדול יכול להאט את ביצועי הדף במספר דרכים:

  • יעילות הרשת וביצועי עומסים

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

  • ביצועי זמן ריצה

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

  • ביצועי הזיכרון

    אם ב-JavaScript נעשה שימוש בסלקטורים כלליים של שאילתות כמו document.querySelectorAll('li'), יכול להיות שאתם שומרים ללא כוונה הפניות למספר גדול מאוד של צמתים, דבר שעלול להעמיס על יכולות הזיכרון של המכשירים של המשתמשים.

איך בדיקת גודל ה-DOM של Lighthouse נכשלת

הדוח Lighthouse מדווח על סך רכיבי ה-DOM של דף, על עומק ה-DOM המקסימלי של הדף ועל רכיבי הצאצא המקסימליים:

צילום מסך של Lighthouse נמנע מבדיקה מוגזמת של גודל DOM

דפים עם עצי DOM מסומנים על ידי Lighthouse במקרים הבאים:

  • מוצגת אזהרה אם לרכיב הגוף יש יותר מ-800 צמתים.
  • שגיאות כשיש לרכיב הגוף יותר מ-1,400 צמתים.

איך לבצע אופטימיזציה של גודל ה-DOM

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

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

אם יוצרים צומתי DOM בזמן ריצה, במאמר Subtree Modify DOM Change Breakpoints אפשר לזהות מתי נוצרים צמתים.

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

הנחיות ספציפיות למקבץ

Angular

אם מעבדים רשימות גדולות, צריך להשתמש בגלילה וירטואלית עם Component Dev Kit (CDK).

React

  • כדאי להשתמש בספריית "windowing", כמו react-window, כדי לצמצם את מספר צומתי DOM שנוצרים כשמתבצע רינדור של רכיבים רבים שחוזרים בדף.
  • מצמצמים את מספר העיבודים מחדש המיותרים באמצעות shouldComponentUpdate, PureComponent או React.memo.
  • דילוג על האפקטים רק עד שיחסי תלות מסוימים משתנים אם משתמשים בהוק Effect כדי לשפר את הביצועים.

מקורות מידע