كيف تكتشف مشاكل أداء Frontend باستخدام Chrome DevTools

أغلب مشاكل الفرونت إند مش محتاجة تخمين - محتاجة بس تعرف تبص فين.

يعني مثلاً: الصفحة بطيئة؟ الموبايل بيسخن؟ الأنيميشن بتقطع؟ كل ده ليه سبب واضح لو عرفت تستخدم الأدوات الصح.

وأقوى أداتين بيدوك الرؤية دي موجودين قدامك في 𝐂𝐡𝐫𝐨𝐦𝐞 𝐃𝐞𝐯𝐓𝐨𝐨𝐥𝐬، بس للأسف أقل حاجة بنستخدمها: الـ 𝐏𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞 𝐩𝐚𝐧𝐞𝐥 والـ 𝐌𝐞𝐦𝐨𝐫𝐲 𝐩𝐚𝐧𝐞𝐥.

وعشان كده خليني أشاركك 5 سيناريوهات واجهتني فعلاً في شغلي - وإزاي حليتها بالأدوات دي:

🔴 الموقع بيبطأ مع الوقت - 𝐒𝐥𝐨𝐰 𝐌𝐞𝐦𝐨𝐫𝐲 𝐋𝐞𝐚𝐤

الموقع شغال بسرعة في الأول، لكن بعد 10-15 دقيقة بيبدأ يتقل ويبطأ؟ ده علامة كلاسيكية على تسريب في الذاكرة (Memory Leak).

افتح 𝐌𝐞𝐦𝐨𝐫𝐲 𝐩𝐚𝐧𝐞𝐥، خد snapshot، استخدم الموقع شوية، وخد snapshot تاني. لو الذاكرة بتزيد باستمرار ومش بتنزل، يبقى في حاجة مش بتتحرر.

قارن بين الـ snapshots عشان تشوف أنهي objects بتكبر - غالباً هتلاقي arrays أو event listeners مش اتمسحت.

💡 اعمل snapshot قبل وبعد كل action مهم (زي فتح modal)، وشوف لو الذاكرة رجعت طبيعي ولا لأ.

🟠 حاسس إن الموقع بقى تقيل؟! - 𝐏𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞 𝐖𝐚𝐫𝐧𝐢𝐧𝐠 𝐒𝐢𝐠𝐧𝐬

خلي بالك من العلامات دي:

الضغط على الأزرار بقى أبطأ

الـ renders متأخرة

الـ animations مش سلسة

إحساس عام إن الـ UI بقى تقيل

لما تحس بأي حاجة من دي، خد Performance recording - بتاخد 20 ثانية بس، لكن بتوفر ساعات debugging.

💡 سجل 5-10 ثواني بس من التفاعل البطيء.

🟡 الزرار مش بيستجيب على طول؟ - 𝐒𝐥𝐨𝐰 𝐔𝐬𝐞𝐫 𝐈𝐧𝐭𝐞𝐫𝐚𝐜𝐭𝐢𝐨𝐧𝐬

دوست على زرار ومفيش رد فعل فوري؟ ده معناه في حاجة بتاخد وقت في الكود.

افتح 𝐏𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞 𝐩𝐚𝐧𝐞𝐥 وسجل وانت بتدوس الزرار. هيوريلك المتصفح صرف الوقت فين: scripting، rendering، ولا painting.

غالباً المشكلة في:

الـ Loop تقيل

الـ State updates مش ضرورية

سلسلة re-renders ورا بعض

💡 دور على الـ Long Tasks (أي حاجة لونها أحمر وأخدت أكتر من 50ms).

🟢 الصفحة بترقص لوحدها؟ - 𝐋𝐚𝐲𝐨𝐮𝐭 𝐒𝐡𝐢𝐟𝐭𝐬

لاحظت إن العناصر بتتحرك أو بتقفز لما بتعمل scroll أو بتكتب؟ ده بيحصل لما المتصفح بيعمل style recalculations مكلفة أو layout thrashing.

في 𝐏𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞 𝐩𝐚𝐧𝐞𝐥، افحص قسم Rendering. لو لقيت layout أو style recalculation كتير مع الـ scroll، دي المشكلة.

الحل: اعمل batching للـ DOM updates.

💡 استخدم transform و opacity بدل width و height للـ animations.

🔵 اللستة بتكبر والموقع بيبطأ؟ - 𝐆𝐫𝐨𝐰𝐢𝐧𝐠 𝐋𝐢𝐬𝐭𝐬 𝐈𝐬𝐬𝐮𝐞𝐬

عندك list بتضيف وتشيل منها عناصر، لكن الموقع بيبقى أبطأ مع كل مرة؟

خد heap snapshot قبل وبعد ما تضيف/تشيل عناصر. لو العناصر المشالة لسه موجودة في الذاكرة، يبقى لسه في reference ليهم في الكود.

غالباً المشكلة في:

الـ Array عامة لسه بتخزن references

الـ Event listeners مش اتمسحت

💡 استخدم WeakMap أو WeakSet لو محتاج تخزن references مؤقتة.

الخلاصة؟

مشاكل الأداء مش غامضة - هي بس مخفية.

الـ 𝐂𝐡𝐫𝐨𝐦𝐞 𝐃𝐞𝐯𝐓𝐨𝐨𝐥𝐬 بيديك الرؤية اللي محتاجها عشان تلاقيها وتحلها بسرعة.

اتقن الأدوات دي، والـ debugging هيبقى متوقع.

طبق النقاط دي من النهاردة وهتشوف الفرق