Chrome DevTools برای عاملها به عامل کدنویسی شما اجازه میدهد تا نشت حافظه سمت کلاینت (از جمله جاوا اسکریپت و WebAssembly) را در برنامه شما تجزیه و تحلیل و رفع کند. با خودکارسازی جمعآوری و تجزیه و تحلیل اسنپشاتهای هیپ، عامل شما میتواند اشیایی را که به درستی زبالهروب نمیشوند، شناسایی کرده و بازسازی هدفمند کد را پیشنهاد دهد.
در یک گردش کار عاملمحور، عامل کدنویسی شما چندین اسنپشات (عکس فوری) از حالتهای مختلف برنامه میگیرد و از ابزارهای تحلیل تخصصی استفاده میکند.
الگوهای رایج نشت حافظه
تحلیل حافظه بر یافتن الگوهای رایج نشت اطلاعات تمرکز دارد، از جمله:
- شنوندههای رویداد نامشخص: شنوندههای رویدادی که به اشیاء سراسری (مانند
windowیاdocument) متصل شدهاند و از جمعآوری زباله جلوگیری میکنند. - گرههای DOM جدا شده: گرههایی که از درخت سند حذف شدهاند اما هنوز توسط یک متغیر جاوا اسکریپت ارجاع داده میشوند.
- متغیرهای سراسری ناخواسته: متغیرهایی که بدون تعیین محدوده مناسب تعریف میشوند و برای همیشه در حافظه باقی میمانند.
- Closureها: Closureهایی که ناخواسته ارجاعات به اشیاء بزرگ را در محدوده خود نگه میدارند.
- ساختارهای داده نامحدود: ساختارهای دادهای که برای ذخیرهسازی استفاده میشوند و بدون محدودیت رشد میکنند.
ملاحظاتی برای تحلیل حافظه
هنگام استفاده از تحلیل حافظه، موارد زیر را در نظر داشته باشید:
عکسهای خام را مستقیماً نخوانید: به عامل خود اجازه ندهید فایلهای خام
.heapsnapshotرا مستقیماً بخواند. آنها بسیار بزرگ هستند و از محدودیتهای زمینه فراتر میروند. مهارت اشکالزدایی نشت حافظه به صراحت به عاملها دستور میدهد که از خواندن این فایلها خودداری کنند.روش سه عکس فوری: برای یافتن نشتیها به طور قابل اعتماد، عامل شما معمولاً نیاز به ثبت سه عکس فوری دارد: یک خط پایه قبل از اقدام، یک هدف پس از اقدام، و یک عکس فوری نهایی پس از بازگرداندن اقدام. توجه داشته باشید که برخی از اقدامات، مانند مواردی که توسط تایمرها (
setTimeout) یا انیمیشنها (requestAnimationFrame) فعال میشوند، بدون تعامل کاربر رخ میدهند و ممکن است نیازی به مرحله معکوس نداشته باشند.توجه داشته باشید که برخی از اقدامات، مانند مواردی که توسط تایمرها (
setTimeout) یا انیمیشنها (requestAnimationFrame) فعال میشوند، بدون تعامل کاربر رخ میدهند و ممکن است همچنان باعث افزایش مصرف حافظه شوند.قبل از رفع مشکل، تأیید کنید: همیشه یافتههای عامل را بررسی کنید تا مطمئن شوید اقدامات پیشنهادی آن برای منطق برنامه شما قابل اجرا و صحیح است. به عنوان مثال، قبل از اینکه به عامل دستور دهید ارجاعات را باطل کند، تأیید کنید که آیا یک گره جدا شده بخشی از یک حافظه پنهان عمدی است یا خیر.
موارد استفاده برای تحلیل نشت حافظه
به عامل خود دستور دهید که در طول اقدامات تکراری، از جمله تایمرها و تعاملات کاربر، به جای گرفتن دستی اسنپشاتها و ایجاد تغییرات دستی در آنها، حافظه را پروفایل کند. با این گردشهای کاری، تجزیه و تحلیل حافظه را در فرآیند اشکالزدایی خود ادغام کنید.
نکته: مراحل اجرای عامل، نمونههایی از رفتارهای بالقوه هستند. عامل شما ممکن است متفاوت عمل کند.
تشخیص شنوندههای رویداد نامشخص در حین ناوبری
برنامههای تک صفحهای (SPA) اغلب زمانی که توسعهدهندگان فراموش میکنند شنوندههای رویداد سراسری را پس از unmount شدن یک کامپوننت حذف کنند، دچار نشت حافظه میشوند. میتوانید به عامل خود وظیفه دهید تا هنگام پیمایش بین نماها، تأیید کند که حافظه به درستی آزاد شده است.
مثال:
Navigate from the home page to the dashboard and back to the home page. Use the take_heapsnapshot tool to check if we have any uncleared event listeners causing memory leaks.
اجرای نمونهای از عامل: عامل شما یک اسنپشات از هیپ پایه در صفحه اصلی میگیرد، به داشبورد میرود و برای گرفتن اسنپشات نهایی به صفحه اصلی برمیگردد. سپس از ابزارهای تحلیل داخلی برای ارزیابی اسنپشاتها استفاده میکند، تشخیص میدهد که یک شنونده scroll متصل به شیء window هرگز پاک نشده است و کد خاصی را برای فراخوانی removeEventListener در تابع پاکسازی مؤلفه شما ارائه میدهد.
شناسایی گرههای DOM جدا شده در کامپوننتهای رابط کاربری
ماژولها، منوهای کشویی و اجزای پیچیده رابط کاربری، اگر ارجاعات به آنها پس از حذف از DOM در متغیرهای جاوا اسکریپت نگه داشته شود، اغلب گرههای DOM جدا شدهای را از خود به جا میگذارند.
مثال:
Open the user settings modal and close it 5 times. Analyze the heap snapshots and tell me if there are any detached DOM nodes left behind. If there are, ask me if they are intentional before writing a fix.
اجرای نمونهای از عامل: عامل شما در حین جمعآوری تصاویر پایه، هدف و نهایی مورد نیاز، با ماژول تنظیمات تعامل میکند. تجزیه و تحلیل، چندین شیء در حال رشد با برچسب Detached HTMLDivElement را نشان میدهد. عامل، شما را از این یافته مطلع میکند و قبل از تغییر کد برای تنظیم متغیرهایی که ارجاعات DOM را به null تنظیم میکنند، از شما تأیید میخواهد.
یافتن حافظههای نهان نامحدود در تعاملات پیوسته
ویژگیهایی مانند پیمایش بینهایت یا واکشی مداوم دادهها، اگر آرایهها یا نقشههای زیربنایی به طور نامحدود و بدون محدودیت رشد کنند، میتوانند باعث نشت حافظه شوند.
مثال:
Scroll down the infinite feed list to load more items three times. Check if our LRU cache is unbounded and leaking memory, and suggest a fix.
اجرای نمونه عامل: عامل شما وضعیت حافظه را قبل و بعد از پیمایش تجزیه و تحلیل میکند. این کار یک closure را شناسایی میکند که ناخواسته یک آرایه بزرگ را که بدون محدودیت رشد میکند، ضبط میکند. عامل پیشنهاد میکند که محدودیتهای ذخیرهسازی را پیادهسازی کنید یا از WeakMap برای دادههای مرتبط با چرخه حیات شیء استفاده کنید تا امکان جمعآوری صحیح زباله فراهم شود.
اشکالزدایی نشت حافظه در فرآیندهای پسزمینه
انیمیشنها و تایمرهای پسزمینه میتوانند بدون تعامل صریح کاربر، باعث نشت حافظه شوند. میتوانید به عامل خود دستور دهید که رشد حافظه را در طول زمان رصد کند تا نشت حافظه را برای این فرآیندها پیدا کند.
مثال:
Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.
اجرای نمونه عامل: عامل شما برنامه canvas را بررسی میکند و به طور خودکار اسنپشاتهای دورهای میگیرد تا میزان استفاده از حافظه را در طول زمان رصد کند. این عامل، هیپ را تجزیه و تحلیل میکند و تشخیص میدهد که حلقه رندر، مشهای جدید WebGL را در هر فریم به یک آرایه ارسال میکند، بدون اینکه مشهای قبلی را جمعآوری زباله کند و بهینهسازیهایی را برای استفاده مجدد از شیء پیشنهاد میدهد.