تعرَّف على طريقة استخدام Chrome و"أدوات مطوري البرامج" للعثور على مشاكل الذاكرة التي تؤثر في أداء الصفحة، بما في ذلك: تسرُّب الذاكرة وتضخم الذاكرة ومجموعات البيانات غير الضرورية بشكل متكرر.
ملخّص
- اكتشف حجم الذاكرة التي تستخدمها صفحتك حاليًا من خلال إدارة مهام Chrome.
- يمكنك عرض استخدام الذاكرة بمرور الوقت من خلال تسجيلات "المخطط الزمني".
- تحديد أشجار DOM المنفصلة (السبب الشائع لتسرّب الذاكرة) باستخدام لقطات لأجزاء من الذاكرة.
- يمكنك معرفة وقت تخصيص ذكرى جديدة في كومة JavaScript من خلال تسجيلات "المخطط الزمني" المخصّص لتخصيصها.
نظرة عامة
انطلاقًا من روح نموذج أداء RAIL، يجب أن تركز جهود الأداء مستخدميك.
مشاكل الذاكرة مهمة لأنها غالبًا ما يلاحظها المستخدمون. يمكن للمستخدمين إدراك الذاكرة المشكلات بالطرق التالية:
- يزداد مستوى أداء الصفحة بشكل تدريجي بمرور الوقت. وقد يكون هذا أحد أعراض الإصابة تسريب الذاكرة. يحدث تسرب الذاكرة عندما يتسبب خطأ في الصفحة في استخدام الصفحة بشكل تدريجي لمزيد من ذاكرة أكبر بمرور الوقت.
- أداء الصفحة السيئ بشكل مستمر: قد يكون هذا أحد أعراض انتفاخ الذاكرة. ذاكرة يحدث انتفاخ الصفحة عندما تستخدم الصفحة ذاكرة أكبر مما يلزم للحصول على السرعة المثلى للصفحة.
- يتأخر أداء الصفحة أو يبدو أنّه يتم إيقافها مؤقتًا بشكل متكرر. وقد يكون هذا أحد أعراض تجميع البيانات المهملة بشكل متكرر. يحدث تجميع البيانات المهملة عندما يستعيد المتصفح الذاكرة. المتصفح وقت حدوث ذلك. أثناء المجموعات، يتم إيقاف تنفيذ جميع النصوص البرمجية مؤقتًا. لذلك إذا حاول المتصفح جمع البيانات غير الضرورية بشكل كبير، سيتوقف تنفيذ النص البرمجي مؤقتًا كثيرًا.
انتفاخ الذاكرة: ما مقدار "أكبر من اللازم"؟
من السهل تحديد تسرّب الذاكرة. إذا كان الموقع يستخدم بشكل تدريجي المزيد والمزيد من الذاكرة، فقد هناك تسرب. لكن تحديد حجم البيانات المتضخمة في الذاكرة يصعب بعض الشيء. ما الذي ينطبق على "استخدام مساحة كبيرة جدًا من الذاكرة"؟
ما من أرقام ثابتة هنا، لأنّ الأجهزة والمتصفحات المختلفة لها إمكانيات مختلفة. قد تتعطل الصفحة نفسها التي تعمل بسلاسة على هاتف ذكي متطور على هاتف ذكي منخفض المستوى.
المفتاح هنا هو استخدام نموذج RAIL والتركيز على المستخدمين. التعرّف على الأجهزة الرائجة مع المستخدمين، ثم اختبار الصفحة على هذه الأجهزة. إذا كانت التجربة تتم بشكل متسق سيئ، ربما تجاوزت الصفحة قدرات الذاكرة لهذه الأجهزة.
مراقبة استخدام الذاكرة في الوقت الفعلي باستخدام "إدارة مهام Chrome"
يمكنك استخدام "إدارة مهام Chrome" كنقطة بداية للتحقيق في مشكلة الذاكرة. مدير المهام هي شاشة تعمل في الوقت الفعلي لإعلامك بحجم الذاكرة التي تستخدمها إحدى الصفحات حاليًا.
اضغط على Shift+Esc أو انتقل إلى قائمة Chrome الرئيسية واختر مزيد من الأدوات > إدارة المهام من أجل افتح إدارة المهام.
انقر بزر الماوس الأيمن على عنوان الجدول في "إدارة المهام" وفعِّل ذاكرة JavaScript.
يوضح لك هذان العمودان أشياء مختلفة حول كيفية استخدام صفحتك للذاكرة:
- يمثّل عمود الذاكرة الذاكرة الأصلية. يتم تخزين عُقد DOM في الذاكرة الأصلية. إذا كان هذا تزداد، يتم إنشاء عُقد DOM.
- ويمثّل عمود ذاكرة JavaScript كومة JavaScript. يحتوي هذا العمود على قيمتين. تشير رسالة الأشكال البيانية القيمة التي تهمك هي الرقم المباشر (الرقم الموجود بين قوسين). الرقم المباشر يمثل حجم الذاكرة التي تستخدمها العناصر التي يمكن الوصول إليها على صفحتك. إذا كان هذا الرقم زيادة، فإما أن يتم إنشاء كائنات جديدة، أو أن العناصر الموجودة تزداد.
عرض صور تسرّب الذاكرة من خلال تسجيلات الأداء
يمكنك أيضًا استخدام لوحة "الأداء" كنقطة بداية أخرى في التحقيق. الأداء في تصور استخدام ذاكرة الصفحة بمرور الوقت.
- افتح لوحة الأداء في "أدوات مطوري البرامج".
- فعِّل مربّع الاختيار الذاكرة.
- سجِّل تسجيلاً.
لعرض تسجيلات الذاكرة الخاصة بالأداء، يمكنك استخدام الرمز التالي:
var x = [];
function grow() {
for (var i = 0; i < 10000; i++) {
document.body.appendChild(document.createElement('div'));
}
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
في كل مرة يتم فيها الضغط على الزر المُشار إليه في الرمز، يتم إلحاق عشرة آلاف عُقدة div.
إلى نص المستند، ويتم دفع سلسلة مكونة من مليون حرف x إلى المصفوفة x.
يؤدي تشغيل هذا الرمز إلى إنشاء تسجيل "المخطط الزمني" مثل لقطة الشاشة التالية:
أولاً، شرح لواجهة المستخدم. الرسم البياني لـ HEAP في اللوحة نظرة عامة (أدناه NET) كومة من عناصر JS. تظهر أسفل اللوحة نظرة عامة اللوحة عرض مضاد. يمكنك هنا مراجعة استخدام الذاكرة مقسمًا حسب كومة JavaScript (مثل الرسم البياني HEAP في الجزء نظرة عامة)، المستندات وعُقد DOM والمستمعين وذاكرة وحدة معالجة الرسومات. يؤدي تعطيل مربع اختيار إلى إخفائه من الرسم البياني.
الآن، تحليل التعليمة البرمجية مقارنة بلقطة الشاشة. إذا نظرت إلى عدّاد العقدة (
باللون الأخضر) يمكنك أن ترى أنه يتطابق تمامًا مع التعليمة البرمجية. يزداد عدد العُقد في
خطوات منفصلة. ويمكنك افتراض أنّ كل زيادة في عدد العُقد هي استدعاء إلى grow(). شهادة JS
الرسم البياني لأجزاء من الذاكرة (الرسم البياني الأزرق) ليس بسيطًا. وتماشيًا مع أفضل الممارسات، فإن الانخفاض الأول
هي في الواقع عملية إجبارية لجمع البيانات غير المرغوب فيها (يتم تحقيقها من خلال الضغط على زر جمع البيانات غير المرغوب فيها). بالنسبة
تقدّم التسجيل ويمكنك ملاحظة ارتفاع كبير في حجم كومة عناصر JavaScript. وهذا أمر طبيعي ومتوقع:
ينشئ رمز JavaScript عُقد DOM عند كل نقرة على الزر ويقوم بالكثير من العمل عندما
تؤدي إلى إنشاء السلسلة المكونة من مليون حرف. الأمر الأساسي هو انتهاء كومة JavaScript
أعلى مما بدأ (تكون "البداية" هنا هي النقطة التي تلي عملية جمع البيانات غير المرغوب فيها التي يتم فرضها). ضِمن
في الواقع، إذا رأيت هذا النمط لزيادة حجم كومة عناصر JavaScript أو حجم العقدة،
حدوث تسرب للذاكرة.
اكتشِف تسرّبات ذاكرة شجرة نموذج العناصر (DOM) التي تم فصلها باستخدام لقطات لأجزاء من الذاكرة
يمكن أن تكون عقدة DOM غير مكتملة فقط في حالة عدم وجود مراجع لها من إما شجرة DOM أو رمز JavaScript يُطلق على العقدة بأنها "مفصلة" عند إزالته من شجرة نموذج العناصر في المستند إلا أن بعض رموز JavaScript لا تزال ترجع إليه تعد عُقد DOM المنفصلة سببًا شائعًا لتسرّب الذاكرة. هذا النمط كيفية استخدام أدوات مطوري البرامج تحليل لقطات لأجزاء من الذاكرة لتحديد العُقد المنفصلة.
في ما يلي مثال بسيط على عُقد DOM المنفصلة.
var detachedTree;
function create() {
var ul = document.createElement('ul');
for (var i = 0; i < 10; i++) {
var li = document.createElement('li');
ul.appendChild(li);
}
detachedTree = ul;
}
document.getElementById('create').addEventListener('click', create);
يؤدي النقر على الزر المشار إليه في الرمز إلى إنشاء عقدة ul مع عشرة li عناصر ثانوية. هذه العُقد
تتم الإشارة إليها بواسطة الرمز البرمجي ولكنها غير موجودة في شجرة عناصر DOM، لذا فهي منفصلة.
اللقطات المتعدّدة هي إحدى طرق تحديد العُقد المنفصلة. وكما يظهر من اسم، تعرض لك لقطات لأجزاء من الذاكرة طريقة توزيع الذاكرة بين كائنات JS وعُقد DOM في الصفحة عند حدوث نبذة عني.
لإنشاء لقطة، افتح "أدوات مطوري البرامج" وانتقِل إلى لوحة الذاكرة، ثم اختَر جزء من الذاكرة. زر الاختيار "لقطة"، ثم اضغط على زرّ التقاط لقطة.
قد تستغرق معالجة اللقطة وتحميلها بعض الوقت. عند الانتهاء، اختَره من يسار الشاشة. (باسم HEAP SNAPSHOTS).
اكتب Detached في مربّع النص فلتر الفئات للبحث عن أشجار DOM المنفصلة.
وسِّع القيراط لاكتشاف شجرة منفصلة.
تحتوي العُقد المميزة باللون الأصفر على مراجع مباشرة إليها من رمز JavaScript. تم تمييز العُقد الأحمر الفاتح ليس على مراجع مباشرة. وهي تعيش فقط لأنها جزء من العقدة الصفراء شَجَرَة بشكلٍ عام، تحتاج إلى التركيز على العُقد الصفراء. أصلح الرمز بحيث لا تكون العقدة الصفراء صالحة لفترة أطول مما ينبغي، كما يمكنك التخلص من العقد الحمراء التي تشكل جزءًا من لشجرة العقدة الصفراء.
انقر على العقدة الصفراء لمزيد من التحقق. في لوحة الكائنات، يمكنك الاطّلاع على المزيد من
المعلومات الخاصة بالرمز الذي تشير إليها. على سبيل المثال، يمكنك في لقطة الشاشة أدناه أن ترى
يشير إلى أن المتغير detachedTree يشير إلى العقدة. لإصلاح تسرب الذاكرة المحدد هذا، يمكنك
ستدرس الرمز الذي يستخدم detachedTree والتأكد من إزالة إشارته إلى العقدة
عندما لا تعود هناك حاجة إليه.
التعرّف على تسرُّب الذاكرة لأجزاء من JavaScript باستخدام "المخططات الزمنية للتخصيص"
"المخطط الزمني لتخصيص" هو أداة أخرى يمكنها مساعدتك في تتبُّع تسرُّب الذاكرة في كومة JavaScript البرمجية.
لتوضيح المخطط الزمني للتخصيص، ضع الرمز التالي في الاعتبار:
var x = [];
function grow() {
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
في كل مرة يتم فيها دفع الزر المشار إليه في التعليمة البرمجية، يتم إنشاء سلسلة مكونة من مليون حرف
تمت الإضافة إلى المصفوفة x.
لتسجيل مخطّط زمني لتخصيص المحتوى، افتح "أدوات مطوري البرامج" وانتقِل إلى لوحة الملفات الشخصية وانقر على تسجيل.
زر اختيار "المخطط الزمني لتخصيص": اضغط على الزر بدء، ونفِّذ الإجراء الذي تشكّ فيه.
يتسبب في تسرُّب الذاكرة، ثم اضغط على زر إيقاف التسجيل
(
) عندما
لقد انتهيتَ.
أثناء التسجيل، لاحظ ما إذا كانت هناك أي أشرطة زرقاء تظهر في "المخطط الزمني" للتوزيع، كما هو الحال في لقطة الشاشة أدناه.
وتمثل هذه الأشرطة الزرقاء عمليات توزيع جديدة للذاكرة. هذه التخصيصات الجديدة للذاكرة هي المقترحة لتسريبات الذاكرة. يمكنك تكبير أي شريط لفلترة لوحة المنشئ لإظهار الكائنات التي تم تخصيصها خلال الإطار الزمني المحدد.
وسِّع العنصر وانقر على قيمته للاطّلاع على مزيد من التفاصيل عنه في لوحة الكائن. بالنسبة
في لقطة الشاشة أدناه، ومن خلال عرض تفاصيل العنصر الذي تم تخصيصه مؤخرًا،
ستتمكّن من معرفة أنّه قد تم تخصيصها للمتغيّر x في نطاق Window.
التحقق من تخصيص الذاكرة حسب الدالة
استخدِم النوع عينة التخصيص في لوحة الذاكرة لعرض تخصيص الذاكرة حسب وظيفة JavaScript.
- حدِّد زر الاختيار عينة التخصيص. إذا كان هناك عامل في الصفحة، يمكنك يمكنك اختيار ذلك كهدف للتحليل باستخدام القائمة المنسدلة بجانب الزر ابدأ.
- اضغط على زر البدء.
- نفِّذ الإجراءات على الصفحة التي تريد التحقيق فيها.
- اضغط على الزر إيقاف عند الانتهاء من جميع الإجراءات.
يعرض لك "أدوات مطوّري البرامج" تفاصيل تخصيص الذاكرة حسب الوظيفة. طريقة العرض التلقائية هي كثيفة (الأسفل) للأعلى)، الذي يعرض الدوال التي خصّصت أكبر قدر من الذاكرة في أعلى الصفحة.
رصد مجموعات القمامة بشكل متكرر
إذا كانت صفحتك تتوقّف مؤقتًا بشكل متكرر، قد يعني ذلك أنّك تواجه مشاكل في جمع البيانات غير المرغوب فيها.
يمكنك استخدام "إدارة مهام Google" في Chrome أو تسجيلات الذكريات في "المخطط الزمني" لرصد مجلّد البيانات غير المرغوب فيها بشكل متكرر. المجموعات. في "إدارة المهام"، ارتفاع وانخفاض الذاكرة أو ذاكرة JavaScript تمثل مجموعات البيانات غير الضرورية بشكل متكرر. ارتفاع وهبوط بشكل متكرر في تسجيلات "المخطط الزمني" تشير الرسوم البيانية لعناصر JavaScript أو كومة العناصر في JavaScript إلى تجميع البيانات غير المرغوب فيها بشكل متكرر.
بعد تحديد المشكلة، يمكنك استخدام تسجيل "المخطّط الزمني" المخصّص لتخصيص المحتوى لمعرفة تخصيص الذاكرة والدوال التي تتسبب في التخصيصات.