עץ DOM גדול יכול להאט את ביצועי הדף בכמה דרכים:
יעילות הרשת וביצועי העומס
עץ DOM גדול כולל לרוב הרבה צמתים שלא גלויים כשהמשתמש טוען את הדף בפעם הראשונה. כתוצאה מכך, עלויות הנתונים של המשתמשים עולות ללא צורך וזמן הטעינה מאט.
ביצועים בסביבת זמן הריצה
כשמשתמשים וסקריפטים יוצרים אינטראקציה עם הדף, הדפדפן צריך לחשב מחדש כל הזמן את המיקום והסגנון של הצמתים. עץ DOM גדול בשילוב עם כללי סגנון מורכבים יכול להאט בצורה משמעותית את העיבוד ואת האינטראקטיביות.
ביצועי הזיכרון
אם בקוד ה-JavaScript שלכם נעשה שימוש בבוררי שאילתות כלליים כמו
document.querySelectorAll('li')
, יכול להיות שאתם שומרים ללא ידיעתכם הפניות למספר גדול מאוד של צמתים, דבר שעלול לגרום להתקפי עומס בזיכרון של המכשירים של המשתמשים.
כיצד הבדיקה של גודל ה-DOM של Lighthouse נכשלה
Lighthouse מדווחת על מספר רכיבי ה-DOM הכולל בדף, על עומק ה-DOM המקסימלי בדף ועל מספר רכיבי הצאצאים המקסימלי:
מערכת Lighthouse מסמנת דפים עם עצי DOM במקרים הבאים:
- מתקבלת אזהרה אם לרכיב הגוף יש יותר מ-800 צמתים.
- שגיאות כשאלמנט הגוף יש יותר מ-1,400 צמתים.
איך מבצעים אופטימיזציה של גודל ה-DOM
באופן כללי, כדאי לחפש דרכים ליצור צמתים ב-DOM רק כשצריך, ולמחוק צמתים כשאין בהם יותר צורך.
אם אתם שולחים עץ DOM גדול, נסו לטעון את הדף ולציין באופן ידני אילו צמתים מוצגים. אולי אפשר להסיר מהמסמך שנטען בהתחלה את הצמתים שלא מוצגים, וליצור אותם רק אחרי אינטראקציה רלוונטית של משתמש, כמו גלילה או לחיצה על לחצן.
אם אתם יוצרים צומתי DOM בזמן הריצה, נקודות עצירה של שינויים ב-DOM של שינוי של עץ משנה יכולות לעזור לכם לזהות מתי הצמתים נוצרים.
אם אי אפשר להימנע מעץ DOM גדול, אפשר לנסות לשפר את ביצועי הרינדור על ידי פשטות הסלקטורים ב-CSS. מידע נוסף זמין במאמר של Google בנושא צמצום ההיקף והמורכבות של חישובי הסגנון.
פרטים נוספים זמינים במאמר איך גודל DOM גדול משפיע על האינטראקטיביות, ומה אפשר לעשות בקשר לכך.
הנחיות ספציפיות למקבץ
Angular
אם אתם מבצעים רינדור של רשימות גדולות, כדאי להשתמש בגלילה וירטואלית עם ה-Component Dev Kit (CDK).
React
- כדאי להשתמש בספריית 'windowing', כמו
react-window
, כדי לצמצם את מספר צומתי ה-DOM שנוצרים כשמתבצע רינדור של רכיבים רבים שחוזרים בדף. - מצמצמים עיבודים מחדש מיותרים באמצעות
shouldComponentUpdate
,PureComponent
אוReact.memo
. - דילוג על אפקטים רק עד שיחסי תלות מסוימים ישתנו אם משתמשים בהוק (hook)
Effect
לשיפור הביצועים בסביבת זמן הריצה.