நிகழ்வு சுழற்சி: ஒத்திசைவற்ற ஜாவாஸ்கிரிப்டைப் புரிந்துகொள்ளுதல்

ஜாவாஸ்கிரிப்ட், இணையத்தின் மொழி, அதன் ஆற்றல் மற்றும் ஊடாடும் மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவங்களை உருவாக்கும் திறனுக்காக அறியப்படுகிறது. இருப்பினும், அதன் மையத்தில், ஜாவாஸ்கிரிப்ட் ஒற்றை-திரிக்கப்பட்டது, அதாவது ஒரு நேரத்தில் ஒரு பணியை மட்டுமே செயல்படுத்த முடியும். இது ஒரு சவாலை முன்வைக்கிறது: ஒரு சேவையகத்திலிருந்து தரவைப் பெறுவது அல்லது பயனரின் உள்ளீட்டிற்காகக் காத்திருப்பது போன்ற நேரத்தை எடுத்துக்கொள்ளும் பணிகளை ஜாவாஸ்கிரிப்ட் எவ்வாறு கையாள்கிறது, மற்ற பணிகளின் செயல்பாட்டைத் தடுக்காமல் மற்றும் பயன்பாட்டைப் பதிலளிக்காமல் செய்வது எப்படி? பதில் நிகழ்வு சுழற்சியில் உள்ளது, ஒத்திசைவற்ற ஜாவாஸ்கிரிப்ட் எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்துகொள்வதில் ஒரு அடிப்படை கருத்து.

நிகழ்வு சுழற்சி என்றால் என்ன?

நிகழ்வு சுழற்சி என்பது ஜாவாஸ்கிரிப்டின் ஒத்திசைவற்ற நடத்தையை இயக்கும் எஞ்சின் ஆகும். இது ஜாவாஸ்கிரிப்ட் ஒற்றை-திரிக்கப்பட்டதாக இருந்தாலும், ஒரே நேரத்தில் பல செயல்பாடுகளைக் கையாள அனுமதிக்கும் ஒரு பொறிமுறையாகும். நேரத்தை எடுத்துக்கொள்ளும் செயல்பாடுகள் முக்கிய திரியைத் தடுக்காமல் இருப்பதை உறுதிசெய்து, பணிகளின் ஓட்டத்தை நிர்வகிக்கும் ஒரு போக்குவரத்து கட்டுப்படுத்தி என்று இதைக் கருதுங்கள்.

நிகழ்வு சுழற்சியின் முக்கிய கூறுகள்

• அழைப்பு அடுக்கு: இது உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டின் செயல்பாடு நடக்கும் இடம். ஒரு செயல்பாடு அழைக்கப்படும்போது, அது அழைப்பு அடுக்கில் சேர்க்கப்படும். செயல்பாடு முடிந்ததும், அது அடுக்கிலிருந்து அகற்றப்படும்.
• வலை APIகள் (அல்லது உலாவி APIகள்): இவை உலாவி (அல்லது Node.js) வழங்கும் APIகள் ஆகும், அவை `setTimeout`, `fetch` மற்றும் DOM நிகழ்வுகள் போன்ற ஒத்திசைவற்ற செயல்பாடுகளைக் கையாள்கின்றன. அவை முக்கிய ஜாவாஸ்கிரிப்ட் திரியில் இயங்காது.
• திரும்ப அழைப்பு வரிசை (அல்லது பணி வரிசை): இந்த வரிசை செயல்படுத்தக் காத்திருக்கும் திரும்ப அழைப்புகளைக் கொண்டுள்ளது. ஒரு ஒத்திசைவற்ற செயல்பாடு முடிந்ததும் (எ.கா., ஒரு டைமர் காலாவதியான பிறகு அல்லது ஒரு சேவையகத்திலிருந்து தரவு பெறப்பட்ட பிறகு) இந்த திரும்ப அழைப்புகள் வலை APIகளால் வரிசையில் வைக்கப்படுகின்றன.
• நிகழ்வு சுழற்சி: இது அழைப்பு அடுக்கு மற்றும் திரும்ப அழைப்பு வரிசையை தொடர்ந்து கண்காணிக்கும் முக்கிய கூறு ஆகும். அழைப்பு அடுக்கு காலியாக இருந்தால், நிகழ்வு சுழற்சி திரும்ப அழைப்பு வரிசையிலிருந்து முதல் திரும்ப அழைப்பை எடுத்து, செயல்படுத்தலுக்காக அழைப்பு அடுக்கில் தள்ளுகிறது.

`setTimeout` ஐப் பயன்படுத்தி ஒரு எளிய உதாரணத்துடன் இதை விளக்கலாம்:

console.log('தொடக்கம்');

setTimeout(() => {
 console.log('setTimeout உள்ளே');
}, 2000);

console.log('முடிவு');

குறியீடு எவ்வாறு செயல்படுகிறது என்பது இங்கே:

1. `console.log('தொடக்கம்')` அறிக்கை செயல்படுத்தப்பட்டு கன்சோலுக்கு அச்சிடப்படுகிறது.
2. `setTimeout` செயல்பாடு அழைக்கப்படுகிறது. இது ஒரு வலை API செயல்பாடு. திரும்ப அழைப்பு செயல்பாடு `() => { console.log('setTimeout உள்ளே'); }` `setTimeout` செயல்பாட்டிற்கு அனுப்பப்படுகிறது, 2000 மில்லி விநாடிகள் (2 வினாடிகள்) தாமதத்துடன்.
3. `setTimeout` ஒரு டைமரைத் தொடங்குகிறது, மேலும் முக்கியமாக, முக்கிய திரியைத் *தடுக்காது*. திரும்ப அழைப்பு உடனடியாக செயல்படுத்தப்படவில்லை.
4. `console.log('முடிவு')` அறிக்கை செயல்படுத்தப்பட்டு கன்சோலுக்கு அச்சிடப்படுகிறது.
5. 2 வினாடிகளுக்குப் பிறகு (அல்லது அதற்கு மேற்பட்டவை), `setTimeout` இல் டைமர் காலாவதியாகும்.
6. திரும்ப அழைப்பு செயல்பாடு திரும்ப அழைப்பு வரிசையில் வைக்கப்படுகிறது.
7. நிகழ்வு சுழற்சி அழைப்பு அடுக்கை சரிபார்க்கிறது. அது காலியாக இருந்தால் (வேறு எந்த குறியீடும் தற்போது இயங்கவில்லை என்று பொருள்), நிகழ்வு சுழற்சி திரும்ப அழைப்பு வரிசையிலிருந்து திரும்ப அழைப்பை எடுத்து, அதை அழைப்பு அடுக்கில் தள்ளுகிறது.
8. திரும்ப அழைப்பு செயல்பாடு செயல்படுகிறது, மற்றும் `console.log('setTimeout உள்ளே')` கன்சோலுக்கு அச்சிடப்படுகிறது.

வெளியீடு பின்வருமாறு இருக்கும்:

தொடக்கம்
முடிவு
setTimeout உள்ளே

'setTimeout உள்ளே' 'முடிவு'க்கு முன்பு வரையறுக்கப்பட்டிருந்தாலும், 'முடிவு' 'setTimeout உள்ளே' க்கு *முன்பு* அச்சிடப்படுகிறது என்பதை கவனியுங்கள். இது ஒத்திசைவற்ற நடத்தையை நிரூபிக்கிறது: `setTimeout` செயல்பாடு அடுத்தடுத்த குறியீட்டின் செயல்பாட்டைத் தடுக்காது. குறிப்பிட்ட தாமதத்திற்குப் *பிறகு* மற்றும் *அழைப்பு அடுக்கு காலியாக இருக்கும்போது* திரும்ப அழைப்பு செயல்பாடு செயல்படுத்தப்படுவதை நிகழ்வு சுழற்சி உறுதி செய்கிறது.

ஒத்திசைவற்ற ஜாவாஸ்கிரிப்ட் நுட்பங்கள்

ஒத்திசைவற்ற செயல்பாடுகளைக் கையாள ஜாவாஸ்கிரிப்ட் பல வழிகளை வழங்குகிறது:

திரும்ப அழைப்புகள்

திரும்ப அழைப்புகள் மிகவும் அடிப்படையான பொறிமுறையாகும். அவை மற்ற செயல்பாடுகளுக்கு வாதங்களாக அனுப்பப்படும் செயல்பாடுகள் மற்றும் ஒரு ஒத்திசைவற்ற செயல்பாடு முடிந்ததும் செயல்படுத்தப்படுகின்றன. எளிமையானதாக இருந்தாலும், பல கூடுதலான ஒத்திசைவற்ற செயல்பாடுகளைக் கையாளும் போது திரும்ப அழைப்புகள் "திரும்ப அழைப்பு நரகம்" அல்லது "அழிவின் பிரமிடு"க்கு வழிவகுக்கும்.

function fetchData(url, callback) {
 fetch(url)
 .then(response => response.json())
 .then(data => callback(data))
 .catch(error => console.error('பிழை:', error));
}

fetchData('https://api.example.com/data', (data) => {
 console.log('பெறப்பட்ட தரவு:', data);
});

வாக்குறுதிகள்

திரும்ப அழைப்பு நரகப் சிக்கலைத் தீர்க்க வாக்குறுதிகள் அறிமுகப்படுத்தப்பட்டன. ஒரு வாக்குறுதி என்பது ஒரு ஒத்திசைவற்ற செயல்பாட்டின் இறுதி நிறைவு (அல்லது தோல்வி) மற்றும் அதன் விளைவாக வரும் மதிப்பைக் குறிக்கிறது. வாக்குறுதிகள் ஒத்திசைவற்ற குறியீட்டை மிகவும் படிக்கக்கூடியதாகவும், ஒத்திசைவற்ற செயல்பாடுகளை சங்கிலித் தொடராக்க `.then()` ஐப் பயன்படுத்துவதன் மூலமும் பிழைகளைக் கையாள `.catch()` ஐப் பயன்படுத்துவதன் மூலமும் எளிதாக நிர்வகிக்கவும் செய்கின்றன.

function fetchData(url) {
 return fetch(url)
 .then(response => response.json());
}

fetchData('https://api.example.com/data')
 .then(data => {
 console.log('பெறப்பட்ட தரவு:', data);
 })
 .catch(error => {
 console.error('பிழை:', error);
 });

Async/Await

Async/Await என்பது வாக்குறுதிகளின் மேல் கட்டப்பட்ட ஒரு தொடரியல் ஆகும். இது ஒத்திசைவற்ற குறியீட்டை ஒத்திசைவான குறியீட்டைப் போல தோற்றமளிக்கவும் செயல்படவும் செய்கிறது, இது இன்னும் படிக்கக்கூடியதாகவும் புரிந்துகொள்ள எளிதாகவும் ஆக்குகிறது. ஒரு ஒத்திசைவற்ற செயல்பாட்டை அறிவிக்க `async` முக்கிய சொல் பயன்படுத்தப்படுகிறது, மேலும் ஒரு வாக்குறுதி தீர்க்கப்படும் வரை செயல்பாட்டை இடைநிறுத்த `await` முக்கிய சொல் பயன்படுத்தப்படுகிறது. இது ஒத்திசைவற்ற குறியீட்டை மேலும் தொடர்ச்சியாக உணர வைக்கிறது, ஆழமான கூடுதலையும் தவிர்த்து, வாசிப்புத்திறனை மேம்படுத்துகிறது.

async function fetchData(url) {
 try {
 const response = await fetch(url);
 const data = await response.json();
 console.log('பெறப்பட்ட தரவு:', data);
 } catch (error) {
 console.error('பிழை:', error);
 }
}

fetchData('https://api.example.com/data');

ஒருங்கே இயங்கும் தன்மை vs. இணையான தன்மை

ஒருங்கே இயங்கும் தன்மைக்கும் இணையான தன்மைக்கும் இடையே வேறுபடுத்துவது முக்கியம். ஜாவாஸ்கிரிப்டின் நிகழ்வு சுழற்சி ஒருங்கே இயங்கும் திறனை செயல்படுத்துகிறது, அதாவது பல பணிகளை *தோற்றத்தில்* ஒரே நேரத்தில் கையாளுதல். இருப்பினும், உலாவி அல்லது Node.js இன் ஒற்றை-திரிக்கப்பட்ட சூழலில் ஜாவாஸ்கிரிப்ட், பொதுவாக முக்கிய திரியில் ஒரு நேரத்தில் ஒரு பணியை (ஒரு நேரத்தில் ஒரு பணியை) செயல்படுத்துகிறது. மறுபுறம், இணையான தன்மை என்பது பல பணிகளை *ஒரே நேரத்தில்* செயல்படுத்துவதாகும். ஜாவாஸ்கிரிப்ட் மட்டும் உண்மையான இணையான தன்மையை வழங்காது, ஆனால் வலை தொழிலாளர்கள் (உலாவிகளில்) மற்றும் `worker_threads` தொகுதி (Node.js இல்) போன்ற நுட்பங்கள் தனி திரிகளைப் பயன்படுத்துவதன் மூலம் இணையான செயல்பாட்டிற்கு அனுமதிக்கின்றன. வலை தொழிலாளர்களைப் பயன்படுத்துவது கணக்கீட்டு ரீதியாக தீவிரமான பணிகளை ஆஃப்லோட் செய்ய பயன்படுத்தப்படலாம், அவை முக்கிய திரியைத் தடுப்பதைத் தடுக்கின்றன மற்றும் வலை பயன்பாடுகளின் பதிலளிப்பை மேம்படுத்துகின்றன, இது உலகளவில் பயனர்களுக்கு பொருத்தமானது.

உண்மையான உலக எடுத்துக்காட்டுகள் மற்றும் கருத்தில் கொள்ள வேண்டியவை

வலை மேம்பாடு மற்றும் Node.js மேம்பாட்டின் பல அம்சங்களில் நிகழ்வு சுழற்சி முக்கியமானது:

• வலை பயன்பாடுகள்: பயனர் தொடர்புகளைக் கையாளுதல் (கிளிக்குகள், படிவ சமர்ப்பிப்புகள்), APIகளிலிருந்து தரவைப் பெறுதல், பயனர் இடைமுகத்தைப் புதுப்பித்தல் (UI) மற்றும் அனிமேஷன்களை நிர்வகித்தல் ஆகியவை பயன்பாட்டைப் பதிலளிக்க வைப்பதற்கு நிகழ்வு சுழற்சியை பெரிதும் நம்பியுள்ளன. உதாரணமாக, ஒரு உலகளாவிய இ-காமர்ஸ் இணையதளம் ஆயிரக்கணக்கான ஒருங்கே இயங்கும் பயனர் கோரிக்கைகளை திறமையாகக் கையாள வேண்டும், மேலும் அதன் UI மிகவும் பதிலளிக்கக்கூடியதாக இருக்க வேண்டும், இவை அனைத்தும் நிகழ்வு சுழற்சியால் சாத்தியமாகும்.
• Node.js சேவையகங்கள்: Node.js ஒற்றை Node.js சேவையக நிகழ்வு தடுத்தல் இல்லாமல் பல வாடிக்கையாளர்களுக்கு ஒரே நேரத்தில் சேவை செய்ய அனுமதிக்கும் திறமையான கிளையன் கோரிக்கைகளை கையாள நிகழ்வு சுழற்சியைப் பயன்படுத்துகிறது. உதாரணமாக, உலகம் முழுவதும் பயனர்களுடன் கூடிய அரட்டை பயன்பாடு பல ஒருங்கே இயங்கும் பயனர் இணைப்புகளை நிர்வகிக்க நிகழ்வு சுழற்சியை மேம்படுத்துகிறது. ஒரு உலகளாவிய செய்தி இணையதளத்திற்கு சேவை செய்யும் Node.js சேவையகமும் பெரிதும் பயனடைகிறது.
• APIகள்: செயல்திறன் தடைகள் இல்லாமல் ஏராளமான கோரிக்கைகளைக் கையாளக்கூடிய பதிலளிக்கக்கூடிய APIகளின் உருவாக்கத்தை நிகழ்வு சுழற்சி எளிதாக்குகிறது.
• அனிமேஷன்கள் மற்றும் UI புதுப்பிப்புகள்: நிகழ்வு சுழற்சி வலை பயன்பாடுகளில் மென்மையான அனிமேஷன்கள் மற்றும் UI புதுப்பிப்புகளை ஒருங்கிணைக்கிறது. UI ஐ மீண்டும் மீண்டும் புதுப்பிக்க நிகழ்வு சுழற்சி மூலம் புதுப்பிப்புகளை திட்டமிடல் தேவைப்படுகிறது, இது ஒரு நல்ல பயனர் அனுபவத்திற்கு முக்கியமானது.

செயல்திறன் மேம்படுத்தல் மற்றும் சிறந்த நடைமுறைகள்

செயல்திறன் மிக்க ஜாவாஸ்கிரிப்ட் குறியீட்டை எழுத நிகழ்வு சுழற்சியைப் புரிந்துகொள்வது அவசியம்:

• முக்கிய திரியைத் தடுப்பதைத் தவிர்க்கவும்: நீண்டகால ஒத்திசைவான செயல்பாடுகள் முக்கிய திரியைத் தடுத்து உங்கள் பயன்பாட்டைப் பதிலளிக்காமல் செய்யலாம். `setTimeout` அல்லது `async/await` போன்ற நுட்பங்களைப் பயன்படுத்தி பெரிய பணிகளை சிறிய, ஒத்திசைவற்ற பகுதிகளாக உடைக்கவும்.
• வலை APIகளை திறமையாகப் பயன்படுத்துதல்: ஒத்திசைவற்ற செயல்பாடுகளுக்கு `fetch` மற்றும் `setTimeout` போன்ற வலை APIகளைப் பயன்படுத்தவும்.
• குறியீடு சுயவிவரமாக்கல் மற்றும் செயல்திறன் சோதனை: உங்கள் குறியீட்டில் செயல்திறன் தடைகளை அடையாளம் காணவும், அதற்கேற்ப மேம்படுத்தவும் உலாவி டெவலப்பர் கருவிகள் அல்லது Node.js சுயவிவரமாக்கல் கருவிகளைப் பயன்படுத்தவும்.
• வலை தொழிலாளர்கள்/தொழிலாளர் திரிகளைப் பயன்படுத்துதல் (பொருந்தினால்): கணக்கீட்டு ரீதியாக தீவிரமான பணிகளுக்கு, முக்கிய திரியில் இருந்து வேலையை நகர்த்தவும் உண்மையான இணையான தன்மையை அடையவும் உலாவியில் வலை தொழிலாளர்கள் அல்லது Node.js இல் தொழிலாளர் திரிகளைப் பயன்படுத்த கருத்தில் கொள்ளுங்கள். இது குறிப்பாக பட செயலாக்கம் அல்லது சிக்கலான கணக்கீடுகளுக்கு நன்மை பயக்கும்.
• DOM கையாளுதலைக் குறைக்கவும்: அடிக்கடி DOM கையாளுதல்கள் விலை உயர்ந்ததாக இருக்கும். DOM புதுப்பிப்புகளைத் தொகுக்கவும் அல்லது மெய்நிகர் DOM (எ.கா., React அல்லது Vue.js உடன்) போன்ற நுட்பங்களைப் பயன்படுத்தி ரெண்டரிங் செயல்திறனை மேம்படுத்தவும்.
• திரும்ப அழைப்பு செயல்பாடுகளை மேம்படுத்தவும்: தேவையற்ற மேல்நிலையைத் தவிர்க்க திரும்ப அழைப்பு செயல்பாடுகளை சிறியதாகவும் திறமையாகவும் வைத்திருங்கள்.
• பிழைகளைக் கருணையுடன் கையாளவும்: உங்கள் பயன்பாடு செயலிழக்காமல் தடுக்க சரியான பிழை கையாளுதலை செயல்படுத்தவும் (எ.கா., வாக்குறுதிகளுடன் `.catch()` ஐப் பயன்படுத்துதல் அல்லது async/await உடன் `try...catch` ஐப் பயன்படுத்துதல்).

உலகளாவிய கருத்தில் கொள்ள வேண்டியவை

ஒரு உலகளாவிய பார்வையாளர்களுக்காக பயன்பாடுகளை உருவாக்கும்போது, பின்வருவனவற்றைக் கவனியுங்கள்:

• நெட்வொர்க் தாமதம்: உலகின் பல்வேறு பகுதிகளில் உள்ள பயனர்கள் மாறுபட்ட நெட்வொர்க் தாமதங்களை அனுபவிப்பார்கள். வளங்களின் முற்போக்கான ஏற்றுதல் மற்றும் ஆரம்ப ஏற்றுதல் நேரத்தைக் குறைக்க திறமையான API அழைப்புகளைப் பயன்படுத்துவதன் மூலம், உங்கள் பயன்பாட்டை நெட்வொர்க் தாமதங்களை கருணையுடன் கையாள மேம்படுத்தவும். ஆசியாவிற்கு உள்ளடக்கத்தை வழங்கும் ஒரு தளத்திற்கு, சிங்கப்பூரில் ஒரு வேகமான சேவையகம் சிறந்தது.
• உள்ளூர்மயமாக்கல் மற்றும் பன்னாட்டுமயமாக்கல் (i18n): உங்கள் பயன்பாடு பல மொழிகள் மற்றும் கலாச்சார விருப்பங்களை ஆதரிக்கிறதா என்பதை உறுதிப்படுத்தவும்.
• அணுகல்தன்மை: ஊனமுற்ற பயனர்களுக்கு உங்கள் பயன்பாட்டை அணுகக்கூடியதாக ஆக்குங்கள். ARIA பண்புகளைப் பயன்படுத்துவதையும் விசைப்பலகை வழிசெலுத்தலை வழங்குவதையும் கவனியுங்கள். வெவ்வேறு தளங்கள் மற்றும் திரை வாசகர்கள் முழுவதும் பயன்பாட்டைச் சோதிப்பது முக்கியமானது.
• மொபைல் மேம்படுத்தல்: உலகளவில் பல பயனர்கள் ஸ்மார்ட்போன்கள் மூலம் இணையத்தை அணுகுவதால், உங்கள் பயன்பாடு மொபைல் சாதனங்களுக்கு மேம்படுத்தப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும். இதில் பதிலளிக்கக்கூடிய வடிவமைப்பு மற்றும் மேம்படுத்தப்பட்ட சொத்து அளவுகள் அடங்கும்.
• சேவையக இடம் மற்றும் உள்ளடக்க விநியோக நெட்வொர்க்குகள் (CDNs): உலகம் முழுவதும் உள்ள பயனர்களுக்கு தாமதத்தைக் குறைக்க புவியியல் ரீதியாக மாறுபட்ட இடங்களில் இருந்து உள்ளடக்கத்தை வழங்க CDNs ஐப் பயன்படுத்தவும். உலகளாவிய பார்வையாளர்களுக்கு உலகெங்கிலும் உள்ள பயனர்களுக்கு நெருக்கமான சேவையகங்களிலிருந்து உள்ளடக்கத்தை வழங்குவது முக்கியம்.

முடிவுரை

திறமையான ஒத்திசைவற்ற ஜாவாஸ்கிரிப்ட் குறியீட்டைப் புரிந்துகொள்வதற்கும் எழுதுவதற்கும் நிகழ்வு சுழற்சி ஒரு அடிப்படை கருத்தாகும். இது எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்துகொள்வதன் மூலம், முக்கிய திரியைத் தடுக்காமல் ஒரே நேரத்தில் பல செயல்பாடுகளைக் கையாளும் பதிலளிக்கக்கூடிய மற்றும் செயல்திறன் மிக்க பயன்பாடுகளை உருவாக்கலாம். நீங்கள் ஒரு எளிய வலை பயன்பாட்டை உருவாக்குகிறீர்களோ அல்லது ஒரு சிக்கலான Node.js சேவையகத்தை உருவாக்குகிறீர்களோ, உலகளாவிய பார்வையாளர்களுக்கு ஒரு மென்மையான மற்றும் ஈர்க்கும் பயனர் அனுபவத்தை வழங்க பாடுபடும் எந்த ஜாவாஸ்கிரிப்ட் டெவலப்பருக்கும் நிகழ்வு சுழற்சி பற்றிய வலுவான புரிதல் அவசியம்.