چگونه می توان رندرهای غیر ضروری عناصر DOM را در برنامه وب خود برای بهبود عملکرد تشخیص داد 🔥

مثال‌های کدی که من می‌آورم از Angular استفاده می‌کند، اما برای نشان دادن مشکل اصلی، فقط مقدار بسیار کمی کد است و این مشکل می‌تواند در هر برنامه جاوا اسکریپتی که با DOM تعامل دارد رخ دهد.

رنگ آمیزی مجدد غیر ضروری در یک برنامه وب می تواند تأثیر مهمی بر عملکرد داشته باشد.

در حالی که ممکن است آن را روی یک دستگاه پیشرفته توسعه دهید، ممکن است حتی متوجه نشوید. اما کاربری که آن را بر روی یک دستگاه پایین تر اجرا می کند قطعا ممکن است.

یک سوال باقی می ماند: چگونه از رنگ آمیزی های غیر ضروری آگاه شویم؟

قبل از اینکه به این موضوع بپردازیم، اجازه دهید موضوع اصلی را توضیح دهم.

در اینجا یک برنامه بسیار ابتدایی وجود دارد که واکشی آرایه کاربران را شبیه سازی می کند و هر یک از آنها را خط به خط در یک لیست نمایش می دهد.

اگر چندین بار روی دکمه “واکشی افراد” کلیک کنید چه اتفاقی می افتد؟ ظاهرا هیچی لیست ما همچنان همان است، چیزی حذف نشده، اضافه نشده است… و با این حال…

وقتی برای واکشی افراد روی دکمه کلیک می کنیم، در این مثال یک تماس شبکه را شبیه سازی می کنیم که آرایه ای از افراد را برمی گرداند. اتفاقاً همین نتیجه می شود. اما در پشت صحنه، یک مرجع کاملاً جدید برای آرایه دریافت می‌کنیم… و تمام اشیاء موجود در آن! بنابراین Angular فرض می کند که باید کل لیست را دوباره رنگ آمیزی کند.

اما چگونه این را در کل برنامه خود تشخیص دهیم؟ آیا باید از نظر ذهنی از هر چیزی که می تواند چارچوب ما را برای رنگ آمیزی مجدد قطعات غیر ضروری برنامه تحریک کند آگاه باشیم؟

یک راه بسیار ساده برای پیدا کردن وجود دارد، فقط باید از یک ویژگی در ابزار توسعه کروم آگاه باشید که کمی پنهان است: چشمک زن رنگ.

می توان آن را در: ابزار توسعه > منوی همبرگر > ابزارهای بیشتر > رندر > چشمک زدن رنگ پیدا کرد.

در اینجا می‌توان آن را پیدا کرد و نمایشی از آنچه با این ویژگی روی می‌دهد در اینجا آمده است:

توجه داشته باشید که چگونه هر زمان که لیست کاربران را واکشی می کنیم، کل لیست سبز چشمک می زند؟ این ابزار توسعه دهنده است که به ما نشان می دهد کدام عناصر DOM دوباره رنگ شده اند. و اگر همین لیست را داشته باشیم، مطمئناً نباید دوباره رنگ آمیزی شود!

این نیاز به بررسی دارد و متأسفانه هیچ گلوله نقره ای وجود ندارد که بتوانم در اینجا به شما بدهم. در این مورد خاص، می‌توانیم به Angular بگوییم که آیتم‌ها را با یک شناسه منحصربه‌فرد ردیابی کند تا بداند آیا می‌تواند از یک عنصر مجددا استفاده کند یا خیر. این پست وبلاگ در مورد Angular نیست، بنابراین من در مورد رفع مشکل نمی مانم، اما اگر از a استفاده کنیم trackBy بر روی … ما ngFor مثل این *ngFor="let person of people; trackBy: trackById" و تعریف کنید trackById عملکرد به عنوان

public trackById(_: number, person: Person) {
  return person.id;
}

سپس Angular می تواند رندر را بهینه کند.

در اینجا توجه کنید که اولین باری که لیست را دریافت می کنیم، البته باید یک بار رندر شود. بنابراین به رنگ سبز چشمک می زند. اما هر زمان که دوباره سعی می کنم آن را واکشی کنم، فقط دکمه چشمک می زند (همانطور که روی آن کلیک می کنم و متحرک می شود).

از آنجا، ما می دانیم که برنامه خود را برای جلوگیری از رندرهای غیر ضروری بهینه سازی کرده ایم.

این روش به شما کمک می کند تا در کوتاه ترین زمان، مواردی را که دوباره رنگ شده اند، در حالی که نباید انجام دهند، پیدا کنید. البته، تصویری که من ایجاد کرده‌ام مشکل‌ساز نیست، زیرا یک برنامه آزمایشی است، اما در زندگی واقعی شما صدها یا هزاران عنصر DOM را با سرعت زیاد ارائه می‌کنید تا تغییرات سریع در داده‌ها را منعکس کند، ممکن است مشکل ساز شود.

امیدوارم از این مقاله لذت برده باشید. اگر به نکات بیشتری در مورد Angular، RxJS، منبع باز، میزبانی شخصی، حریم خصوصی داده ها و موارد دیگر علاقه دارید، به راحتی دکمه پیگیری برای بیشتر. با تشکر برای خواندن!

اگر اشتباه تایپی، جمله ای که می تواند بهبود یابد یا هر چیز دیگری که باید در این پست وبلاگ به روز شود، پیدا کردید، می توانید از طریق یک مخزن git به آن دسترسی داشته باشید و درخواست pull کنید. به جای ارسال نظر، لطفاً مستقیماً به https://github.com/maxime1992/my-dev.to بروید و یک درخواست کشش جدید با تغییرات خود باز کنید. اگر علاقه مندید که چگونه پست های dev.to خود را از طریق git و CI مدیریت کنم، اینجا بیشتر بخوانید.