تتيح "أدوات مطوّري البرامج في Chrome المخصّصة للوكلاء" لوكيل الترميز تحليل وإصلاح تسريبات الذاكرة من جهة العميل (بما في ذلك JavaScript وWebAssembly) في تطبيقك. من خلال أتمتة عملية جمع وتحليل لقطات الذاكرة المؤقتة، يمكن للوكيل تحديد العناصر التي لا يتم جمعها بشكل صحيح واقتراح إعادة بناء الرمز البرمجي المستهدَف.
في سير العمل المستند إلى الذكاء الاصطناعي الوكيل، يأخذ وكيل الترميز لقطات متعددة عبر حالات التطبيق المختلفة ويستخدم أدوات تحليل متخصصة.
أنماط تسرُّب الذاكرة الشائعة
يركّز تحليل الذاكرة على العثور على أنماط تسريب شائعة، بما في ذلك:
- متتبِّعات الأحداث غير المحذوفة: متتبِّعات الأحداث المرتبطة بالعناصر العامة (مثل
windowأوdocument) التي تمنع جمع البيانات المُهمَلة. - عُقد DOM المنفصلة: هي عُقد تمت إزالتها من شجرة المستند ولكن لا يزال متغيّر JavaScript يشير إليها.
- المتغيرات العمومية غير المقصودة: هي متغيرات تم تعريفها بدون تحديد النطاق بشكل صحيح، وتبقى في الذاكرة إلى الأبد.
- عمليات الإغلاق: عمليات الإغلاق التي تحتفظ عن غير قصد بمراجع لكائنات كبيرة في نطاقها الخاص.
- بُنى البيانات غير المحدودة: بُنى البيانات المستخدَمة للتخزين المؤقت التي تتزايد بدون حدود.
اعتبارات تحليل الذاكرة
عند استخدام ميزة "تحليل الذاكرة"، يجب مراعاة ما يلي:
عدم قراءة اللقطات الأولية مباشرةً: لا تسمح للوكيل بقراءة ملفات
.heapsnapshotالأولية مباشرةً. وهي كبيرة جدًا وتتجاوز حدود السياق. توجّه مهارة تصحيح أخطاء تسرُّب الذاكرة الوكلاء بشكل صريح إلى تجنُّب قراءة هذه الملفات.منهجية اللقطات الثلاث: للعثور على تسرّبات الذاكرة بشكل موثوق، يحتاج البرنامج إلى التقاط ثلاث لقطات بشكل عام: لقطة أساسية قبل الإجراء، ولقطة مستهدَفة بعد الإجراء، ولقطة نهائية بعد التراجع عن الإجراء. يُرجى العِلم أنّ بعض الإجراءات، مثل تلك التي يتم تشغيلها بواسطة المؤقتات (
setTimeout) أو الرسوم المتحركة (requestAnimationFrame)، تحدث بدون تفاعل المستخدم وقد لا تتطلّب خطوة عكسية.يُرجى العِلم أنّ بعض الإجراءات، مثل تلك التي يتم تشغيلها بواسطة المؤقتات (
setTimeout) أو الرسوم المتحركة (requestAnimationFrame)، تحدث بدون تفاعل المستخدم وقد تؤدي إلى زيادة استخدام الذاكرة.التحقّق قبل الإصلاح: راجِع دائمًا النتائج التي يتوصّل إليها الوكيل للتأكّد من أنّ الإجراءات المقترَحة مناسبة وصحيحة لمنطق تطبيقك. على سبيل المثال، تأكَّد مما إذا كانت العقدة المنفصلة جزءًا من ذاكرة تخزين مؤقت مقصودة قبل توجيه الوكيل إلى إبطال المراجع.
حالات استخدام تحليل تسريب الذاكرة
اطلب من الأداة إنشاء ملف تعريف للذاكرة أثناء تنفيذ الإجراءات المتكررة، بما في ذلك المؤقتات وتفاعلات المستخدمين، بدلاً من أخذ لقطات يدويًا ومقارنتها. يمكنك دمج تحليل الذاكرة في عملية تصحيح الأخطاء باستخدام مهام سير العمل التالية.
ملاحظة: خطوات تنفيذ "الوكيل" هي أمثلة على السلوك المحتمل. قد يتصرّف الوكيل بشكل مختلف.
رصد أدوات معالجة الأحداث التي لم تتم إزالتها أثناء التنقّل
غالبًا ما تتسبّب التطبيقات ذات الصفحة الواحدة (SPA) في تسرُّب الذاكرة عندما ينسى المطوّرون إزالة أدوات معالجة الأحداث العامة بعد إلغاء تحميل أحد المكوّنات. يمكنك تكليف وكيلك بالتأكّد من تحرير الذاكرة بشكل صحيح عند التنقّل بين طرق العرض.
مثال على طلب:
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 منفصلة إذا تم الاحتفاظ بمراجع لها في متغيرات JavaScript بعد إزالتها من 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.
مثال على تنفيذ الوكيل: يحلّل الوكيل حالة الذاكرة قبل التمرير وبعده. تحدّد هذه الأداة دالة إغلاق تلتقط عن غير قصد مصفوفة كبيرة تنمو بلا حدود. يقترح الوكيل فرض حدود على التخزين المؤقت أو استخدام WeakMap للبيانات المرتبطة بدورات حياة العناصر للسماح بجمع البيانات المُهمَلة بشكل سليم.
تحديد المشاكل المتعلقة بتسرُّب الذاكرة في العمليات التي تعمل في الخلفية وحلّها
يمكن أن تتسبّب مؤقّتات الرسوم المتحرّكة والخلفية في تسريب الذاكرة بدون تفاعل صريح من المستخدم. يمكنك توجيه الوكيل لمراقبة نمو الذاكرة بمرور الوقت للعثور على تسرّبات الذاكرة لهذه العمليات.
مثال على طلب:
Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.
مثال على تنفيذ الوكيل: يستكشف الوكيل تطبيق اللوحة القماشية ويلتقط تلقائيًا لقطات دورية لتتبُّع استخدام الذاكرة بمرور الوقت. ويحلّل الذاكرة المؤقتة ويحدّد أنّ حلقة العرض تُضيف شبكات WebGL جديدة إلى مصفوفة في كل إطار بدون جمع البيانات غير الضرورية من الشبكات السابقة، ما يشير إلى إمكانية تحسين عملية إعادة استخدام العناصر.