تحليل أداء كود TypeScript: إيجاد نقاط الاختناق

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

مقدمة: لماذا تحليل أداء TypeScript؟

TypeScript هي أداة قوية لتطوير التطبيقات القابلة للتوسع، ولكن حتى الكود الأكثر كتابة بالأنواع يمكن أن يعاني من مشاكل أداء خفية. تنشأ الاختناقات من الخوارزميات غير الفعالة، وعمليات الإدخال/الإخراج المفرطة، وسوء إدارة الذاكرة، أو العمليات الحسابية البطيئة. يتيح لك تحليل الأداء تحديد هذه المناطق وتحسينها بشكل هادف.

في هذه المقالة، سنستكشف طرقًا عملية لتحليل أداء كود TypeScript: من أدوات المتصفح المدمجة إلى الأدوات المساعدة المتخصصة لـ Node.js. ستتعلم كيفية العثور على الدوال البطيئة، وتحليل مكدس الاستدعاءات، واتخاذ قرارات مبنية على البيانات.

أدوات تحليل أداء TypeScript

لا يختلف تحليل أداء كود TypeScript عن تحليل أداء JavaScript، حيث أن TypeScript يتم تجميعها إلى JS. ومع ذلك، من المهم مراعاة أن كود TypeScript الأصلي قد يحتوي على تجريدات إضافية (Generics، Decorators، Interfaces) والتي، بعد التجميع، يمكن أن تولد أنماطًا غير واضحة.

1. أداء Chrome DevTools

لتطبيقات الواجهة الأمامية، أفضل خيار هو علامة التبويب "Performance" في Chrome DevTools. يقوم بتسجيل نشاط الصفحة ويعرض مخططًا شعلة (flame chart)، ووقت تنفيذ الدوال، والأحداث، واستخدام الذاكرة.

كيفية الاستخدام:

افتح DevTools (F12) ← علامة التبويب "Performance".
انقر على زر التسجيل (الدائرة)، وقم بالإجراء المطلوب على الصفحة.
أوقف التسجيل وادرس المخطط الشعلة.

مثال: إذا كان لديك دالة معالجة مصفوفة تستغرق أكثر من 100 مللي ثانية، ستراها ككتلة عريضة على الرسم البياني. انقر عليها - سيعرض DevTools الكود المصدري (إذا كانت خرائط المصدر مفعلة) ووقت التنفيذ.

// Original TypeScript codefunction processItems(items: number[]): number[] {  return items    .filter(x => x > 10)    .map(x => x * 2)    .reduce((acc, val) => acc + val, 0);}

بعد التحليل، قد ترى أن filter و map تنشئان مصفوفات وسيطة، مما يبطئ الأداء على مجموعات البيانات الكبيرة. التحسين هو استبدال السلسلة بتمريرة واحدة باستخدام for أو reduce.

2. محلل الأداء المدمج في Node.js

لكود Node.js من جانب الخادم، استخدم محلل V8 المدمج. يقوم بجمع عينات من مكدس الاستدعاءات ويسمح لك بتحليل أي الدوال تستهلك معظم الوقت.

التشغيل:

node --prof your-compiled-file.js

بعد التنفيذ، سيتم إنشاء ملف باسم isolate-0x...-v8.log. قم بتحويله إلى تنسيق قابل للقراءة:

node --prof-process isolate-0x...-v8.log > profile.txt

في الملف الناتج، سترى جدولًا بأعمدة: ticks (عدد العينات)، total (الوقت الإجمالي)، nonlib (الوقت باستثناء المكتبات)، واسم الدالة. الدوال ذات أعلى عدد من ticks هي المرشحة للتحسين.

3. ts-node وخرائط المصدر

عند التطوير باستخدام TypeScript، غالبًا ما يُستخدم ts-node لتشغيل الكود دون تجميع مسبق. لتحليل الأداء، تأكد من تمكين خرائط المصدر في tsconfig.json:

{  "compilerOptions": {    "sourceMap": true,    "inlineSourceMap": true  }}

ثم قم بتشغيل التطبيق مع العلم --inspect:

node --inspect -r ts-node/register src/app.ts

افتح Chrome وانتقل إلى chrome://inspect. سترى تطبيقك وستتمكن من استخدام DevTools لتحليل الأداء، وعرض كود TypeScript الأصلي بدلاً من JavaScript المترجم.