بهینه سازی ایجاد ۱۰۰۰ المان در HTML

سلام دنیا !

چند روز پیش به یه مسئله ای برخوردم که خب تا الان زیاد درگیرش نبودم و وقتی در موردش شروع به مطالعه کردم دیدم اوووو چقدر ماجرا زیاده ?️ داستان هم ازین قرار بود که توسط JS pure باید در کسری از ثانیه تعداد بیشتر از هزار المان (Element) به DOM اضافه میشد. خب اولش مثل همیشه یه کد ساده زدم براش که توی یه حلقه دونه دونه المان ها رو به DOM اضافه کنه ول خب گس وات؟ پرفورمنس پَر .... بیشتر از ۶۰ ثانیه طول میکشید چون دایم DOM درگیر نوشته شدن بود !

یکم سرچ کردم دیدم ملت چه پیشنهادهای باحالی میدن، اولین تلاشم این شد که المان ها رو توی یه متغیر بریزم و در نهایت متغیر رو به DOM اضافه کنم که خب به خاطر درگیر یک مرتبه DOM نتیجه خیلیییی بهتر شد! حدود ۸۰۰ میلی ثانیه !

اضافه کردن به صورت متغیر کلی و نوشتن DOM به صورت یکبار

مرحله بعد برای ایجاد پرفورمنس بهتر، حالا به جای اینکه توی حلقه به جای اینکه متغیر رو یک string در نظر بگیرم و بلاک های html رو بهش اضافه کنم، اون ها رو توی یه آرایه بریزم و در نهایت با join کردن آرایه به DOM اضافه کنم که خب حدود ۱۰ درصد سرعت اجرا بهتر شد بازم !

نمونه کد برای اضافه کردن به DOM توسط آرایه و join

و اما مرحله آخر برای پرفورمنس این شد که فهمیدم که اضافه کردن به DOM مستلزم اینه که اون بلاک مربوطه اول پاک بشه بعد دوباره نوشته باشه، خب راه بهتر اینه که اصلا دیگه پاک نشه ! بلکه جایگزین بشه محتواش و اینجا بود که تابع replaceHTML به کارم اومد و نتیجه کار باز هم حدود ۲۰ درصد بهتر شد و بنچمارکی که گرفتم نتیجه وارد کردن ۱۰۰۰ المان به DOM یه زمان حدود ۵۰۰ میلی ثانیه رسید که خب عالیه !