مقدمة: لماذا يعتبر تحليل أداء TypeScript مهمًا للأداء
\nعندما تكتب تطبيقًا بلغة TypeScript، قد يعمل بسرعة على البيانات الصغيرة، ولكن مع نمو المشروع تبدأ نقاط الضعف في الظهور — وهي أجزاء الكود التي تبطئ التنفيذ. يساعد تحليل الأداء في إيجاد هذه الأماكن المشكلة وفهم أين يتم إنفاق معظم الوقت.
\nفي هذه المقالة، سنشرح كيفية تحليل أداء كود TypeScript باستخدام الأدوات المدمجة في المتصفح و Node.js. ستتعلم كيفية إيجاد الدوال البطيئة، وتحليل مكدس الاستدعاءات، وتحسين الأجزاء الحرجة.
\nالمقالة موجهة للمطورين المبتدئين الذين هم على دراية بأساسيات TypeScript ويريدون تحسين أداء تطبيقاتهم.
\n\nالمفاهيم الأساسية لتحليل الأداء
\nتحليل الأداء هو عملية جمع بيانات حول كيفية تنفيذ البرنامج: كم من الوقت تستغرقه الدوال، وكم مرة يتم استدعاؤها، وما هي الموارد المستهلكة.
\nفي سياق TypeScript، من المهم فهم عدة مقاييس رئيسية:
\n- \n
- وقت التنفيذ — عدد المللي ثانية التي تستغرقها كل دالة. \n
- عدد الاستدعاءات — كم مرة يتم استدعاء الدالة. \n
- الذاكرة — مقدار الذاكرة المخصصة والمحررة. \n
- مكدس الاستدعاءات — تسلسل استدعاء الدوال. \n
لتحليل أداء كود TypeScript، يمكن استخدام أدوات المتصفح (Chrome DevTools) وأدوات Node.js (مثل --inspect أو clinic.js).
أدوات تحليل أداء TypeScript
\nChrome DevTools لكود العميل
\nإذا كان تطبيق TypeScript الخاص بك يعمل في المتصفح، فإن أفضل أداة هي Chrome DevTools المدمجة. افتح علامة التبويب Performance واضغط على زر التسجيل. قم بتنفيذ إجراء على الصفحة، أوقف التسجيل واحصل على الجدول الزمني.
\nمثال على التحليل: ترى أن الدالة processData تستغرق 300 مللي ثانية. هذه إشارة للتحسين.
Node.js وملف تعريف الأداء المدمج
\nلكود TypeScript من جانب الخادم (Node.js)، استخدم العلم --inspect أو --prof. على سبيل المثال:
node --inspect dist/app.js\nثم افتح chrome://inspect في المتصفح واتصل بالعملية. ستحصل على نفس إمكانيات DevTools، ولكن لكود الخادم.
clinic.js — أداة بسيطة لـ Node.js
\nقم بتثبيت clinic.js بشكل عام:
npm install -g clinic\nقم بتشغيل تحليل الأداء:
\nclinic doctor -- node dist/app.js\nستعرض الأداة تقريرًا مرئيًا مع توصيات.
\n\nإيجاد نقاط الضعف عمليًا
\nمثال 1: فرز مصفوفة بطيء
\nلنفترض أن لديك دالة لفرز مصفوفة كبيرة من الكائنات:
\ninterface User {\n id: number;\n name: string;\n age: number;\n}\n\nfunction sortUsers(users: User[]): User[] {\n return users.sort((a, b) => {\n // مقارنة سلاسل بطيئة\n const nameA = a.name.toLowerCase();\n const nameB = b.name.toLowerCase();\n if (nameA < nameB) return -1;\n if (nameA > nameB) return 1;\n return 0;\n });\n}\nعند تحليل الأداء، ستلاحظ أن toLowerCase() يتم استدعاؤها لكل مقارنة، وقد يكون عددها O(n log n). نقطة الضعف هي التحويل المتكرر للسلاسل.
التحسين: قم بتحويل السلاسل مسبقًا:
\nfunction sortUsersOptimized(users: User[]): User[] {\n return users\n .map(user => ({\n ...user,\n _lowerName: user.name.toLowerCase()\n }))\n .sort((a, b) => {\n if (a._lowerName < b._lowerName) return -1;\n if (a._lowerName > b._lowerName) return 1;\n return 0;\n