פורסם: 8 באוקטובר 2025
נפח DOM גדול יכול להאריך את משך הזמן של חישובי סגנונות ופריסות, מה שמשפיע על הרספונסיביות של הדף. נפח DOM גדול מגביר את מידת השימוש בזיכרון.
עץ DOM עמוק הוא לא בעיה בביצועים כשלעצמו, אבל הוא סימפטום של דפוסי עיצוב שמשתמשים בהטמעה מיותרת של רכיבים.
התובנה הזו מתייחסת לכל ה-DOM, כולל בתוך shadow roots. הוא מתעלם מצומתי DOM שהם לא גם רכיבים. הוא גם מתעלם מתוכן של <iframe>.
מה צריך לחפש:
- Total elements (סה"כ רכיבים): המספר הכולל של הרכיבים ב-DOM של הדף.
- עומק DOM: העומק המקסימלי של עץ ה-DOM.
- רוב הרכיבים המשניים: הרכיב עם הכי הרבה רכיבים משניים.
איך להשתמש בתובנה הזו
התובנה הזו נכשלת רק אם יש חישוב מחדש גדול של פריסה או סגנון שנמשך יותר מ-40 אלפיות השנייה.
- עדכון פריסה גדול כולל יותר מ-100 אובייקטים של פריסה (שהם בערך רכיבים).
- חישוב מחדש של סגנון גדול משפיע על יותר מ-300 רכיבים.
אם הפעולה נכשלת, התובנה הזו מדגישה את האירועים האלה בתרשים הלהבות בחלונית ביצועים.
כדי להפחית את העלות של האירועים האלה:
- איך מודדים את העלות של סלקטורים ב-CSS ומפחיתים את מורכבות הסגנון
- כדי לצמצם את העומק של ה-DOM, כדאי להפחית את הקינון המיותר.
- כדאי לשקול להשתמש ב-Web Components כדי להשתמש ב-Shadow DOM. השימוש הזה לא יקטין את גודל ה-DOM, אבל הוא יפחית את העלות של חישובים מחדש של סגנונות.
הנחיות ספציפיות לטכנולוגיה
התובנה הזו כוללת גם הנחיות ספציפיות לטכנולוגיות שמשמשות בדפים הבאים:
Angular
אם אתם מבצעים רינדור של רשימות גדולות, כדאי להשתמש בגלילה וירטואלית עם ה-Component Dev Kit (CDK).
React
- כדאי להשתמש בספריית "windowing", כמו
react-window, כדי לצמצם את מספר צומתי DOM שנוצרים כשמתבצע רינדור של רכיבים רבים שחוזרים בדף. - כדי לצמצם רינדור מחדש שאינו נחוץ, אפשר להשתמש ב-
shouldComponentUpdate,PureComponentאוReact.memo. - לוותר על אפקטים
עד לשינוי של יחסי תלות מסוימים בלבד אם משתמשים ב-hook של
Effectכדי לשפר את הביצועים בזמן ריצה.