تاریخ انتشار: 8 اکتبر 2025
یک DOM بزرگ می‌تواند مدت زمان محاسبات سبک و طرح‌بندی را افزایش دهد و بر پاسخ‌دهی صفحه تأثیر بگذارد . یک DOM بزرگ همچنین استفاده از حافظه را افزایش می دهد.
درخت DOM عمیق به خودی خود یک مشکل عملکردی نیست، با این حال نشانه ای از الگوهای طراحی است که از تودرتوی عناصر غیر ضروری استفاده می کنند .
این بینش کل DOM را در نظر می گیرد، از جمله در ریشه های سایه. گره های DOM را که عناصری هم نیستند نادیده می گیرد. همچنین محتوای <iframe> را نادیده می گیرد.
به دنبال چه چیزی باشید:
- کل عناصر : تعداد کلی عناصر در DOM صفحه شما.
- عمق DOM : حداکثر عمق درخت DOM.
- اکثر کودکان : عنصری که بیشترین عناصر فرزند را دارد.
چگونه می توان از این بینش عبور کرد
این بینش تنها در صورتی با شکست مواجه می‌شود که یک طرح بزرگ یا محاسبه مجدد سبک بیش از مدت زمان 40 میلی‌ثانیه وجود داشته باشد.
- یک به‌روزرسانی طرح‌بندی بزرگ شامل بیش از 100 شیء طرح‌بندی (که تقریباً عناصر هستند) است.
- یک محاسبه مجدد سبک بزرگ بیش از 300 عنصر را تحت تأثیر قرار می دهد.
در صورت شکست، در پانل عملکرد ، این بینش این رویدادها را در نمودار شعله برجسته می کند.
برای کاهش هزینه این رویدادها:
- نحوه اندازه گیری هزینه انتخابگرهای CSS و کاهش پیچیدگی سبک را بیاموزید.
- با کاهش تودرتوهای غیر ضروری، عمق DOM را به حداقل برسانید.
- استفاده از Web Components را برای استفاده از Shadow DOM در نظر بگیرید – در حالی که این کار باعث کاهش اندازه DOM نمی شود، اما هزینه بازیابی سبک را کاهش می دهد.
راهنمایی مخصوص پشته
این بینش همچنین راهنمایی‌های مخصوص پشته را برای صفحاتی که از فناوری‌های زیر استفاده می‌کنند ارائه می‌کند:
زاویه ای
اگر فهرست‌های بزرگی را ارائه می‌کنید، از پیمایش مجازی با Component Dev Kit (CDK) استفاده کنید.
واکنش نشان دهید
- از یک کتابخانه "windowing" مانند
react-windowبرای به حداقل رساندن تعداد گره های DOM ایجاد شده در صورت رندر کردن عناصر تکراری زیادی در صفحه استفاده کنید. - رندرهای غیرضروری را با استفاده از
shouldComponentUpdate،PureComponentیاReact.memoبه حداقل برسانید. - اگر از قلاب
Effectبرای بهبود عملکرد زمان اجرا استفاده می کنید، فقط تا زمانی که وابستگی های خاصی تغییر کرده باشند، از افکت ها رد شوید .