TypeScript कोड का प्रोफाइलिंग: व्यवहार में अड़चनें खोजना

TypeScript कोड का प्रोफाइलिंग: व्यवहार में अड़चनें खोजना

जब आपका TypeScript प्रोजेक्ट धीमा होने लगता है और उपयोगकर्ता देरी की शिकायत करते हैं, तो प्रोफाइलिंग का समय आ जाता है। प्रोफाइलिंग केवल "यह देखना नहीं है कि क्या धीमा है", बल्कि कोड के प्रदर्शन में अड़चनों की पहचान करने का एक व्यवस्थित दृष्टिकोण है। इस लेख में, हम वास्तविक उदाहरणों और उपकरणों के साथ TypeScript कोड के प्रोफाइलिंग के व्यावहारिक तरीकों पर चर्चा करेंगे।

TypeScript कोड को प्रोफाइल क्यों करें?

TypeScript JavaScript में कंपाइल होता है, और JS में निहित सभी प्रदर्शन समस्याएं TS में स्थानांतरित हो जाती हैं। हालांकि, TypeScript अपनी बारीकियां जोड़ता है: टाइपिंग, डेकोरेटर, जेनेरिक अप्रत्याशित ओवरहेड पैदा कर सकते हैं। प्रोफाइलिंग इन सवालों के जवाब देने में मदद करता है:

\n
• कौन सा फंक्शन सबसे लंबे समय तक चलता है?
\n
• मेमोरी लीक कहाँ हो रही है?
\n
• एनिमेशन 60fps पर क्यों रुक रहा है?
\n
• किस एल्गोरिदम को अनुकूलन की आवश्यकता है?
\n

TypeScript प्रोफाइलिंग के लिए उपकरण

Chrome DevTools (ब्राउज़र कोड के लिए)

फ्रंटएंड के लिए सबसे शक्तिशाली उपकरण। Performance टैब खोलें, Record दबाएं, कार्रवाई करें और रिकॉर्डिंग रोकें। आपको flamegraph दिखाई देगा - फंक्शन कॉल और उनके निष्पादन समय का विज़ुअलाइज़ेशन।

// प्रोफाइलिंग के लिए धीमे कोड का उदाहरण\nfunction heavyCalculation(iterations: number): number {\n    let result = 0;\n    for (let i = 0; i < iterations; i++) {\n        result += Math.sqrt(i) * Math.sin(i);\n    }\n    return result;\n}\n\n// ब्राउज़र कंसोल में चलाएं, फिर प्रोफाइल करें\nheavyCalculation(1000000);

Node.js — अंतर्निहित प्रोफाइलर

सर्वर कोड के लिए --inspect फ्लैग और Chrome DevTools का उपयोग करें, या लॉग जनरेट करने के लिए अंतर्निहित --prof का उपयोग करें।

// server.ts\nimport express from 'express';\n\nconst app = express();\n\napp.get('/heavy', (req, res) => {\n    const data = processData(10000);\n    res.json({ result: data });\n});\n\nfunction processData(size: number): number[] {\n    const arr: number[] = [];\n    for (let i = 0; i < size; i++) {\n        arr.push(i * Math.random());\n    }\n    return arr.sort((a, b) => a - b);\n}\n\napp.listen(3000);\n// चलाएं: node --prof dist/server.js

सटीक माप के लिए Benchmark.js

जब दो कार्यान्वयनों की तुलना करने की आवश्यकता हो, तो benchmark लाइब्रेरी का उपयोग करें।

import Benchmark from 'benchmark';\n\nconst suite = new Benchmark.Suite();\n\n// धीमा विकल्प\nfunction slowSearch(arr: number[], target: number): boolean {\n    for (let i = 0; i < arr.length; i++) {\n        if (arr[i] === target) return true;\n    }\n    return false;\n}\n\n// Set के साथ तेज़ विकल्प\nfunction fastSearch(arr: number[], target: number): boolean {\n    const set = new Set(arr);\n    return set.has(target);\n}\n\nconst testArray = Array.from({ length: 10000 }, (_, i) => i);\n\nsuite\n  .add('slowSearch', () => slowSearch(testArray, 9999))\n  .add('fastSearch', () => fastSearch(testArray, 9999))\n  .on('cycle', (event: any) => console.log(String(event.target)))\n  .on('complete', function(this: any) {\n    console.log('Fastest is ' + this.filter('fastest').map('name'));\n  })\n  .run({ async: true });

अड़चनें खोजने के व्यावहारिक उदाहरण

उदाहरण 1: क्लोजर के माध्यम से मेमोरी लीक

React अनुप्रयोगों में एक विशिष्ट समस्या - क्लोजर जो बड़ी वस्तुओं के संदर्भ रखते हैं।

// समस्याग्रस्त कोड\nfunction createHeavyComponent() {\n    const hugeData = new Array(1000000).fill('data');\n    \n    return {\n        getData: () => hugeData, // क्लोजर hugeData को रखता है\n        updateData: (newData: string) => {\n            // म्यूटेशन, लेकिन संदर्भ बना रहता है\n            hugeData.push(newData);\n        }\n    };\n}\n\nconst component = createHeavyComponent();\n// hugeData GC द्वारा एकत्र नहीं किया जाएगा जब तक component मौजूद है

<